230201_ JS | Notion

옵션 선택 및 innnerHTML 출력

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #out {
        position: absolute;
        left: 50px;
        top: 200px;
        width: 400px;
        height: 200px;
        border: 1px solid gray;
        background-color: #ffc;
        padding: 20px;
      }
    </style>
    <script>
      function disp() {
        //취미
        var hobbyStr = "나의 취미는 ";
        var flag = false; //찾으면 true로 변경

        for (var i = 0; i < frm.hobby.length; i++) {
          //선택이 되면 value 값 읽어서 hobbyStr에 추가
          if (frm.hobby[i].checked) {
            flag = true;
            hobbyStr += frm.hobby[i].value + "&nbsp";
          }
        }

        //취미를 선택하지 않았을 경우 초기값 그대로 false
        if (!flag) hobbyStr += "없습니다.<br>";
        else hobbyStr += "입니다.<br>";

        out.innerHTML += "취미: " + hobbyStr;

        //지역
        var homeStr = "나의 거주지는 ";
        for (var i = 0; i < frm.home.length; i++) {
          if (frm.home[i].checked) homeStr += frm.home[i].value + "입니다.<br>";
        }
        out.innerHTML += "거주지: " + homeStr;

        //연령대
        out.innerHTML += "나이: " + frm.age.value;
      }

      function init() {
        out.innerHTML = " ";
      }
    </script>
  </head>
  <body>
    <form name="frm">
      <table border="1" style="width: 500px">
        <tr>
          <th style="width: 150">취미</th>
          <td>
            <input type="checkbox" name="hobby" value="게임" />게임&nbsp
            <input type="checkbox" name="hobby" value="낚시" />낚시&nbsp
            <input
              type="checkbox"
              name="hobby"
              value="넷플릭스감상"
            />넷플릭스감상&nbsp
            <input type="checkbox" name="hobby" value="독서" />독서&nbsp
            <input type="checkbox" name="hobby" value="음악듣기" />음악듣기&nbsp
          </td>
        </tr>
        <tr>
          <th style="width: 150">거주지역</th>
          <td>
            <input type="radio" name="home" value="서울" />서울&nbsp
            <input type="radio" name="home" value="경기" />경기&nbsp
            <input type="radio" name="home" value="부산" />부산&nbsp
            <input type="radio" name="home" value="제주" />제주&nbsp
            <input type="radio" name="home" value="인천" />인천&nbsp
          </td>
        </tr>
        <tr>
          <th style="width: 150">연령</th>
          <td>
            <select name="age">
              <option value="20대">20대</option>
              <option value="30대">30대</option>
              <option value="40대">40대</option>
              <option value="50대">50대</option>
              <option value="60대">60대</option>
            </select>
          </td>
        </tr>
        <tr>
          <td colspan="2" align="center">
            <input type="button" value="결과출력" onclick="disp()" />
            <input type="reset" value="초기화" onclick="init()" />
          </td>
        </tr>
      </table>
    </form>
    <div id="out"></div>
  </body>
