4-01.HTML Element 컨트롤
2023. 3. 30. 13:36ㆍJavascript/자바스크립트 제대로 배워볼래?
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<input type="text" id="text1" value="ABC" />
<br>
관심사 :
<br>
<label><input type="checkbox" name="chk_interest" value="it">IT/컴퓨터</label>
<label><input type="checkbox" name="chk_interest" value="entertainment">엔터테이먼트</label>
<label><input type="checkbox" name="chk_interest" value="sports">스포츠</label>
<label><input type="checkbox" name="chk_interest" value="shopping">쇼핑</label>
<label><input type="checkbox" name="chk_interest" value="book">도서</label>
<br>
Radio:
<br>
<label><input type="radio" name="radio_email_yn" value="Y" checked>동의</label>
<label><input type="radio" name="radio_email_yn" value="N" checked>거부</label>
<br>
Select:
<select id="select1">
<option value="KO">Korea</option>
<option value="CN">China</option>
<option value="JP">Japan</option>
</select>
<br>
<button type="button" onclick="doSave();">Save</button>
<div id="div1"><h1>Hello</h1></div>
<script>
document.getElementById("text1").value ="46849841651";
function doSave() {
var oText1 = document.getElementById("text1");
console.log(oText1.value);
console.log(oText1);
var oText2 = document.querySelector("#text1");
console.log(oText2);
var oCheckbox = document.getElementsByName("chk_interest");
console.log(oCheckbox);
for(var i=0;i<oCheckbox.length;i++){
if(oCheckbox[i].checked) {
console.log(oCheckbox[i].value);
}
}
var oCheckbox2 = document.querySelectorAll("[name=chk_interest]")
console.log(oCheckbox2);
var oCheckbox3 = document.querySelectorAll("[name=chk_interest]:checked")
console.log(oCheckbox3);
var oRadio = document.querySelector("[name=radio_email_yn]:checked");
console.log(oRadio);
var oSelect = document.getElementById("select1");
console.log(oSelect.value);
console.log(document.getElementById("div1").innerText);
console.log(document.getElementById("div1").innerHTML);
console.log(document.getElementsByTagName("div"));
}
</script>
</body>
</html>'Javascript > 자바스크립트 제대로 배워볼래?' 카테고리의 다른 글
| 4-03.HTML 스타일 컨트롤 (0) | 2023.03.30 |
|---|---|
| 4-02.HTML 이벤트 컨트롤 (0) | 2023.03.30 |
| 3-17.정규식(RegExp) (0) | 2023.03.30 |
| 3-16.Strict Mode (0) | 2023.03.30 |
| 3-15.Error - try_catch_finally (0) | 2023.03.30 |