The essence of the task: according to the number entered by the user, the appropriate number of routes is displayed in the form of a route taxi number (defined value), a description of this route (for example, starting and ending stops) and at the end a button (has no events). I tried to implement it by hovering the mouse over the word "n route:", so that the corresponding data would appear in text forms, but unfortunately, the value by id is not assigned to the variable. Please explain what is the error and how to eliminate it?

document.addEventListener('DOMContentLoaded', () => { document.forms.z.addEventListener('submit', zFormSubmit); }); function zFormSubmit(e) { var value = e.value; e.preventDefault(); for (let el of this.querySelectorAll('.str-label')) el.remove(); for ( var strHtml = '<label class="str-label" >№ Описание</label>', i = 0; i < +this.count.value; i++){ strHtml += ` <label class="str-label" id="slabel" value = "${i}"> ${i+1} маршрут : <input name="marsh${i}" id="marsh${i}" type="text" value="${i}" onmousemove="marshChange(this)"> <input name="marsh${i}" id="marsh${i}" type="text" value="${i}" onmousemove="marshChangeOpisan(marshChange(this))"> </label> `; if(i == Number(this.count.value)-1){ strHtml += `<button type="submit" name="create">Cохранить</button>`; } } this.insertAdjacentHTML('beforeend', strHtml); } function marshChange(el) { var znachenie = document.getElementById(el).value; switch(znachenie) { case "0": return document.getElementById(el).value = 215; default:return document.getElementById(el).value = '№ маршрута неопределён'; } } function marshChangeOpisan(el) { var value = document.getElementById(el).value; switch(value) { case 215: return document.getElementById(el).value = 'Ул Валади 42, 30 Сидней'; default:return document.getElementById(el).value = '№ маршрута неопределён'; } } 
 body, input, button { font: 16px sans-serif; } #z { width: 400px; margin: 0 auto; padding: 8px 16px; text-align: center; box-shadow: 0 3px 9px 0 #0002; } #str-count { width: 40px; } .str-label { display: block; margin: 0 24px; line-height: 1.5em; text-align: left; } .str-label:hover { color: #070; cursor: pointer; } 
 <form id="z" name="z"> <label>введите количество маршрутов:</label> <!--<input id="cb-count" name="count" type="number" min="1" max="20" placeholder="1..20" required>--> <input type="text" id="str-count" placeholder="1..20" name="count" required/> <button type="submit" name="create">Создать</button> </form>

    1 answer 1

    You pass an element to the function - onmousemove="marshChange(this)" , and in the code you think that it is id :

     function marshChange(el) { // var znachenie = document.getElementById(el).value; - неправильно var znachenie = el.value; ...

    But the logic of actions in this function still eludes me :).