자바 스크립트 - 나는 양식 진행 태그와 태그 세 가지가 자바 스크립트 클릭 이벤트

Question

진행 요소의 설정 값의 속성은 다음과 같이 제출

<form> 
    <progress min="0" max="100" value="0"></progress> 
    <input type="submit" value="submit1"> 
    <input type="submit" value="submit2"> 
    <input type="submit" value="submit3"> 
</form> 

내가 이벤트를 클릭 수신하고 변경 약간의 JS 코드를 진행률 막대 값.

;(function(){ 
    document.body.addEventListener('click', function(){ 
     var p = document.querySelector('progress'); 
     var s = document.querySelector('input'); 
     var val; 
     if(s.value=="submit1"){ 
      val=33; 
     } 
     if(s.value=="submit2"){ 
      val=66; 
     } 
     if(s.value=="submit3"){ 
      val=100; 
     } 
     p.value=val; 
    }, false); 
}()); 

그러나 진행률 표시 줄이 예상대로 작동하지 않습니다.

내가 이것을 해결할 수있는 요점은 무엇입니까? document.querySelector 소개

Answer 1

:

는 선택기의 지정된 그룹과 일치 (문서의 노드의 깊이 우선 예약 주문 탐색을 사용하여) 문서 내의 첫 번째 요소를 돌려줍니다.

따라서 코드는 문서의 첫 번째 요소이기 때문에 항상 "submit1"을 반환합니다. 또한 폼의 submit submit 콜백이 페이지에 나타나며 코드가 초기 단계로 돌아 가기 때문에 변경 사항을 볼 수 없습니다. 콜백을 사용하지 않으려면 입력 유형을 "버튼"으로 변경하십시오. 또한 각 버튼에 onclick 이벤트를 첨부하고 원하는 기능을 호출 할 수 있도록 제공합니다.

편집 : 작업 코드는 다음과 같습니다.

<form> 
     <progress min="0" max="100" value="0" id="progressBar1"></progress> 
     <input type="button" value="submit1" onclick="SubmitProgress(33);" /> 
     <input type="button" value="submit2" onclick="SubmitProgress(66);" /> 
     <input type="button" value="submit3" onclick="SubmitProgress(100);" /> 
    </form> 
    <script type='text/javascript'> 
     function SubmitProgress(valueToSet) { 
      document.getElementById("progressBar1").value = valueToSet; 
     } 
    </script> 

Answer 2

자바 스크립트에서 오타가 스크립트를 죽였을 수 있습니다. 대신

;(function(){ 

사용이를 사용 : 예상대로

$(function(){