CODEWITHSUNDEEP
javascriptarrays
Anubhab Das
Anubhab Das

Reputation: 11

How to set addEventListener on an array of buttons

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"});
    }

Upvotes: 1

Views: 802

Answers (1)

iAmOren
iAmOren

Reputation: 2804

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>

Upvotes: 1

Related Questions