자바 스크립트 HTML DOM 이벤트 리스너는

내 코드가 작동하지 않습니다.자바 스크립트 HTML DOM 이벤트 리스너는

POST 메서드로 시도해 보았습니다. DOM Event Listener와 함께 작동하지 않는 이유는 무엇입니까?

2017-04-11 Jose Marques

이 줄은 적절하지 않다 :.'document.getElementById를 ("myBtn") 또는 addEventListener는 ("클릭", functio_test,' – Slime

코드이

과 같아야을

<form id="<?php echo $id; ?>" name ="form_test" action="test_form.php" method="post"> 
    <input type="radio" name="type_test" value="ola"> ola <br/> 
    <input type="radio" name="type_test" value="adeus"> adeus <br/> 
    <input type="submit" value="submit" /> <!--imput only use for POST method--> 
</form> 

<button id="myBtn">Try it</button> 

<script> 
     document.getElementById("myBtn").addEventListener("click", functio_test); 

     function functio_test(){ 
      var x = document.querySelector('input[name="type_test"]:checked').value; 
      if(x == "ola"){ 
       alert("Ola José"); 
      } 
      else if(x == "adeus"){ 
       alert("Adeus José"); 
      } 
      else { 
       alert("Continua José"); 
      } 
     } 
</script>

설명 fo r "POST 메서드에 대해서만 사용"은 진짜 주석이 아니 었습니다. 앞에서 @Hossam에서 언급했듯이 addEventListein에 닫는 대괄호가 없습니다. @Cruiser에서 언급했듯이 함수를 선언 할 때 function이라는 단어가 누락되었습니다. 또한 id 속성은 고유해야하므로 id = "type_test"는 한 번만 지정해야합니다. type_test 라디오 버튼의 값을 얻는 방법은 확인 된 것을 찾기 위해 ID 호출이 작동하지 않는 쿼리 선택기를 통해 수행 할 수 있습니다. 나는 그것을 시도 버튼을 클릭하여 양식을 제출하고 싶지 않아 가정합니다. 가장 쉬운 방법은 단추를 폼 외부에 배치하는 것입니다.

또한 자바 스크립트 재미 :

출처

2017-04-11 18:18:41 CodingYourLife

올바르게 사용하지 않으므로. 당신과 같이 호출 할 수 있습니다,

document.getElementById("myBtn").addEventListener("click", function(){ 
    // code here 
});

을 또는 :

document.getElementById("myBtn").addEventListener("click", functio_test); 

// and you must make sure to declare your function correctly 
function functio_test(){ 
    // code here 
}

출처

2017-04-11 17:39:46 Cruiser

어떤 이유로 I 당신의 대답을 편집 할 수 없습니다. 귀하의 첫 번째 예제와 세미콜론 – CodingYourLife

네, 감사합니다 둥근 닫는 괄호가 누락되었습니다. 결정된. – Cruiser

당신이 모든 브래킷을 닫습니다 있는지 확인하십시오하여 addEventListener은 다음과 같이 호출해야

document.getElementById("myBtn").addEventListener("click", functio_test);

출처

2017-04-11 17:40:19 Hossam

이유는 DOM 이벤트 리스너 작동하지 않습니다를 만드는 jQuery를 자바 스크립트 라이브러리를 체크 아웃?

addEventListener()에 대한 호출이 닫히지 않았습니다.

document.getElementById("myBtn").addEventListener("click", functio_test;

이 문제를 해결하려면, 닫는 괄호를 추가

document.getElementById("myBtn").addEventListener("click", functio_test); 
//                 ^

아래의 예에서이 작업을 참조하십시오. 몇 가지 변경이 이루어졌다주의 사항 : function functio_test() 가능

이벤트 인수 : function functio_test(e)

이벤트 기본 동작 (버튼 클릭 제출 양식) 중지 : e.preventDefault()

지고 값

기능 키워드는 함수 이름 앞에 추가 id 요소가 아니라 id 요소가있는 첫 번째 입력과 만 관련이 있으므로 양식 요소 (id 요소가 아닌 첫 번째 입력 요소와 관련이 있으므로)에서 다음과 같이 입력합니다.
```
var x = document.forms[0].elements.type_test.value; 
```
<input> 태그는 허용 된 콘텐츠가 없으므로 empty elements이므로 태그 끝에 닫기 슬래시가 추가되었습니다.예를 들어
^{2 "ID입니다 글로벌 속성에 고유 한 식별자 (ID) 문서 전체에서 고유해야을 정의한다."때문에 번째 라디오 버튼의 ID 속성이 변경된 <input type="radio" id="type_test" name="type_test" value="ola" />
// ^}

또한

<input type="radio" id="type_test2" name="type_test" value="adeus" /> adeus <br>

이 코드 스 니펫 샌드 박스에서 <form> 및 <script> 태그 0으로 이동 될 것이다되지 않은 경우태그는 flow content이고 <head>에 대한 유일한 허용 내용은 "하나의 <head> 요소 다음에 하나의 <body> 요소가 있기 때문에 <html> 태그 아래의 태그입니다. ','_ '¹
또한 양식의 ID 속성은 텍스트가', ASCII 문자와 숫자를 제외한 사용하여 문자 형태을`때문에이 앞에 붙은 " '-'과 ''. HTML 4에서 허용되지 않았기 때문에 호환성 문제가 발생할 수 있습니다. HTML 5에서이 제한이 해제되었지만 ID는 호환성을 위해 문자로 시작해야합니다. "³

document.getElementById("myBtn").addEventListener("click", functio_test); 
 

 
function functio_test(e) { 
 
    e.preventDefault(); 
 
    var x = document.forms[0].elements.type_test.value; 
 
    if (x == "ola") { 
 
    alert("Ola José"); 
 
    } else if (x == "adeus") { 
 
    alert("Adeus José"); 
 
    } else 
 
    alert("Continua José"); 
 
}

<form id="form0" name="form_test" action="test_form.php" method="post"> 
 
    <input type="radio" id="type_test" name="type_test" value="ola" /> ola <br> 
 
    <input type="radio" id="type_test2" name="type_test" value="adeus" /> adeus <br> 
 
    <input type="submit" value="submit" /> //imput only use for POST method 
 
    <button id="myBtn">Try it</button> 
 
</form>

¹_{https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html)}

²_{https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id}

³_{https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id)}

출처

2017-04-11 18:22:28

자바 스크립트 HTML DOM 이벤트 리스너는

답변

관련 문제