0

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

1 ответ 1

1

Вы передаете в функцию элемент - onmousemove="marshChange(this)", а в коде думаете, что это id:

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

Но логика действий в этой функции от меня все равно ускользает :).

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.