HTML - Как мне присвоить текстовое значение значению другого атрибута?
Я пытаюсь присвоить значение атрибута HTML text значению атрибута hidden.
Код text:
<input type = "text" name = "number" id = "number" maxlength = "4" onBlur = "myno=this.value; concatno=myno.concat('0001')" />
Я использовал alert, чтобы попробовать вывод значения concatno. Например, если пользователь вводит 1010, то на выходе будет 10100001.
Тогда мой код hidden:
<input type = "hidden" id = "hide" name = "hide" value=concatno>
Я хочу, чтобы мое значение hidden было 1010001, но вместо этого значение стало "concatno". Как мне присвоить значение в моем атрибуте hidden?
Для этого вам нужен Javascript, вы не можете просто волшебным образом ссылаться на вещи и ожидать, что они будут работать.
@Jimbot на самом деле всего 2 строки кода, я просто тестирую
@hatched хорошо, все было в размытом состоянии, я не понял сначала.
Ответы 3
Проблема здесь в том, что вы никогда не обновляли свой элемент #hide.
Вам нужно использовать какой-нибудь javascript, например:
document.getElementById('hide').value = concatno;
Рабочий фрагмент:
<input type = "text" name = "number" id = "number" maxlength = "4" onkeyup = "var myno = this.value; var concatno = myno.concat('0001'); document.getElementById('hide').value=concatno;" />
<input id = "hide" name = "hide" value=concatno disabled>Обратите внимание, что даже если проблема здесь не в событии, я предлагаю вам использовать другой триггер, например onkeyup, чтобы значение обновлялось чаще.
Я также изменил ваш элемент hidden на disabled, чтобы сделать его визуальным.
Более того, вам следует научиться избегать встроенного JavaScript. Вот как я это сделаю:
document.getElementById('number').addEventListener("keyup", function() {
document.getElementById('hide').value = this.value.concat('0001');
});<input type = "text" name = "number" id = "number" maxlength = "4" />
<input id = "hide" name = "hide" value=concatno disabled>Документация: getElementById
Надеюсь, поможет.
Я удалил DV, но стоит отметить, что проблема возникла не из-за события.
@BenM Я согласен, но мне показалось, что клавиатура здесь более эффективна.
я не уверен, почему, но мое значение становится "concatno"
@hatched, не могу сказать. Вы пробовали оба моих фрагмента?
Проблема в том, что вы никогда не обновляете значение своего элемента #hide. Вам нужно установить его значение внутри привязки вашего события (только что сделал ввод видимым для справки):
<input type = "text" name = "number" id = "number" maxlength = "4" onblur = "var myno = this.value; var concatno=myno.concat('0001'); document.getElementById('hide').value = concatno; console.info(concatno)" />
<input type = "text" id = "hide" name = "hide" value=concatno disabled />Также стоит отметить, что вам обычно следует избегать использования навязчивых обработчиков событий. Вместо этого делегируйте обработку событий внешнему Javascript. Таким образом, вашему дизайнеру не нужно разбираться в JS или даже беспокоиться о нем.
Вот пример использования ненавязчивых обработчиков:
document.getElementById('number').addEventListener('blur', function() {
document.getElementById('hide').value = this.value.concat('0001');
});<input type = "text" name = "number" id = "number" maxlength = "4" />
<input type = "text" id = "hide" name = "hide" placeholder = "concatno" disabled />Попробуйте вместо этого использовать имя / идентификатор;
<input type = "text" name = "number" id = "number" maxlength = "4" oninput='hide.value=(this.value + "0001")' autofocus=''/>
<input type = "hidden" id = "hide" name = "hide" />без встроенных скриптов:
document.addEventListener('DOMContentLoaded', function() {
let hide = document.querySelector('#hide');
document.querySelector('#number').addEventListener('input', function() {
hide.value = this.value + '0001';
});
});<input type = "text" name = "number" id = "number" maxlength = "4" autofocus='' />
<input type = "hidden" id = "hide" name = "hide" />
Без полного кода будет сложно :(