многократные вызовы со значением javascript

Question

Мой вопрос довольно прост, возможно, я просто устал и не могу его найти, и для этого приношу свои извинения. Я искал правильную формулировку, чтобы объяснить это тоже, поэтому, пожалуйста, со мной.

в моем заголовке меня

function addusr() { 
     document.getElementById("usrout").innerHTML = document.getElementById("usrin").value;} 

и в моем тексте я имею

code-bla bla bla<span id="usrout"></span> bla!! It works! 

но если я пытаюсь не вызвать <span id="usrout"></span> снова на той же странице, в другом месте, ни один из других появляются.

Пример: появляется

text <span id="usrout"></span> more text, code... another <span id="usrout"></span>... 
... 
.. 
... 
another <span id="usrout"></span> ... 

Только первый один, почему это? Как я могу это исправить?

Answer 1

Идентификатор должен быть уникальным. Вместо этого вы можете рассмотреть классы.

Когда вы назначаете классы для HTML элементов, код JavaScript может выглядеть следующим образом:

function addusr() { 
    var usrin = document.getElementById("usrin").value, 
     usrout = document.getElementsByClassName("usrout"); 
    Array.prototype.forEach.call(usrout, function (el) { 
     el.innerHTML = usrin; 
    }); 
} 

Объяснение:

Вместо getElementById мы используем getElementsByClassName, который возвращает массив элементов, имеющих это конкретное имя класса. Таким образом, цикл должен быть установлен для свойства innerHTML каждого извлеченного элемента.

Answer 2

Прежде всего, используя одинаковые ID более чем в одном элементе - WRONG и против RFC.

Вы должны сделать его CLASS, а не ID, а потом ...

document.querySelector(".usrout").innerHTML = ... 

Answer 3

Каждый элемент необходим уникальный идентификатор.

Например

<span id="usrout1"></span> 
<span id="usrout2"></span> 

В качестве альтернативы, вы можете использовать классы, как уже упоминалось

<span class="green"></span> 
<span class="green"></span> 

Затем используйте селектор CSS, такие как document.getElementByClass

Answer 4

Элемент идентификаторы должны быть уникальными, так getElementById только вернет (не более) один элемент.

Чтобы получить все применимые элементы, вам нужно использовать другой поиск, возможно querySelectorAll. Затем вы можете пропустить их и задать необходимый комментарий.

Например:

function addusr() { 
 
    var inputValue = document.getElementById("usrin").value; 
 

 
    var outputs = document.querySelectorAll("span.usrout"); 
 
    for (var i = 0; i < outputs.length; ++i) { 
 
    outputs[i].textContent = inputValue; 
 
    } 
 
}

<input id="usrin" type="text" /> 
 
<button type="button" onclick="addusr();">Update</button> 
 

 
<span class="usrout"></span> 
 
<span class="usrout"></span> 
 
<span class="usrout"></span> 
 
<span class="usrout"></span> 
 
<span class="usrout"></span> 
 
<span class="usrout"></span>