Суть задачи: по числу, введённое пользователем, выводится соответсвующе число маршрутов в виде № маршрутного такси(значение опеределённое), описание данного маршрута (например начальная и конечная остановки) и в конце кнопка(событий не имеет). Попробовал реализовать через наведение курсора мыши на слово "n маршрут:", что бы потом соответсвующие данные в текстовых формах появлялись, но к сожалению, перменной не присваивается значение по id. Объясните пожалуйста в чём ошибка и как eё устранить?
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>