按钮 addEventListener 不 function

Question

我在让按钮工作时遇到问题。 单击此按钮时，我希望发生一些事情：

<button id="pigBtn" value="click">Pig It!</button> 

我的 JS 文件有

window.addEventListener('load', function(){
    console.log('hello'); 
    let pigBtn = document.querySelector('#pigBtn'); 
    console.log('pigged'); 
    pigBtn.addEventListener('click', function (){

    function pigIt(phrase) {
        let array = phrase.split(' '); 
        console.log('array'); 

        for (let i = 0; i < phrase.length; i++) {
            let pig = array[i].split(''); 
            let one = pig.shift(); 
            pig.push(one); 
            pig.push('ay'); 
            let two = pig.join(''); 

            array[i] = two; 
    }
        return array.join(' '); 

    }

  }); 

}); 

'hello' 和 'pigged' 出现，但 'array' 没有出现。 我在这里错过了什么？

Answer 1

该按钮的 ID pigBtn ，但您尝试 select 一个 id 为pigged的元素。

试试这个：

let pigBtn = document.querySelector('#pigBtn');

 window.addEventListener('load', function(){ console.log('hello'); let pigBtn = document.querySelector('#pigBtn'); console.log('pigged'); pigBtn.addEventListener('click', function (){ console.log('clicked'); }); });

 <button id="pigBtn" value="click">Pig It!</button>

Answer 2

window.addEventListener('load', function(){
  console.log('hello'); 
  let pigBtn = document.querySelector('#pigBtn'); 
  console.log('pigged');

  pigBtn.addEventListener('click', function (){
    console.log('clicked'); 
  }); 
});

querySelector 中的 ID 必须与 HTML 中按钮的 ID 相匹配。https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Answer 3

你的pigIt function 永远不会被执行。 您在事件处理程序中定义它，但您从不运行它。

我想你会做这样的事情：

 window.addEventListener('load', function(){ var sentence = "This is the phrase I'm pigging"; console.log('hello'); let pigBtn = document.getElementById('pigBtn'); let pigTxt = document.getElementById('phraseTxt'); let pigPhraseTxt = document.getElementById('pigPhraseTxt'); console.log('pigged'); pigBtn.addEventListener('click', function(e) { let array = pigTxt.value.split(' '); for (let i = 0; i < array.length; i++) { let pig = array[i].split(''); let one = pig.shift(); pig.push(one); pig.push('ay'); let two = pig.join(''); array[i] = two; } pigPhraseTxt.value = array.join(' '); }); });

 input { display: block; width: 100%; padding: 0; border: 1px solid #aaa; } input:read-only { background: #ddd; }

 <input type="text" id="phraseTxt" value="This is the text I'm converting to Pig Latin" /> <input type="text" id="pigPhraseTxt" readonly /> <button id="pigBtn" value="click">Pig It!</button>