JavaScript를 사용하여 간단한 클릭 카운터 만들기

1. JavaScript를 사용하여 버튼에서 카운터 클릭
2. JavaScript를 사용하여 Div에서 카운터를 클릭하십시오
3. 클릭 카운터-방해받지 않는 접근 방식
4. 비고

클릭 카운터는 클릭 수를 기록하고 화면에 표시합니다. 카운터는 JavaScript click이벤트를 사용하여 카운터 값을 증가시킵니다. 게임 (포인트 또는 점수 값을 높이기 위해) 및 시간을 절약하는 해킹 등 다양한 영역에서 사용할 수 있습니다. JavaScript에서 간단한 클릭 카운터를 만드는 코드를 살펴 보겠습니다.

JavaScript를 사용하여 버튼에서 카운터 클릭

<h3><center>JavaScript Click Counter</center></h3>
<div>
    <center><h3 id="counter-label">0</h3></center>
</div>
<center>
    <div>
        <button onclick="incrementClick()">Click Me</button>
        <button onclick="resetCounter()">Reset</button>
    </div>
</center>

var counterVal = 0;

function incrementClick() {
  updateDisplay(++counterVal);
}

function resetCounter() {
  counterVal = 0;
  updateDisplay(counterVal);
}

function updateDisplay(val) {
  document.getElementById('counter-label').innerHTML = val;
}

코드에서 카운터 변수counterVal의 값을 사용자가 클릭 할 때마다1씩 증가시킵니다. 단계는 다음과 같습니다.

위의 코드 샘플은 클릭 카운터를 표시하고 버튼 클릭시 증가시킵니다. 대부분의 사용 사례에서 항상 버튼에 클릭 카운터를 적용하지 않을 수 있습니다. 유연하게 만들기 위해div,li등과 같은 다른 HTML 요소에 대한 기능을 지원해야합니다. 거의 모든 HTML 요소에는onclick이벤트 핸들러가있는click이벤트가 있습니다.

JavaScript를 사용하여 Div에서 카운터를 클릭하십시오

게임에서 장면에 카운터 증가를 트리거하는 버튼이 항상있는 것은 아닙니다. 대부분은div와 같은 HTML 요소로 구성 될 수 있습니다. 이러한 경우div태그의onclick이벤트 핸들러를 사용하여 카운터 값을 증가시키기위한 클릭을 캡처 할 수 있습니다. 다음 코드 샘플을 참조하십시오.

<h3><center>JavaScript Click Counter</center></h3>
<div>
    <center><h3 id="counter-label">0</h3></center>
</div>
<center>
    <div>
        <div onclick="incrementClick()">Click Me</div>
        <button onclick="resetCounter()">Reset</button>
    </div>
</center>

var counterVal = 0;

function incrementClick() {
  updateDisplay(++counterVal);
}

function resetCounter() {
  counterVal = 0;
  updateDisplay(counterVal);
}

function updateDisplay(val) {
  document.getElementById('counter-label').innerHTML = val;
}

이 예에서<div onclick="incrementClick()">Click Me</div>행에div를 사용했음을 알 수 있습니다. 이 변경으로incrementClick()은 버튼 대신 div를 클릭 할 때 트리거됩니다. 이 코드는<li>,<a>,<div>등과 같은 HTML 태그에서도 잘 작동합니다. onclick이벤트 핸들러를 지원하는 거의 모든 HTML 태그는onclick리스너와 연관 될 수 있으며 유사하게 작업 할 수 있습니다.

클릭 카운터-방해받지 않는 접근 방식

JavaScript에서 방해받지 않는 접근 방식으로 클릭 카운터를 구현하는 경우 HTML에서onclick이벤트 핸들러를 제거하고이를 JavaScript 코드로 이동해야합니다. 코드 구조는 약간 다르게 보이지만 다음 샘플 코드를 참조하십시오.

<h3><center>JavaScript Click Counter</center></h3>
<div>
    <center><h3 id="counter-label">0</h3></center>
</div>
<center>
    <div>
        <div id="click-div">Click Me</div>
        <button id="reset-button">Reset</button>
    </div>
</center>

window.onload =
    function() {
  let clickDiv = document.getElementById('click-div');
  clickDiv.onclick = incrementClick;

  let resetBtn = document.getElementById('reset-button');
  resetBtn.onclick = resetCounter;
}

var counterVal = 0;

incrementClick =
    function() {
  updateDisplay(++counterVal);
}

function resetCounter() {
  counterVal = 0;
  updateDisplay(counterVal);
}

function updateDisplay(val) {
  document.getElementById('counter-label').innerHTML = val;
}

여기에서 클릭 이벤트를 JavaScript 코드에 바인딩합니다. Click Me div 및Reset버튼에onclick리스너를 사용한다는 점을 제외하면 구조는 동일합니다. 이 바인딩은 런타임에 발생합니다. 클릭 리스너에 정의 된 함수를 바인딩합니다. 따라서 코드는 비슷해 보이며 많은 변경 사항이 없습니다.

비고

방해받지 않는 접근 방식의 차이점은onclick리스너를 HTML에서 수행하는 대신 JavaScript 코드에서 바인딩한다는 것입니다. 버튼이나 div에onclick이벤트 핸들러가 할당 된 경우 HTML만으로는 인식하기 어렵습니다.

이 접근 방식을 사용하면 모든onclick이벤트가 JavaScript에서 바인딩되고 처리되므로 코드가 더 깔끔해 보입니다. JavaScript 코드가 HTML에 침입하지 않으므로 마크 업으로 HTML을 깔끔하게 유지합니다.

window.onload함수 내에서onclick리스너를 설정하지 않으면 코드가 작동하지 않습니다. document.getElementById("click-div")코드는 HTML 요소를 찾을 수 없기 때문에null을 반환합니다. 창이로드되고 DOM이 준비되면wondow.onload함수가 트리거됩니다. 따라서window.onload블록에 코드를 삽입하면 HTML 요소가로드되고 JavaScript의document.getElementById()함수를 사용하여 쿼리 할 수 ​​있습니다.