자바 스크립트를 사용하여 입력에 대한 증가 화살표 값 확인

debugcn 에 게시 Dev

arater 2000

증가 화살표 버튼이있는 간단한 입력이 있는데, 숫자를 하나의 디스플레이 경고 메시지로 늘리고 0으로 줄이면 다른 경고 메시지를 표시하도록 입력 값을 확인하고 싶습니다.

다음은 증가 화살표 버튼이있는 입력입니다.

<button style="margin-left:20%;" type='button' onclick="this.parentNode.querySelector('input[type=number]').stepUp();" class="plus"></button>
<input id="myInput" min="0" name="quantity" value="0" type="number" />
<button style="margin-left:20%;" type='button' onclick="this.parentNode.querySelector('input[type=number]').stepDown();"></button>

내가 시도한 것은 다음과 같습니다.

if (document.getElementById("myInput").value === "1") {
  alert("one");
} else if (document.getElementById("myInput").value === "0") {
  alert("zero");
}

업데이트 된 코드 :

<script type="text/javascript">
  function validate3() {

    var input = document.querySelector("#quantity");
    var parent = document.querySelector(".input-control");

    function alertQuantity(value) {
      if (value > '1') alert("one");
      else if (value === '0') alert("zero");
    }

    parent.addEventListener('click', function(event) {
      var target = event.target;
      if (target.tagName === 'BUTTON') {
        if (target.id === 'stepUp') {
          input.stepUp();
        } else if (target.id === 'stepDown') {
          input.stepDown();
        }
        alertQuantity(input.value);
      }
    })

    input.addEventListener('change', function(event) {
      alertQuantity(event.target.value);
    })
  }
</script>


<div class="input-control">
  <button type='button' id="stepUp" onclick="validate3() ">+</button>
  <input id="quantity" min="0" name="quantity" value="0" type="number" />
  <button type='button' id="stepDown" onclick="validate3() ">-</button>
</div>

SMAKSS

먼저, 깔끔하고 유지 관리 할 수 있도록 Unobtrusive JavaScript 접근 방식 을 고수하기 위해 항상 인라인 핸들러를 사용하지 마십시오 .

원하는 것을 얻기 위해 버튼에 이벤트 리스너를 추가하고 조건을 충족하는지 여부를 확인하기위한 입력을 추가 할 수 있습니다. 간단히 addEventListener(). 또한 애플리케이션에서 더 나은 성능을 생성하려면 일반적으로 DOM에 동일한 이벤트를 여러 개 연결하지 않는 것이 좋습니다. 따라서 단일 이벤트 리스너를 상위 요소에 추가 한 다음 확인 하는 이벤트 위임 방식 을 사용하는 것이 좋습니다. 클릭 한 요소가 원하는 것과 동일한 지 여부.

따라서 최종 코드는 다음과 같습니다.

ES6 버전

const input = document.querySelector("#quantity")
const parent = document.querySelector(".input-control")

function alertQuantity(value) {
  if (value === '1') alert('one')
  else if (value === '0') alert('zero')
}

parent.addEventListener('click', function(event) {
  const {
    target
  } = event
  if (target.tagName === 'BUTTON') {
    if (target.id === 'stepUp') {
      input.stepUp();
    } else if (target.id === 'stepDown') {
      input.stepDown();
    }
    alertQuantity(input.value)
  }
})

input.addEventListener('change', function(event) {
  alertQuantity(event.target.value)
})

<div class="input-control">
  <button type='button' id="stepUp">+</button>
  <input id="quantity" min="0" name="quantity" value="0" type="number" />
  <button type='button' id="stepDown">-</button>
</div>

ES5 버전

^{세미 콜론, if 문 차단 및 스크립트 태그는 추가 가독성과 OP 상황을 위해 추가되었습니다. 따라서 이러한 일은 ECMAScript 버전과 관련이 없습니다.}

<div class="input-control">
  <button type='button' id="stepUp">+</button>
  <input id="quantity" min="0" name="quantity" value="0" type="number" />
  <button type='button' id="stepDown">-</button>
</div>

<script type="text/javascript">
  var input = document.querySelector("#quantity");
  var parent = document.querySelector(".input-control");

  function alertQuantity(value) {
    if (value === '1') {
      alert('one');
    } else if (value === '0') {
      alert('zero');
    }
  }

  parent.addEventListener('click', function(event) {
    var target = event.target;
    if (target.tagName === 'BUTTON') {
      if (target.id === 'stepUp') {
        input.stepUp();
      } else if (target.id === 'stepDown') {
        input.stepDown();
      }
      alertQuantity(input.value);
    }
  });

  input.addEventListener('change', function(event) {
    alertQuantity(event.target.value);
  });
</script>

스 니펫 작동 방식

querySelector()API를 사용하여 실제 DOM에서 요소를 가져 왔습니다.
alertQuantity추상화를 생성하고 달성하려는 간단한 경고 목적을위한 코드 중복을 피하기 위해 호출 된 함수 를 생성합니다.
그런 다음 addEventListener()부모 click이벤트 및 입력 change이벤트 를 수신 하는 데 사용하여 간단한 이벤트 리스너를 만듭니다.
부모 클릭 이벤트에서 어떤 버튼이 클릭되는지 확인하고 그에 따라 작업을 수행했습니다.
마지막으로 알림 기능을 호출하여 이벤트를

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-5

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사