У меня есть форма, в которой я хочу, чтобы пользователь мог вводить данные в текстовое поле, но затем я хочу, чтобы это вводилось в теги span в реальном времени, когда они вводят каждый символ.

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

Но я не могу заставить это работать, когда у меня есть несколько текстовых полей, которые я хочу обновить в реальном времени для нескольких тегов span. Например:

Я хочу, чтобы этот ввод обновлял в реальном времени следующий тег span:

<input type="text" class="inst_name">

<span class="nametag"></span>

И я хочу, чтобы этот ввод в реальном времени обновлял этот тег span:

<input type="text" class="keypair_name">

<span class="keyname"></span>

Но когда я это делаю, он работает с первым (inst_name для nametag), но когда я пробую его со вторым (keypair_name to keyname), он продолжает отображаться в моем html как undefined, где текст должен обновляться в реальном времени, но код на самом деле не вызывает никаких ошибок.

Ниже приведен код JavaScript, который я пробовал:

var inputKeyName = document.querySelector(".keypair_name"),
outputKeyName = document.querySelector(".keyname"),
inputInstName = document.querySelector(".inst_name"),
outputInstName = document.querySelector(".nametag");

function keydownHandler() {
    outputKeyName.innerHTML = inputKeyName.value;
}

function keydownHandlerInstName() {
    outputInstName.innerHTML = inputInstName.value;
}

inputKeyName.addEventListener("input", keydownHandler);
inputInstName.addEventListener("input", keydownHandlerInstName);

Любые идеи о том, как я могу заставить это работать, были бы очень признательны. Спасибо

0
Luke 23 Янв 2021 в 17:18

1 ответ

Лучший ответ

Итак, я обнаружил проблему. Ошибка новичка в использовании одного и того же имени дважды в моем html. Я использовал то же имя для имени класса «inst_name» для своего поля ввода, а также для div в другом месте моего кода, который, как я не осознавал, назван точно так же. Спасибо за комментарий и подтверждение, что это работает.

0
Luke 23 Янв 2021 в 14:51