Submit button to call function

Question

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

What does saveNames() return? You probably just want saveNames (no parentheses). But we also don't know what that function does at all, or if it even exists. — David
– David, Commented Dec 7, 2018 at 22:48
<input id="submitbutton" type="submit" value="Submit">; space — onetwo12
– onetwo12, Commented Dec 7, 2018 at 22:48

David · Accepted Answer · 2018-12-07 22:54:16Z

2

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.

answered Dec 7, 2018 at 22:54

David

221k42 gold badges246 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

stackoverflow overflow Over a year ago

I've added this, the submit button still does not do anything when clicked.

David Over a year ago

@stackoverflowoverflow: Then perhaps it's time to debug. Check your browser's development console. Are there any errors? Using your browser's debugger, place a breakpoint on the line which adds the event listener. Does it find the element to add the event handler to? Place a breakpoint in the function. Does it execute? What happens?

David Over a year ago

@stackoverflowoverflow: Wait... getElementById("player1")... Do you have any elements with that id? You don't in the HTML you're showing. So I guess when you say that the button "does not do anything" what specifically are you expecting it to do and why?

stackoverflow overflow Over a year ago

That part you are right about, I was getting the wrong ID when saving names and I've fixed that now. However, I'm expecting the submit button to save all player names and then change screens. But still as of now clicking it does nothing, no errors in console

David Over a year ago

@stackoverflowoverflow: "I'm expecting the submit button to save all player names and then change screens" - Start smaller. Because none of the functions you're calling are present in the code you're showing. So don't assume the problem is in just the code you're showing. Again, it's time to debug. What you should be expecting is for the saveNames function to be invoked at all. That's it. Place a breakpoint in that function and see if it's invoked. If it is then this code works and your other problem is somewhere else and unrelated to this question.

|

Gaurav · Accepted Answer · 2018-12-07 23:20:28Z

0

add the listener like this -

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

note , I have removed () at end.

Use Id instead of name. you are reading these elements with id then you need to specify that.
Give a spaces before name or type.

edited Dec 7, 2018 at 23:20

answered Dec 7, 2018 at 22:53

Gaurav

6236 silver badges11 bronze badges

2 Comments

Gaurav Over a year ago

use id instead of name. You use referring these elements by ID so you need to specify it . second give space before id and same thing is before type in button. <input type="text" id='p1'><br> <input type="text" id="p2"><br> <input type="text" id="p3"><br> <input type="text" id="p4"><br> <input type="text" id="p5"><br> <input id="submitbutton" type="submit" value="Submit">

stackoverflow overflow Over a year ago

Nothing, nothing even comes up in console. Not sure what else to do

Tom O. · Accepted Answer · 2018-12-08 00:09:53Z

0

//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">

answered Dec 8, 2018 at 0:09

Tom O.

5,9813 gold badges24 silver badges36 bronze badges

1 Comment

stackoverflow overflow Over a year ago

Hi Tommy, I'm still having no luck here. As I mentioned before, This html is being inserted into the page via innerHTML. I'm wondering if the event listener is not working because it's trying to set it before the DOM has inserted the data, but I believe it would try to throw an error and I'm not getting any. This is just confusing because I clearly see your code works.

Collectives™ on Stack Overflow

Submit button to call function

3 Answers 3

7 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related