</html>

Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #out {
        position: absolute;
        top: 50px;
        left: 10px;
        width: 300px;
        height: 400px;
        padding-left: 10px;
        background-color: #ffc;
        font-size: 15px;
        border: 1px solid black;
      }
    </style>
    <script>
      var rnd;
      var cnt = 0;

      window.onload = function () {
        rnd = parseInt(Math.random() * 100) + 1;
      };

      function check(su) {
        if (su <= 0 || su > 100) alert("잘못 입력하셨습니다.");

        //난수와 숫자비교하여 결과출력
        cnt++; //엔터누르면 무조건 cnt 증가
        if (su > rnd) out.innerHTML += cnt + " : " + su + "보다 작습니다.<br>";
        else if (su < rnd)
          out.innerHTML += cnt + " : " + su + "보다 큽니다.<br>";
        else {
          out.innerHTML += "<h4>축하합니다! 정답은 " + rnd + "입니다!</h4><br>";
          imge.src = "../만화이미지/01.png";
        }

        if (cnt > 10) {
          out.innerHTML = "<h4>10회안에 맞추기를 실패하셨습니다.</h4>";
          imge.src = "../만화이미지/17.png";
        }

        //텍스트창 초기화
        frm.num.value = " ";
      }
    </script>
  </head>
  <body>
    <form name="frm" onsubmit="return false">
      <!-- form이 submit의 역할을 하지 x -->

      <b> 숫자입력: </b>
      <input
        type="text"
        name="num"
        size="5"
        onkeydown="if(event.keyCode==13) check(value)"
      />
      <!-- 숫자 입력 후 엔터 누르면 함수 호출 값 전달 -->
    </form>
    <div id="out"></div>
    <div
      style="
        position: absolute;
        top: 80px;
        left: 350px;
        background-color: yellow;
        border-radius: 100%;
      "
    >
      <img src="" name="imge" />
    </div>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      table {
        border: 1px solid gray;
        border-collapse: collapse;
        width: 500px;
      }

      th {
        width: 120px;
        background-color: bisque;
      }

      th,
      td {
        border: 1px dotted gray;
      }

      #result {
        background-color: #ffc;
        width: 500px;
        height: 300px;
        font-size: 1.3em;
        border: 1px solid gray;
        margin-top: 20px;
        padding: 10px;
      }
    </style>

    <script>
      window.onload = function () {
        document.getElementById("btnResult").onclick = function () {
          var out = document.getElementById("result");

          var s = "[개인정보]<br><br>";
          s += "이름: " + document.getElementById("name").value + "<br>";
          s += "비밀번호: " + document.getElementById("pass").value + "<br>";
          s += "혈액형: " + frm.blood.value + "형<br>";
          s += "생년월일: " + document.getElementById("birth").value + "<br>";

          s += "가본 나라: ";

          var flag = false;

          for (var a = 0; a < frm.nara.length; a++) {
            if (frm.nara[a].checked) {
              flag = true;
              s += frm.nara[a].value + "&nbsp";
            }
          }

          if (!flag) s += "없습니다.";

          out.innerHTML = s;
        };
      };

      function init() {
        var out = document.getElementById("result");
        out.innerHTML = "&lt결과출력&gt";
      }
    </script>
  </head>
  <body>
    <form id="frm">
      <table>
        <caption>
          <b>폼 태그 출력 복습</b>
        </caption>
        <tr>
          <th>이름</th>
          <td>
            <input
              type="text"
              id="name"
              size="15"
              placeholder="이름을 입력하시오"
            />
          </td>
        </tr>

        <tr>
          <th>비밀번호</th>
          <td>
            <input
              type="password"
              id="pass"
              size="20"
              placeholder="비밀번호를 입력하시오"
            />
          </td>
        </tr>

        <tr>
          <th>혈액형</th>
          <td>
            <input type="radio" value="A" name="blood" />A형&nbsp
            <input type="radio" value="B" name="blood" />B형&nbsp
            <input type="radio" value="O" name="blood" />O형&nbsp
            <input type="radio" value="AB" name="blood" />AB형&nbsp
          </td>
        </tr>

        <tr>
          <th>생년월일</th>
          <td>
            <input type="date" value="2022-12-25" id="birth" />
          </td>
        </tr>

        <tr>
          <th>가본 나라</th>
          <td>
            <input type="checkbox" name="nara" value="이탈리아" />이탈리아&nbsp
            <input type="checkbox" name="nara" value="영국" />영국&nbsp
            <input type="checkbox" name="nara" value="호주" />호주&nbsp
            <input type="checkbox" name="nara" value="체코" />체코&nbsp
          </td>
        </tr>

        <tr>
          <td colspan="2" align="center">
            <button type="button" id="btnResult">결과출력</button>
            <button type="reset" onclick="init()">초기화</button>
          </td>
        </tr>
      </table>
    </form>
    <div id="result">&lt결과출력&gt</div>
  </body>
</html>

옵션 선택 및 innnerHTML 출력

setAttribute

getAttribute