如何在按钮数组上设置 addEventListener

Question

I have the following code. I displayed each of the elements of eleEQ1 as buttons. However when I try to set the onClick event I am facing problem. I added the addEventListener, but still it shows Uncaught TypeError: Cannot read property 'addEventListener' of null . Please help me out guys.

var eleEQ1 = ["John", "ate", "an", "apple", "before", "afternoon"];
function printBtn() {
    var a = 1;
    if (a == 1){
      shuffle(eleEQ1);
      var x = eleEQ1.toString();

      for (var i = 0; i < eleEQ1.length; i++) {
         var btn = document.createElement("button");
         var t = document.createTextNode(eleEQ1[i]);
         btn.appendChild(t);
         btn.id=(t);
         document.body.appendChild(btn);
      }
    var x = document.getElementById(eleEQ1[0]);
    x.addEventListener("click", function(){document.getElementById("demo2").innerHTML = "Formed Sentence (after selecting words):\n"+"John"});
    }

Answer 1

 function shuffle(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } return array; } function test(prefix, id) { //console.log("prefix="+prefix+", id="+id); if(prefix=="given") { document.getElementById("order").append(createButton("order",id)); } else { if(document.getElementById(prefix+id)) document.getElementById(prefix+id).remove(); } document.getElementById("result").innerText= document.getElementById("order").innerText==eleEQ1.join("") ?"Correct!" :"Keep trying" ; } function createButton(prefix, id) { var btn=document.getElementById(prefix+id); if(btn) return btn; btn=document.createElement("button"); btn.id=prefix+id; btn.innerText=id; btn.setAttribute("onclick","test('"+prefix+"', '"+id+"')"); return btn; } var eleEQ1 = ["John", "ate", "an", "apple", "before", "afternoon"]; var given = eleEQ1.slice(); shuffle(given); given.forEach(item=>document.getElementById("given").append(createButton("given",item)));

 <p> <span>Put the words in order</span> </p> <p> <span>Click buttons in "Given" to add to "Order"</span><br> <span>Click buttons in "Order" to remove from "Order"</span> </p> <p> <span>Given: </span> <span id="given"></span> </p> <p> <span>Order: </span> <span id="order"></span> </p> <p> <span>Result: </span> <span id="result"></span> </p>