Почему не работает innerText и не только

Question

При клике на Pencil дожлно появится текст в input-e. Но не происходит, в чем проблема? с innerHTML тоже пробовал

    
    let inputS  = document.querySelector('.desc-s');
let pen = document.querySelectorAll(".pen-one")
let specs = document.querySelectorAll(".th-of-ec")
for(l=0;l<pen.length;l++){
    pen[l].onclick = () =>{
        inputS.value = specs[l].innerText
    }
}

<i class="pen-one" aria-hidden="true">Pencil</i>
                    <p class = "th-of-ec">Theory of economics</p>
          <input type = "text" class = "desc-s">

Answer 1

У вас в цикле происходит назначение функции клика, при этом в самом клике вы используете переменную цикла l. Дело в том, что вы рассчитываете, что l в вашем примере будет равно 0, при исполнении кода spec[l].innerText. Однако на деле вы присваиваете не константное значение переменной l, а ссылку на данную переменную. Когда цикл заканчивается l становится равным 1 т.к. за телом цикла выполнится код ++l и l<pen.length.

Таким образом в момент нажатия (исполнения функции, которую вы присвоили на клик), вы пытаетесь взять 1ый элемент массив specs, но у specs только один элемент с нулевым индексом.

inputS.value = specs[1].innerText

Скорее всего вы предполагали такое исполнение:

    
let inputS  = document.querySelector('.desc-s');
let pen = document.querySelectorAll(".pen-one")
let specs = document.querySelectorAll(".th-of-ec")
for(l=0;l<pen.length;l++){
    pen[l].onclick = () =>{
        inputS.value = specs[0].innerText
    }
}

<i class="pen-one" aria-hidden="true">Pencil</i>
<p class = "th-of-ec">Theory of economics</p>
<input type = "text" class = "desc-s">

Answer 2

Вы забыли добавить let к декларации l. Без этого в строгом режиме будет ошибка, а в несторогом создаётся переменная типа var, котораяя не будеет иметь привязки к итерации цикла и в вашеем обработчике после цикла будет содержать число, выходящее за границы массива (в примере это буте 1), поэтому specs[l].innerText не будет найдено. Нужно вот так:

let inputS  = document.querySelector('.desc-s');
let pen = document.querySelectorAll(".pen-one");
let specs = document.querySelectorAll(".th-of-ec");
for(let l = 0; l < pen.length; l++){
    pen[l].onclick = () => {
        inputS.value = specs[l].innerText;
    }
}

<i class="pen-one" aria-hidden="true">Pencil</i>
<p class = "th-of-ec">Theory of economics</p>
<input type = "text" class = "desc-s">

БЛОГ НА HUSL

Почему не работает innerText и не только

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