Using "onclick" with variable "id" and getElementById (Javascript)

Question

function displayDate() {
      document.getElementById("date").innerHTML = Date();
    }

    <h3 onclick="displayDate()" id="date">Display Date</h3>
    <h3 onclick="displayDate()" id="date">Display Date</h3>
    <h3 onclick="displayDate()" id="date">Display Date</h3>
    <h3 onclick="displayDate()" id="date">Display Date</h3>
    <h3 onclick="displayDate()" id="date">Display Date</h3>
    <h3 onclick="displayDate()" id="date">Display Date</h3>
    <h3 onclick="displayDate()" id="date">Display Date</h3>
    <h3 onclick="displayDate()" id="date">Display Date</h3>

Here in this example when I click on any "Display Date" it shows the result in the first one in the column not in the one I clicked .. How can I get the result from everyone I click ?

The people down there already give you a solution, but you should strictly use an id only one time on a element, when you wanna declare more elements in a group, use classes. An ID is something you can identify as 1 item. — Endunry
– Endunry, Commented Oct 15, 2020 at 10:58

Derek Wang · Accepted Answer · 2020-10-15 10:51:15Z

1

This happens because you have set the same id date on all h3 tag items. So when getting the element by id document.getElementById('date'), the first element is selected.
You can get the selected element from event on the function and using that, you can set the value you want as follows.

function displayDate(event) {
  event.target.innerHTML = Date();
}

<h3 onclick="displayDate(event)" id="date">Display Date</h3>
<h3 onclick="displayDate(event)" id="date">Display Date</h3>
<h3 onclick="displayDate(event)" id="date">Display Date</h3>
<h3 onclick="displayDate(event)" id="date">Display Date</h3>
<h3 onclick="displayDate(event)" id="date">Display Date</h3>
<h3 onclick="displayDate(event)" id="date">Display Date</h3>
<h3 onclick="displayDate(event)" id="date">Display Date</h3>
<h3 onclick="displayDate(event)" id="date">Display Date</h3>

answered Oct 15, 2020 at 10:51

Derek Wang

10.2k4 gold badges20 silver badges40 bronze badges

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

Comments

S.Visser · Accepted Answer · 2020-10-15 10:54:15Z

IDs Are unique in HTML so don't duplicate them. But for your result you can just give this as anargument to your function.

this will contain the element you clicked on

Example:

function displayDate(elm) {
  elm.innerHTML = Date();
}

<h3 onclick="displayDate(this)">Display Date</h3>
<h3 onclick="displayDate(this)">Display Date</h3>
<h3 onclick="displayDate(this)">Display Date</h3>
<h3 onclick="displayDate(this)">Display Date</h3>
<h3 onclick="displayDate(this)">Display Date</h3>
<h3 onclick="displayDate(this)">Display Date</h3>
<h3 onclick="displayDate(this)">Display Date</h3>
<h3 onclick="displayDate(this)">Display Date</h3>
<h3 onclick="displayDate(this)">Display Date</h3>
<h3 onclick="displayDate(this)">Display Date</h3>

Chamsddine Bouzaine · Accepted Answer · 2020-10-15 10:55:00Z

i would suggest you do it like this it's way cleaner an give you a much more flexibility cause having a listener give you the advantage to not right the functions in the html attribute and you can try to add a parent div to your h3 tags and like that you can even remove the class if you don't use them for style and you can make the listener works only on the parent div so you can get rid of the if statment

function displayDate(target) {
     target.innerHTML = Date();
    }

document.addEventListener("click" , (event) => {
if(event.target.className === "date"){
displayDate(event.target)
}

})

<h3  class="date">Display Date</h3>
    <h3  class="date">Display Date</h3>
    <h3  class="date">Display Date</h3>
    <h3  class="date">Display Date</h3>
    <h3  class="date">Display Date</h3>
    <h3  class="date">Display Date</h3>
    <h3 class="date">Display Date</h3>
    <h3  class="date">Display Date</h3>

MikeT · Accepted Answer · 2020-10-15 10:55:53Z

0

document.getElementById has nothing to do with the event you are asking the document to return the element with the id date and as it assumes id's to be unique it stops after locating the first match

you need to ask the event which element triggered it this is done via the event args

function displayDate(args) {
}

then in the args the target is the element that raised the event so

args.target

is what you want

answered Oct 15, 2020 at 10:55

MikeT

5,5103 gold badges30 silver badges44 bronze badges

Collectives™ on Stack Overflow

Using "onclick" with variable "id" and getElementById (Javascript)

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related