Почему этот Javascript запускается только один раз на страницу?

Question

Почему этот Javascript запускается только один раз на страницу?

0

У меня есть этот раздел Try-it-Yourself на моем веб-сайте, но по какой-то причине, когда я хочу иметь более одного раздела Try-it-Yourself, он будет работать только для одного в верхней части страницы. Поэтому, если бы у меня было три из них на странице, то верхняя часть работала бы так, как я хочу, но следующие два ничего не сделали.

У меня есть следующий HTML:

<div class="tryit">
<table>
<tr>
  <td>Try It Yourself</td>
</tr>

<tr>
  <td><textarea id="input" rows="10" cols="47"></textarea></td>
</tr>

<tr>
  <td><input onclick="update();" type="button" value="Update"></td>
</tr>

<tr>
  <td><iframe id="output" name="output" width="600" height="300" ></iframe></td>
</tr>
</table>
</div>

И следующий Javascript:

function update()
{
   var tryitoutput = document.getElementById('input').value;
   window.frames['output'].document.documentElement.innerHTML = tryitoutput;
}

Спасибо.

JuniorDeveloper 15 апр. 2014, в 13:05

Источник

2

идентификаторы должны быть уникальными. Если вы добавляете один и тот же код, который вы опубликовали несколько раз, у вас есть несколько текстовых областей с id="input"
Michael Kunst 15 апр. 2014, в 11:03
0

Хорошо, это имеет смысл. Благодарю. Как мне тогда решить эту проблему, не используя каждый раз другой код JS для соответствия идентификаторам? Я предположил, что вы можете изменить его на class = "input", но это не сработало
JuniorDeveloper 15 апр. 2014, в 11:07

Теги:

javascript

html

html5

website

2 ответа

0

Это потому, что вы ссылаетесь на текстовое поле и вывод по id, что означает, что он всегда будет просто извлекать первый. Быстрое исправление будет иметь уникальный идентификатор для этих полей и отправить имена в качестве параметров для функции обновления, например update (inputId, outputId)

robingavin 15 апр. 2014, в 08:15

Ещё вопросы

идентификаторы должны быть уникальными. Если вы добавляете один и тот же код, который вы опубликовали несколько раз, у вас есть несколько текстовых областей с id="input"
Хорошо, это имеет смысл. Благодарю. Как мне тогда решить эту проблему, не используя каждый раз другой код JS для соответствия идентификаторам? Я предположил, что вы можете изменить его на class = "input", но это не сработало

N3m1s · Accepted Answer · 2014-04-15T10-16-00.000Z

Как уже упоминалось, это происходит потому, что не может быть более одного HTML-элемента с одинаковым значением атрибута ID. В вашем случае javascript обнаруживает только первый элемент, поэтому он не работает на более поздних кнопках обновления. Самый простой подход - установить разные значения атрибута ID для разных полей "Попробуйте сами":

Немного измените свой JS, см. Следующий пример jsFiddle.

function update(tryItIndex) {
    var tryItOutput = document.getElementById('input-' + tryItIndex).value;
    window.frames['output-' + tryItIndex].document.documentElement.innerHTML = tryItOutput;
}