문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======Javascript HTML DOM onclick Event======
<WRAP left notice 80%>
  * description : Javascript HTML DOM onclick Event 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-07-01
</WRAP>
<WRAP clear></WRAP>
\\
=====The source of the article==== 
[[https://www.w3schools.com/jsref/event_onclick.asp|Javascript HTML DOM onclick Event]]\\
<code javascript>
<body>
  
  <h1>The onclick Event</h1>

  <p>The onclick event is used to trigger a function when an elementis clicked on.</p>

  <p>Click the button to trigger a functionthat will output "Hello World" in a p element with id="demo".
  </p>

  <button onclick="myFunction()">Click me</button>

  <p id="demo"></p>

  <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "Au revoir, les enfants!"
    }
  </script>
</body>
</code>

=====Definition and Usage=====
온클릭 이벤트 (onclick event)는 사용자가 한 요소 위에서 클릭할 때 발생합니다.

=====Syntax=====
HTML에서:\\
<code javascript>
<body>
  
  <P>This example demonstrates how to assign an "onclick" event to an p elements.</P>

  <p id="demo" onclick="myFunction()">Click me.</p>

  <script>
    function myFunction () {
      document.getElementById("demo").innerHTML= " YOU CLICKED ME!";
    }
  </script>

</body>
</code>
\\
JavaScript에서\\
<code javascript>
<body>
  
  <p>This example uses the HTML DOM to assign an "onclick" event to a p element.</p>

  <p id="demo">Click me.</p>

  <script>
    document.getElementById("demo").onclick = function() {myFunction()};

    function myFunction() {
      document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
    }
  </script>
</body>
</code>
\\
JavaScript에서, %%addEventListener()%% 메서드를 사용하여\\
<code javascript>
<body>
  
  <p>This example uses the addEventListener() method to attach a "click" event to a p element.</p>

  <p id="demo">Click me.</p>

  <script>
    document.getElementById("demo").addEventListener("click", myFunction);

    function myFunction() {
      document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
    }
  </script>
  
</body>
</code>
\\
**Note:** %%addEventListener()%% 메서드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.\\

=====More Examples=====

====Example====
현재 요일, 날짜 및 시간을 표시하려면 %%<button>%% 요소를 클릭합니다.\\
<code javascript>
<body>

  <p>Click the button to display the time.</p>

  <button onclick="getElementById('demo').innerHTML = Date()">What is the time?</button>

  <p id="demo"></p> <!-- Thu Jul 01 2021 17:14:06 GMT+0900 (한국 표준시) -->
  
</body>
</code>

====Example====
%%<p>%% 요소를 클릭하여 텍스트 컬러를 red로 변경합니다.\\
<code javascript>
<body>

  <p id="demo" onclick="myFunction()">Click me to change my text color.</p>

  <script>
    function myFunction() {
      document.getElementById("demo").style.color= "red";
    }
  </script>
  
</body>
</code>

====Example====
클릭하여 %%<p>%% 요소의 컬러를 변경하는 방법에 대한 다른 예제\\
<code javascript>
<body>

  <p onclick="myFunction(this, 'red')">Click me to change my text color.</p>

  <script>
    function myFunction(elmnt, clr) {
      elmnt.style.color= clr;
    }
  </script>
  
</body>
</code>

====Example====
버튼을 클릭하여 입력 필드에서 다른 입력 필드로 일부 텍스트를 복사합니다.\\
<code javascript>
<body>

Field1: <input type="text"id="field1" value="Hello World!"><br> 
Field2: <input type="text"id="field2"><br>

<button onclick="myFunction()">Copy Text</button>

<p>
  A function is triggered when the buttonis clicked.
  The function copies the textfrom Field1  into Field2
</p>

<script>
  function myFunction() {
    document.getElementById("field2").value= document.getElementById("field1").value;
  }
</script>
  
</body>
</code>

====Example====
<code javascript>
<body>
  
  <p>This example demonstrates how to assign an "onclick" event to the window object.</p>

  <p>Click anywhere in this window to change the background color of body.</p>

  <script>
    window.onclick=myFunction;

    function myFunction() {
      document.getElementsByTagName("BODY")[0].style.backgroundColor = "crimson";
    }
  </script>
  
</body>
</code>

====Example====
onclick을 사용하여 드롭다운 버튼을 만듭니다.\\
<code javascript>
  <style>
    .dropbtn {
      background-color: #4caf50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
    }

    .dropbtn:hover, .dropbtn:focus {
      background-color: #3e8e41;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }

    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }

    .dropdown-content a:hover {background-color: #f1f1f1}

    .show {display:block;}

  </style>
</head>
<body>
  
  <h2>Clickable Dropdown</h2>
  <p>Click on the button to open the dropdown menu.</p>

  <div class="dropdown">
    <button id="myBtn" class="dropbtn">Dropdown</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </div>
  </div>

  <script>
    /* Get the button, and when the user clicks on it, executemyFunction */
    document.getElementById("myBtn").onclick = function() {myFunction()};
    
    /* myFunction toggles between adding and removing the show class, 
    which is used to hide and show the dropdown content. */
    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }
  </script>
  
</body>
</code>












{{tag>오션, Javascript HTML DOM onclick Event}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
