Суть задачи: по числу, введённое пользователем, выводится соответсвующе число маршрутов в виде № маршрутного такси(значение опеределённое), описание данного маршрута (например начальная и конечная остановки) и в конце кнопка(событий не имеет). Попробовал реализовать через наведение курсора мыши на слово "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>
Вы передаете в функцию элемент - onmousemove="marshChange(this)"
, а в коде думаете, что это id
:
function marshChange(el) {
// var znachenie = document.getElementById(el).value; - неправильно
var znachenie = el.value;
...
Но логика действий в этой функции от меня все равно ускользает :).
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Всем приветКодил я на Python, хотел всегда освоить дальше js
Друзья, подскажите как сделать, всю голову сломал) Хочу реализовать выпадающее меню по кликуВсё что задумал вроде получилось, но надо еще...
javascript не знаюВ процессе создания кода возникла необходимость ввести рассчитанную ставку в поле с кодом: