按钮addEventListener不起作用

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(' '); 

    } 

    }); 

}); 

“你好”和“清管”出现，但“数组”没有。我在这里错过了什么？

Answer 1

该按钮的ID为pigBtn，但您尝试选择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'); 
    }); 
}); 

的ID在你querySelector有按钮的ID在你的HTML匹配。 https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Answer 3

您的pigIt函数从未执行。你在你的事件处理器中定义它，但你永远不会运行它。

我想你会为这样的事情：

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>