ボタン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の要素を選択しようとしています。

代わりにこれを試してください：あなたのquerySelectorで

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は、あなたのHTML内のボタンのIDと一致する必要があります。 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>