JavaScript DOM: Неопределяется переменная через document.getElementByID().value;

168
24 июня 2018, 10:20

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

Answer 1

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

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

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

READ ALSO
Задание по JS. Нужна адекватная критика

Задание по JS. Нужна адекватная критика

Всем приветКодил я на Python, хотел всегда освоить дальше js

227
jquery Скрыть меню при повторном клике

jquery Скрыть меню при повторном клике

Друзья, подскажите как сделать, всю голову сломал) Хочу реализовать выпадающее меню по кликуВсё что задумал вроде получилось, но надо еще...

180
задать ставку в rambo dice faucethub

задать ставку в rambo dice faucethub

javascript не знаюВ процессе создания кода возникла необходимость ввести рассчитанную ставку в поле с кодом:

221