CODEWITHSUNDEEP
javascripthtml
stackoverflow overflow
stackoverflow overflow

Reputation: 147

Submit button to call function

My submit button is not doing anything when I click on it. I believe my event listener is correctly established. Any ideas on why it wont do anything?

JS FILE

 document.getElementById("submitbutton").addEventListener("click", saveNames());
function saveNames() {
    var player1name = document.getElementById("player1").value;
    var player2name = document.getElementById("player2").value;
    var player3name = document.getElementById("player3").value;
    var player4name = document.getElementById("player4").value;
    var player5name = document.getElementById("player5").value;
    savePlayer(player1name);
    savePlayer(player2name);
    savePlayer(player3name);
    savePlayer(player4name);
    savePlayer(player5name);
    gameScreen(2);
  }

HTML FILE:

<input type="text"name="p1"><br>
<input type="text"name="p2"><br>
<input type="text"name="p3"><br>
<input type="text"name="p4"><br>
<input type="text"name="p5"><br>
<input id="submitbutton"type="submit" value="Submit">;

Upvotes: 0

Views: 87

Answers (3)

Tom O.
Tom O.

Reputation: 5941

//Remove the parenthese after "saveNames" - leaving them will call saveNames when it is encountered
document.getElementById("submitbutton").addEventListener("click", saveNames);

function saveNames() {
  //Use an array as it's neater
  var players = [
    document.getElementById("player1").value,
    document.getElementById("player2").value,
    document.getElementById("player3").value,
    document.getElementById("player4").value,
    document.getElementById("player5").value
  ]

  //loop and save
  players.forEach(function(name) {
    if (name) {
      savePlayer(name);
    }
  });

  //gameScreen(2);
}

function savePlayer(name) {
  console.log(`${name} saved.`);
}
<input id="player1" type="text" name="p1"><br>
<input id="player2" type="text" name="p2"><br>
<input id="player3" type="text" name="p3"><br>
<input id="player4" type="text" name="p4"><br>
<input id="player5" type="text" name="p5"><br>
<input id="submitbutton" type="button" value="Submit">

Upvotes: 0

Gaurav
Gaurav

Reputation: 623

  1. add the listener like this - 

    document.getElementById("submitbutton").addEventListener("click", saveNames);

note , I have removed () at end.

  1. Use Id instead of name. you are reading these elements with id then you need to specify that.

  2. Give a spaces before name or type.

Upvotes: 0

David
David

Reputation: 218828

You're not binding to the function, you're binding to the result of the function. Just pass the function itself, don't invoke it. (Get rid of the parentheses):

document.getElementById("submitbutton").addEventListener("click", saveNames);

Why?

Because when that one line of code above executes, if you have the errant parentheses then the first thing it does is execute the saveNames function in order to get the result to pass to the addEventListener function. And that result is undefined because saveNames doesn't return anything.

Presumably also that first invocation of the saveNames function doesn't visibly do anything (though it does execute) because the inputs have no values in them yet at that time.

Consider as a contrived example:

doSomething( doSomethingElse() )

This would execute doSomethingElse() and then pass its returned result to doSomething(). The same is true when adding event listeners, you're just calling a function like any other function.

Upvotes: 2

Related Questions