검색
<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);
});