javascript querySelector

검색

<div class="list-container">
    <form id="search" action="https://search.naver.com/search.naver" target="_blank">
        <input type="text" name="query" id="" value="event">
        <button type="submit">검색</button>
    </form>
</div>
const search = document.querySelector("#search");
search.addEventListener("submit", function (e) {
  let keyword = search.querySelector("#search > input[type=text]");
  console.log(keyword.value);
  if (!keyword.value) {
    e.preventDefault(); //이벤트 중지
    alert("검색어를 입력해주세요.");
  }
});

계산기

<div class="list-container calc">
    <input type="text" name="" id="" value="">
    <div>결과 : <span id="result"></span></div>
    <button type="button">검색</button>
</div>
const calcContainer = document.querySelector("div.calc");
const btnCalc = calcContainer.querySelector("button");
btnCalc.addEventListener("click", function (e) {
  var calcInput = calcContainer.querySelector("input[type=text]");
  const calResult = calcContainer.querySelector("#result");
  calResult.innerText = "" + eval(calcInput.value);
});

Leave a Comment