-2

Im trying to figure out if i have several paragraphs, how can I when the specific object is clicked, make an alert on just that one.

For example, heres my code:

HTML

    <div id="myDiv">StackOverflow</div>
    <div id="myDiv">StackOverflow</div>

JS

document.getElementById("myDiv").onclick = function() { alert(this.innerHTML) };

What this code does, it that only the first element pops up.. I know I can do another function but im trying to do this with just one and have no idea.. I know that an ID is unique and should not be used more than once, but how can i do this if a div is created dynamically by a user and whenever they click on a specific div of it, the div should alert with a popup.

tryingsohard
  • 59
  • 1
  • 3
  • It's unclear what your question is. Are you asking how to make your code work even though it's invalid code that won't work? – Heretic Monkey Jun 10 '18 at 00:34
  • use the same class for all the divs then add the onclick on the divs that have this class then apply it to each of the elements added later.. see here: https://toddmotto.com/attaching-event-handlers-to-dynamically-created-javascript-elements/ – Michail Michailidis Jun 10 '18 at 00:36
  • For this question I think you may need to show the code that creates additional elements, that way we may be able to help you avoid creating invalid code (the duplicate id properties), and possibly how to appropriately bind/react to click events. – David Thomas Jun 10 '18 at 00:43
  • I forgot to mention: alternatively add the click handler on the preexisting parent of all those divs like it is described here:https://stackoverflow.com/questions/25387396/addeventlistener-to-not-exists-object-with-only-javascript – Michail Michailidis Jun 10 '18 at 00:45

3 Answers3

0

You need to loop over each element and individually add the event to the item.

When Items are added dynamically, you need to add the event to them as well.

// Add listeners to the already create elements
[...document.querySelectorAll('div')].forEach(el => {
  el.addEventListener('click', MyFunction)
})

let i = 10

// Dynamically create some elements
setInterval(() => {
  let el = document.createElement('div')
  el.textContent = 'StackOverflow ' + i++
  el.addEventListener('click', MyFunction)
  document.body.appendChild(el)
}, 2000)

function MyFunction() {
  console.log(this.innerHTML)
}
<div id="myDiv">StackOverflow 1</div>
<div id="myDiv">StackOverflow 2</div>
Get Off My Lawn
  • 34,175
  • 38
  • 176
  • 338
  • well this works for the prexeisting divs.. if more are added and this code runs again it will add multiple click handlers.. as described here ( https://stackoverflow.com/questions/25387396/addeventlistener-to-not-exists-object-with-only-javascript) a single event handler can be added to the preexisting parent of all those divs – Michail Michailidis Jun 10 '18 at 00:47
  • I personally disagree with the approach.. if you check the article in my comment one event handler would suffice for parent of all divs (e.g another div). this is why jquery used to have live() and deprecated it for on() which stops adding event handlers to each and every child. btw not fan of jquery at this point it is barely needed – Michail Michailidis Jun 10 '18 at 00:52
0

In 1 html page can not be identical id. I have a suggestion for you. It's work:

<div onclick="show__myDiv(this)">StackOverflow 1</div>
<div onclick="show__myDiv(this)">StackOverflow 2</div>
<script type="text/javascript">
    function show__myDiv(t){
        alert(t.innerHTML);
    }
</script>
Ly Thanh Ngo
  • 394
  • 1
  • 2
  • 15
-1

IDs must be unique. Change them to make unique.

mentallurg
  • 4,967
  • 5
  • 28
  • 36