В Интернете я нашел пример кода javascript, который обновляет HTML на основе одного текстового поля.
Динамическое отображение входных значений с использованием Javascript
Эта страница ссылается на этот пример. https://jsbin.com/ugasi5/3/edit?html,js,output
В духе заставить его работать, прежде чем сделать его лучше.
Я попытался расширить его до нескольких полей, создав повторяющиеся переменные (с уникальными именами), он ничего не выводит. Также и это явно наивная попытка сделать более одного поля.
Итак, мой вопрос: что такое ненаивный способ расширить этот код для более чем одного (N) ввода?
HTML
<body>
<form>
<input type='text' id='nameField'>
</form>
<hr> Your name is <span id='nameDisplay'>??</span>
</body>
Javascript
window.onload = function() {
var nameField = document.getElementById('nameField');
var lastNameValue = undefined;
updateNameDisplay();
setInterval(updateNameDisplay, 100);
function updateNameDisplay() {
var thisValue = nameField.value || "??";
if (lastNameValue != thisValue) {
document.getElementById('nameDisplay').innerHTML = lastNameValue = thisValue;
}
}
};
Изменить в ответ на @heretic-monkey для контекста и нежелательного измеримого определения, написанного не нативной процедурой. Метод Navie для создания N входных данных будет иметь много дублирования кода, тогда как ненаивный метод, вероятно, будет использовать шаблоны циклов и иметь меньше дублирования кода. чем ненаивный метод. Например.
В псевдонаивной процедуре:
create input 1
create input 2
create input 3
...
create input N
create output 1
create output 2
create output 3
...
create output N
В псевдо ненаивной процедуре:
someLoopPattern
create N inputs
someLoopPattern
create N outputs
