How do I store the id number from getElementById in a variable and then use it in an onClick event?

Question

I am trying to cut some code from my esp8266 script by using a function to change the href address in the browser when a button is clicked. I want the id number to be stored in the variable so that I can reuse it to set the pin number if that particular button id is clicked.

function myFunction() {
  console.log("button was clicked");
  var x = document.getElementById(Element.id);
  console.log(x);

  document.getElementById(x).setAttribute("onClick",
      "javascript:window.location.href='/toggle?pin_number='" + x);
}

<button class="button" id="4" onClick="myFunction()">TOGGLE D4</button><br>
<button class="button" id="5" onClick="javascript:window.location.href='/toggle?pin_number=5'">TOGGLE D5</button><br>
<button class="button" id="6" onClick="javascript:window.location.href='/toggle?pin_number=6'">TOGGLE D6</button><br>

the console.log(x) returns null.

I don't know whether this is the best way to do it or not because I'm new to javascript.

Pass the element to your function, ie `onclick="myFunction(this)"` — Phil, Sep 03 '18 at 01:02

score 1 · Answer 1 · answered Sep 03 '18 at 01:29

1

Thanks guys. I got it now.

function myFunction(x) {
console.log(x.id);
window.location.href='/toggle?pin_number=' + x.id;
}

tested and working :)

answered Sep 03 '18 at 01:29

JasonL

13
2

It'd be nice if you accepted someone's answer; it's nice that you post your solution but what you posted was given to you in the answers. – RobIII Sep 03 '18 at 09:40
@RobIII how do I accept an answer? I clicked on the up arrow next to your post to say it was useful. Im new here, there was no need to be rude about it. I said thanks..... – JasonL Sep 04 '18 at 03:11
I don't see where I was rude? And if I was it sure wasn't intended to be. You can click the checkmark to accept an answer. Read more about it [here](https://stackoverflow.com/help/someone-answers) – RobIII Sep 04 '18 at 10:04

RobIII · Accepted Answer · 2018-09-03T01:18:37.063

You need to pass the element to your function.

<button class="button" id="4" onClick="myFunction(this)">TOGGLE D4</button>

Then, in the function, accept an argument (let's call it e in this case) which accepts the element.

function myFunction(e) {
  console.log("button was clicked");
  console.log(e);
}

Now, if you want to get at the elements id that was clicked, simply access the id property like:

console.log(e.id);

On another note, HTML5 isn't that strict anymore but HTML4 used to have these rules for an id:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

It's a good idea to stick with these rules.

It's even better to use the value attribute:

<button class="button" value="4" onClick="myFunction(this)">TOGGLE D4</button>

And then use e.value:

function myFunction(e) {
  console.log("button was clicked:", e.value);
}

Emeeus · Answer 3 · 2018-09-03T01:47:51.260

0

You don't need to duplicate code, here a short code to do what you want:

document.querySelectorAll('.button').forEach(function(b) {//<-- iterates the buttons

  b.addEventListener("click", function(t) {//<-- adds event listener
  
    console.log(t.target.id)//<-- we get the data
    
  })
  
});

<button class="button" id="4">TOGGLE D4</button><br>
<button class="button" id="5">TOGGLE D5</button><br>
<button class="button" id="6">TOGGLE D6</button><br>

We add an event listener to every button, then we get the id using event.target.id

edited Sep 03 '18 at 01:47

answered Sep 03 '18 at 01:34

Emeeus

5,072
2
25
37

Thanks, Emeeus. A little harder to understand but I think I got it. I will go do some more reading. – JasonL Sep 03 '18 at 01:45
@JasonL I've added an extra explanation, by the way it would not be better if you use ajax? because the goal is to send this to the esp rigth? – Emeeus Sep 03 '18 at 01:51
this is running on the esp. Its just a basic webpage that i log into that has buttons to turn the pins on and off. – JasonL Sep 03 '18 at 01:56
the goal was to pretty up the interface a little while keeping the code small and learning some new things. I've achieved all three today :D – JasonL Sep 03 '18 at 02:08
@JasonL to save memory see this https://stackoverflow.com/questions/8578617/inject-a-script-tag-with-remote-src-and-wait-for-it-to-execute you could store the code remotely, not in the esp – Emeeus Sep 03 '18 at 02:16

How do I store the id number from getElementById in a variable and then use it in an onClick event?

3 Answers3