728x90
onmouseover / onmouseout
<!DOCTYPE html>
<html lang="en">
<body>
<select id="year"></select>
<p onmouseover="this.style.backgroundColor='red'"
onmouseout="this.style.backgroundColor='gold'">
마우스를 올리면 red색으로 변경</p>
<p id="a">마우스를 올리면 red색으로 변경</p>
<script src="cl.js"></script>
</body>
</html>let n=document.getElementById('a');
n.addEventListener('mouseover',function(){
this.style.backgroundColor='red';
})
onclick
<!DOCTYPE html>
<html lang="en">
<body>
<form>
식<input type="text" id="exp" value=""><br>
값<input type="text" id="result">
<input type="button" value="계산" onclick="cal()">
</form>
<script src="cl.js"></script>
</body>
</html>function cal(){
let n = document.getElementById('exp');
let m = document.querySelector('#result');
//eval = 문자열 계산해주는 함수
m.value=eval(n.value)
}
onblur / focus
<!DOCTYPE html>
<html lang="en">
<body>
<form>
식<input type="text" id="exp" onblur="cal(this)"><br>
값<input type="text" id="result">
</form>
<script src="cl.js"></script>
</body>
</html>function cal(obj){
if(obj.value == ''){
alert("적어야 한다!");
obj.focus();
}
}
checkbox
<!DOCTYPE html>
<html lang="en">
<body>
<form>
<input type="checkbox" name="ame" value="5000"
onclick="cal(this)">아메리카노 5000원
<input type="checkbox" name="latte" value="5500"
onclick="cal(this)">라떼 5500원
<input type="checkbox" name="smo" value="6000"
onclick="cal(this)">스무디 6000원<br>
내야할 금액 <input type="text" id="price" value="0">
</form>
<script src="cl.js"></script>
</body>
</html>let sum=0;
function cal(obj){
if(obj.checked){
sum+=parseInt(obj.value); // 선택한 체크박스의 value 값
}
else{
sum-=parseInt(obj.value);
}
document.getElementById('price').value=sum;
}
radio button (name을 동일하게 줘야함)
<!DOCTYPE html>
<html lang="en">
<body>
<form><!-- radio 버튼은 name을 동일하게 줘야함 -->
<input type="radio" name="cafe" value="ame">아메리카노 5000원
<input type="radio" name="cafe" value="lat">라떼 5500원
<input type="radio" name="cafe" value="smo">스무디 6000원<br>
<input type="button" value="주문" onclick="cal()">
</form>
<script src="cl.js"></script>
</body>
</html>
function cal(){
let n = document.getElementsByName('cafe'); //3개
let m = 'null';
for(let i=0;i<n.length;i++){
if(n[i].checked==true){
m=n[i];
}
}
if(m!=null){
alert(m.value+"를 주문했다");
}
}
onmousemove
<!DOCTYPE html>
<html lang="en">
<body>
<div class="f">
<p>
<b>x</b><span id="textX"></span>
</p>
<p>
<b>y</b><span id="textY"></span>
</p>
</div>
<script src="cl.js"></script>
</body>
</html>let m = document.getElementById('textX');
let m2 = document.getElementById('textY');
document.onmousemove=function(e){
let x=e.pageX;
let y=e.pageY;
m.innerText=x;
m2.innerText=y;
}
728x90
'Language > JavaScript' 카테고리의 다른 글
| [JS] 종합복습(문서객체이벤트) (3) | 2024.04.04 |
|---|---|
| [JS] Stop Watch 만들기 (0) | 2024.04.04 |
| [JS] 종합복습 (0) | 2024.04.03 |
| [JS] className, dataset (0) | 2024.04.03 |
| [JS] HTML DOM Node (0) | 2024.04.03 |