<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>
<script>
function test(){
document.querySelector("#txt").value="hi"
}
function changeColor(){
document.bgColor="yellow"
}
function test1(str){
alert(str);
}
function changeStyle(){
document.getElementById('p1').style.backgroundColor='red';
document.getElementById('p1').style.color='white'
document.getElementById('p1').style.fontStyle='italic'
}
function gugudan(){
var str ="";
for(i=1; i<10;i++){
str += "2*"+i+"="+2*i+"<br/>";
}
document.getElementById("result").innerHTML =str
}
function guguCal(){
d = document.getElementById("dan").value;
var str ="";
for(i=1; i<10;i++){
str += d+"*"+i+"="+d*i+"<br/>";
}
document.getElementById("guguResult").innerHTML =str
}
</script>
</head>
<body>
<input type="text" id="txt"/><br/>
<input type="button" value="test" onclick="test()"/>
<input type="button" value="test1" onclick="test1('안녕')"/>
<input type="button" value="test2" onclick="test1('안녕22222')"/>
<input type="button" value="변경" onclick="changeColor()"/>
<button onclick="test()">버튼test 호출</button>
<hr/>
<p id="p1">여기를 변경합니다.</p>
<input type="button" value="클릭" onclick="changeStyle()"/>
<input type="button" value="2단" onclick="gugudan()"/>
<div id="result"></div>
<hr/>
단 : <input type="text" id="dan" size="5" />
<input type="button" value="구구단" onclick="guguCal()"/>
<div id="guguResult"></div>
</body>