잡동사니에도 사랑을

[21.09.13] exam16 - showResult() / hideResult() / onmouseover / onmouseout 본문

JAVA_EE/JavaScript

[21.09.13] exam16 - showResult() / hideResult() / onmouseover / onmouseout

luvforjunk 2021. 9. 14. 01:11
728x90
반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script type="text/javascript">

        function sum(x, y){ // 함수 생성

               return x+y;

        }

 

        function showResult() {

               var result = sum(10, 20);

               document.getElementById("question").innerHTML = "<font color='red'>" + result + "</font>";

        }

        function hideResult() {

               document.getElementById("question").innerText = "?";

        }

       

</script>

</head>

<body>

        <h1 onmouseover="showResult()" onmouseout="hideResult()">

        10 + 50 = <span id="question" style="border: 1px solid red;">?</span>

        </h1>

        <p>결과를 보시려면 수식 위에 마우스를 올리시오.</p>

 

</body>

</html>

 

<!--

onmouseover : 마우스를 그냥 올렸을 때

onmouseout : 마우스를 내렸을 때

 

exam15는 클릭이라는 이벤트를 발생시킨 것

exam16은 마우스 오버, 아웃 이벤트를 발생시킨 것

 -->

 

결과창1

 

결과창2

728x90
반응형

'JAVA_EE > JavaScript' 카테고리의 다른 글

[21.09.14] exam21(JavaScript) - 내장 객체  (0) 2021.09.14
[21.09.13] exam15(JavaScript) - 이벤트 처리, 종류  (0) 2021.09.14
[21.09.13] exam17 - var answer = eval(input);  (0) 2021.09.14
[21.09.13] exam18 - 스파게티 소스(에러가 발생하는 이유)  (0) 2021.09.14
[21.09.13] exam19(JavaScript) - document.getElementById("myid")  (0) 2021.09.14
'JAVA_EE/JavaScript' Related Articles more