От меньшего введенного до большего в out

Question

Есть два iuput'a где нужно указать числа, например если я наберу 10 и 15 то вывод будет такой: 11 12 13 14 15, если 13 и 8 то: 9 10 11 12 13. Решить нужно с помощью цикла прошу найти ошибку в логике или дать подсказку.

function t9() {
    let out = document.querySelector('.out-9');
    let a = ' ';
    let b = document.querySelector('.i-91');
    let c = document.querySelector('.i-92');
    if (b > c) {
        for (i = c.value; i <=b.value; i++) {
            a += i + ' ';
        }
    }
    else {
        for ( i = b.value; i <=c.value; i++) {
            a += i + ' ';
        }
    }
    out.innerHTML = a;
}

document.querySelector('.b-9').onclick = t9;

Answer 1

В for нужно объявлять переменную i https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/for пункт инициализации.

Когда Вы сравниваете b и c вы фактически сравниваете ноду(детали здесь: https://developer.mozilla.org/ru/docs/Web/API/Node)

В каждой ноде есть свойства. Свойствами можно управлять, и теги которые Вы указываете в HTML элементе, также отображаются в свойствах.

Попробуйте указать console.dir(b,c) и Вы увидите все свойства этого элемента. Только тогда, когда Вы будете сравнивать значения а не ноды, тогда Ваш код заработает.

Пример моего Варианта кода

const inputs = document.querySelectorAll(`input[type='number']`);

const button = document.querySelector(`input[type='button']`);

const p = document.querySelector("p")

button.addEventListener("click", ()=>{
   p.innerText =""
   let value1 = inputs[0].value;
   let value2 = inputs[1].value;

   if(value1>value2) [value1,value2]=[value2,value1];

   for(let i = value1; i <= value2; i++){
     p.innerText+=` ${i}`
   }
})

<input type = "number" value = "0" >
<input type = "number" value = "0" >
<input type = "button" value = "Start">

<p></p>

Answer 2

Если условие изменить на b < c, то в принципе всё будет работать. Но я бы на Вашем месте сразу приводил значение из инпутов к числу (ну и до кучи проверял, число ли введено), потому что сравнение строк - дело неблагодарное (результат может Вас сильно удивить):

function t9() {
    let out = document.querySelector('.out-9');
    let a = ' ';
    let b = +document.querySelector('.i-91').value;
    let c = +document.querySelector('.i-92').value;
    if (b < c) {
        for (i = (b+1); i <=c; i++) {
            a += i + ' ';
        }
        out.innerHTML = a;
    }
    else {
        for(i = (c+1); i <=b; i++) {
            a += i + ' ';
        }
        out.innerHTML = a;
    }
}

document.querySelector('.b-9').onclick = t9;

<input type="text" class="i-91">
<input type="text" class="i-92">
<button class="b-9">Click</button>
<div class="out-9"></div>

БЛОГ НА HUSL

От меньшего введенного до большего в out

Ответы (2 шт):