목차

Javascript HTML DOM onclick Event

  • description : Javascript HTML DOM onclick Event
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-07-01


The source of the article

Javascript HTML DOM onclick Event

<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>

Definition and Usage

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

Syntax

HTML에서:

<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>


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>


JavaScript에서, addEventListener() 메서드를 사용하여

<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>


Note: addEventListener() 메서드는 Internet Explorer 8 및 이전 버전에서 지원되지 않습니다.

More Examples

Example

현재 요일, 날짜 및 시간을 표시하려면 <button> 요소를 클릭합니다.

<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>

Example

<p> 요소를 클릭하여 텍스트 컬러를 red로 변경합니다.

<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>

Example

클릭하여 <p> 요소의 컬러를 변경하는 방법에 대한 다른 예제

<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>

Example

버튼을 클릭하여 입력 필드에서 다른 입력 필드로 일부 텍스트를 복사합니다.

<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>

Example

<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>

Example

onclick을 사용하여 드롭다운 버튼을 만듭니다.

  <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>
, , , , ,