Javascript 按钮addEventListener不起作用

我在使用按钮时遇到问题。我希望在单击此按钮时发生一些事情：

<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”没有出现。我在这里遗漏了什么？

按钮具有id pigBtn，但您尝试选择id为pigged的元素

请尝试以下方法：

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

window.addEventListener'load'，函数{ console.log'hello'； 让pigBtn=document.querySelector'pigBtn'； 控制台。日志“清管”； pigBtn.addEventListener“单击”函数{ console.log“单击”； }; }; 猪！ querySelector中的ID必须与HTML中按钮的ID匹配。

您的pigIt函数从未执行过。您在事件处理程序中定义了它，但从未运行过它

我想你会喜欢这样的东西：

window.addEventListener'load'，函数{ var句子=这是我正在清管的短语； console.log'hello'； 让pigBtn=document.getElementById'pigBtn'； 让pigTxt=document.getElementById'phraseTxt'； 让pigprasetxt=document.getElementById'pigprasetxt'； 控制台。日志“清管”； pigBtn.addEventListener“单击”，函数E{ 让数组=pigTxt.value.split“”； 对于let i=0；i猪！id=pigBtn vs querySelector'pigged'更改let pigBtn=document.querySelector'pigged'；让pigBtn=document.querySelector'pigBtn'；使用getElementById而不是querySelector查找id。。。速度快得多。你的代码有很多地方出错。对于初学者来说，pigIt函数永远不会执行，因为它只定义了。。。永远不要跑。查看如何修复代码！非常感谢。这很有帮助。现在我只需要能够输入一个文本，然后单击按钮将短语转换为pig拉丁语。@BenC.：我修改了代码以符合该用例：-

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

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