자바 스크립트가 html을 수정하지 않는 이유는 무엇입니까?

입력란과 보내기 버튼 사이에 입력 된 텍스트를 삽입한다고 가정했지만 주목할만한 내용입니다.자바 스크립트가 html을 수정하지 않는 이유는 무엇입니까?

<body>              
    <section> 
     <p>passcode: <input type=text id=passcode></p> 
     <section id=middle></section> 
     <p><input type=button id=button value=send></p> 
    </section> 
    <script type="text/javascript"> 
     var log=new Array(); 
     document.getElementById("button").onclick=exlog(); 
     exlog(){ 
      log.push(document.getElementById("passcode").value) 
      for(i=0;i<log.length;i++){ 
      document.getElementById("middle").innerHtml=log[i]; 
     } 
    } 
    </script> 
</body>

출처

2012-09-08 user1656125

변경

 document.getElementById("middle").innerHtml=log[i];

참조

 document.getElementById("middle").innerHTML=log[i];

에 : https://developer.mozilla.org/en-US/docs/DOM/element.innerHTML

출처

2012-09-08 04:49:56

위대한 캐치. +1 –

당신은 훌륭합니다! :) – user1656125

exlog 함수에 function 키워드가 누락되어 있고 onclick 처리기를 잘못 설정하고 있습니다. 또한 innerHtml

당신은 이런 식을 사용하여 기능을 평가하고 innerHTML

document.getElementById("button").onclick=exlog; 
    function exlog(){ 
     log.push(document.getElementById("passcode").value) 
     for(i=0;i<log.length;i++){ 
     document.getElementById("middle").innerHTML=log[i]; 
    }

출처

2012-09-08 04:45:21 Musa

의 onclick에 어떤 문제가 있습니까 :

여기에 제안 된 모든 변경 사항과 해결책인가? – user1656125

@ user1656125 excl 함수를 onclick 속성에 할당하는 대신 호출했습니다. – Musa

해야한다 : exlog는 return 문을 가지고 있지 않기 때문에, exlog(), 그것은, undefined로 평가되는 브라우저는하지 않습니다 실행. 티무와 무사 언급 한 바와 같이 당신이 그것을 지정하려면

그냥 사용할 수는,

또한 이름 exlog의 함수 키워드는 또한 exlog

의 정의, innerHTML의 총액에서 누락 된 믹싱 케이스가 제대로 작동하지 않아야합니다.

<body>        
    <section> 
     <p>passcode: <input type=text id=passcode></p> 
     <section id=middle></section> 
     <p><input type=button id=button value=send></p> 
    </section> 
    <script type="text/javascript"> 
     var log = []; 
     document.getElementById("button").onclick = exlog; // <== no need to evaluate the function, just assign it. 
     function exlog(){ // <== as pointed out below function keyword was missing 
      log.push(document.getElementById("passcode").value); 
      document.getElementById("middle").innerHTML += log[log.length - 1]; // <== needs to be capitilized exactly like this 
     } 
    </script> 
</body>

출처

2012-09-08 04:45:51

고마워요! 나는 변화를 만들었고 효과가있다. 하지만 브라우저가 반환하지 않고도 함수를 실행하지 않는다는 의미는 얻지 못합니다. 여기서 수정 작업을 수행하는 것이 아닙니까? – user1656125

무슨 뜻입니까?'exlog()'와 같은 함수를 실행하면 암시 적 반환 값은 브라우저가 실행 방법을 모르는'undefined '입니다. –

반환 값이 정의되지 않았지만 함수가 실행된다는 것을 이해합니다. 이것은 오해입니다. 그리고 보내기를 클릭하면 이전에 보낸 내용을 대체합니다. 여러 항목을 연결하는 방법을 알고 계십니까? 정말 감사합니다. – user1656125

나는 코드에 문제가 몇났습니다. 가장 중요한 것은 innerHTML이 아니라 innerHTML을 사용해야한다는 것입니다 (대소 문자주의).

또한 함수를 다루는 방법에주의해야합니다. exlog() {}를두면 함수가 생성되지 않습니다. 대신 function 키워드를 사용해야합니다.

마지막으로 onclick 처리기를 exlog 함수로 설정하려고합니다. 당신이 사용하는 것은 실제로 excl 함수를 평가 한 결과로 onclick 핸들러를 설정할 것입니다.

<body>        
<section> 
    <p>passcode: <input type=text id=passcode></p> 
    <section id=middle></section> 
    <p><input type=button id=button value=send></p> 
</section> 
<script type="text/javascript"> 
    var log=new Array(); 
    document.getElementById("button").onclick=exlog; 
    function exlog(){ 
     log.push(document.getElementById("passcode").value) 
     for(i=0;i<log.length;i++){ 
alert(log[i]); 
     document.getElementById("middle").innerHTML=log[i]; 
    } 
} 
</script> 
</body>

출처

2012-09-08 04:53:59

'새로운 Array()'의 사용은 이제 나쁜 스타일로 간주됩니다. 대신'var log = [];'라고하는 것이 좋습니다. 특히 대부분의 사람들은 코드를 읽기가 쉽고'new Array (10)'구조의 결과는 놀라 울 수 있습니다. –

고마워, 잊어 버려. – user1656125

또한 html 요소의 속성 값을 따옴표로 묶어야합니다. – some

자바 스크립트가 html을 수정하지 않는 이유는 무엇입니까?

답변

관련 문제