CODEWITHSUNDEEP
javascripthtml
zag599
zag599

Reputation: 3

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

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 ?

Upvotes: 0

Views: 227

Answers (4)

MikeT
MikeT

Reputation: 5500

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

Upvotes: 0

Chamsddine Bouzaine
Chamsddine Bouzaine

Reputation: 1579

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>

Upvotes: 0

S.Visser
S.Visser

Reputation: 4725

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>

Upvotes: 0

Derek Wang
Derek Wang

Reputation: 10193

  • 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>

Upvotes: 1

Related Questions