0

I'm trying to make this script work addEventListener. If you click on the button you should get a random text from the array. However, I’m not a javascript king. Please help me.

 function GetValue()
      {
          var whys = new Array(
              "why 1",
              "why 2",
              "why 3"
              );
         var random = whys[Math.floor(Math.random() * whys.length)];
         var btn = document.getElementById("message");
         btn.addEventListener("click", GetValue, false);
      }
<span class="why_title" id="message">Ask Why!<br/>And Ask it Again<br/>And again</span>


<button class="why_btn" onclick="GetValue();">Ask Why Again!</button>
Donald Roos
  • 79
  • 7
  • 1
    Put `btn.addEventListener("click", GetValue, false);` and the definition of `btn`. outside of `GetValue`. You probably don’t want to bind a new event with every click. – Sebastian Simon Jun 17 '18 at 06:41

3 Answers3

1

First you have to define 'btn' variable outside the GetValue "Function" scope. And use EventListener from global scope so that you can invoke the function, when button got click.

var btn = document.getElementById("why_btn");

function GetValue()
{
  var whys = new Array(
      "why 1",
      "why 2",
      "why 3"
  );
    var random = whys[Math.floor(Math.random() * whys.length)];
    document.getElementById('message').innerHTML += '<br>' + random;
}

btn.addEventListener("click", GetValue);
<span class="why_title" id="message">Ask Why!<br/>And Ask it Again<br/>And again</span>
    <button id="why_btn">Ask Why Again!</button>
Muhammad Seerat Awan
  • 70
  • 7
0

I observe couple of thing need to modified in your JavaScript code :

  1. addEventListener - Binding with wrong element :

    <button class="why_btn" onclick="GetValue();">Ask Why Again!</button>

    click event already handle from JavaScript, So remove onclick attributes from button tag.

    Your JavaScript Code Snippet :

    var btn = document.getElementById("message");

    btn.addEventListener("click", GetValue, false);

  2. btn.addEventListener("click", GetValue, false); - declare outside the function

Solutions : 

function GetValue() {
     var whys = new Array(
         "why 1",
         "why 2",
         "why 3"
     );
     var random = whys[Math.floor(Math.random() * whys.length)];
     document.getElementById("message").innerHTML = random;
 }
 //var btn = document.getElementById("message");
 var btn = document.querySelector(".why_btn");
 btn.addEventListener("click", GetValue, false);
<span class="why_title" id="message">Ask Why!<br/>And Ask it Again<br/>And again</span>


<button class="why_btn">Ask Why Again!</button>

Hope it's helpful :)

A. N. SINHA
  • 106
  • 5
  • it is! It works perfect, only I have to add in the header and then the script isnt working anymore. Do you have a solution? – Donald Roos Jun 17 '18 at 12:19
-2

You are adding event listener to text, not button. 

 

    function GetValue()
          {
              var whys = new Array(
                  "why 1",
                  "why 2",
                  "why 3"
                  );
             var random = whys[Math.floor(Math.random() * whys.length)];
             alert(random);
             
          }
var btn = document.getElementById("message");
btn.addEventListener("click", GetValue, false);
<span class="why_title">Ask Why!<br/>And Ask it Again<br/>And again</span>


<button id="message" class="why_btn" onclick="GetValue();">Ask Why Again!</button>
Pavankumar Shukla
  • 413
  • 2
  • 9