🚀 자바 스크립트 JavaScript
4️⃣ 자바 스크립트 일반태그, 폼(from)태그 Getter와 Setter + 메소드
Meteora_
2021. 3. 2. 13:19
728x90
일반태그는 output만 내보냄
-> .innerHTML로 접근
form태그는 input을 허용하고 out도 내보냄
-> .value로 접근
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="demo">p tag id demo</p> <!-- 일반태그(output) -->
<input type="text" id="text" value="" size="20"> <!-- form태그(input, output) -->
<br>
<input type="button" value="input button" onclick="btnclick()">
<br>
<script type="text/javascript">
function btnclick(){
alert("btnclick() 호출");
document.getElementById("demo").innerHTML="버튼이 클릭됨!!"; //일반태그의 값은 innerhtml을 쓴다
let text = document.getElementById("text").value; //setter 폼태그는 value라고쓴다
alert("text:"+text); //확인
document.getElementById("text").value = "World"; //getter 내보내줄때
}
</script>
<br><br>
<input type="button" value="input button" onclick="btnfunc(1)">
<br>
<button type="button" onclick="">button tag</button>
<script type="text/javascript">
function btnfunc(num){
let name;
name = 'input button click';
if(num == 1){
}else{
name = 'button tag click';
}
alert(name);
document.getElementById("demo").innerHTML = sum(3, 6);
document.getElementById("text").value = sum(3, 6);
}
function sum(x,y) {
return x * y;
}
</script>
<br><br>
입력:<input type="text" id="num" value="123">
<br><br>
<button type="button" onclick="inputclick()">클릭</button>
<script type="text/javascript">
function inputclick(){
let num = document.getElementById("num").value;
document.getElementById("num").value = parseInt(num) + 3;
}
</script>
</body>
</html>
