Using the Same JavaScript for Repeated HTML

Question

I am supposed to have the same HTML code segment repeated multiple times on the same page. I have an external JavaScript file whose functionality is meant to be invoked whenever a user interacts with one of the repeated segments. However, only the first of the three code segments is impacted upon interaction. When interacting with the other two, nothing happens, meaning, the JavaScript does not get invoked.

I would assume that if all HTML code segments have the same IDs and classes (aside from the fact that unique IDs should be assigned), then at the least the content in all 3 HTML segments would change if changes are made in any of the other instances of these segments.

Here is an example of this issue:

<input id="my-id" type="text" />
<input id="my-id" type="text" />
<input id="my-id" type="text" />

<script>
    var textbox = document.getElementById("my-id");
    textbox.onkeyup = function() {
     alert("ok");
    }
</script>

Here, only interaction with the first instance of my-id creates the alert box, the other 2, don't. How can I make my code so that it applies to all 3 textboxes?

Ids have to be unique, see: [Can multiple different HTML elements have the same ID if they're different elements?](https://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-eleme). beside that `getElementById` returns only one element. Take a look at [Adding event listeners to multiple elements](https://stackoverflow.com/questions/13915702/adding-event-listeners-to-multiple-elements) — t.niese, Aug 03 '17 at 04:32
Possible duplicate of [Adding event listeners to multiple elements](https://stackoverflow.com/questions/13915702/adding-event-listeners-to-multiple-elements) — t.niese, Aug 03 '17 at 04:51

Dij · Accepted Answer · 2017-08-03T04:35:18.223

you should not use same id for multiple elements. The selector will return only first matched element in case of multiple elements with same id. It would be better if you use class instead of id. something like this will work:

<input class="my-id" type="text" />
<input class="my-id" type="text" />
<input class="my-id" type="text" />

<script>
var textboxes = document.getElementsByClassName("my-id");
for (var i = 0; i < textboxes.length; i++) {
   textboxes[i].onkeyup = function(){
    alert("ok");
   };
}
</script>

score 1 · Answer 2 · answered Aug 03 '17 at 04:29

1

You cannot have same id to all div's, ID's should be unique. Please change the ID to class in order to work.

answered Aug 03 '17 at 04:29

Saravanan I

1,229
6
9

score 1 · Answer 3 · answered Aug 03 '17 at 04:29

Calling Javascript functions on a specific ID when there are multiple instances of the ID (which is a big no-no) will only work on the first instance in the DOM. Try calling your function on either the inputs or assign a class to each input and call it on the class.

score 1 · Answer 4 · answered Aug 03 '17 at 04:31

1

You cannot use ID names in multiple times.. Change ID to CLASS.. It will work....

answered Aug 03 '17 at 04:31

Abijith Ajayan

238
3
17

score 1 · Answer 5 · answered Aug 03 '17 at 04:33

1

ID's must be unique!

In order to use the same javacsript functions for multiple div, assign a common class for all the divs and invoke the js function for the class!

answered Aug 03 '17 at 04:33

Keerthana Prabhakaran

3,766
1
13
23

t.niese · Answer 6 · 2017-08-03T04:44:17.447

Ids have to be unique, see: Can multiple different HTML elements have the same ID if they're different elements?. beside that getElementById returns only one element. Take a look at Adding event listeners to multiple elements

var textboxes = document.getElementsByClassName("my-class");

function keyUpListener() {
  console.log("ok");
}

for (var i = 0; i < textboxes.length; i++) {
  textboxes[i].addEventListener('keyup', keyUpListener, false);
}

<input class="my-class" type="text" />
<input class="my-class" type="text" />
<input class="my-class" type="text" />

Or use event delegation:

function keyUpListener(event) {
  if( event.target.getAttribute('class').split(' ').indexOf('my-class') !== -1 ) {
    console.log( 'ok' );
  }
}

document.addEventListener('keyup', keyUpListener, false);

<input class="my-class" type="text" />
<input class="my-class" type="text" />
<input class="my-class" type="text" />

score 0 · Answer 7 · answered Aug 03 '17 at 05:25

Because element ID must be unique, this attribute cannot be utilized to bind click event.
HTML5 support CSS Selector, a powerful mechanism to identify element that has similar characteristic.
Your code can be re-written with CSS Selector like below:

<input type="text" data-item="Text box 1"/>
<input type="text" data-item="Text box 2"/>
<input type="text" data-item="Text box 3"/>

<script>
    function keyUpListener() {
        var itemId = this.getAttribute('data-item');
        alert(itemId);
    }

    var textboxes = document.querySelectorAll('input');
    for (var i = 0; i < textboxes.length; i++) {
        textboxes[i].addEventListener('keydown', keyUpListener, false);
    }
</script>

Using the Same JavaScript for Repeated HTML

7 Answers7