Как получить значение скрытого элемента?

Question

Помогите разобраться, есть следующий js код создающий таблицу

tableData.forEach(element => {
   let row = '<tr class="markup-table__row">'
        + ' <td class="markup-table__cell">'
        + '     <div style="cursor:pointer" class="markup-table__cell-text" onclick="getDetailsOperator()">'
        + element.operatorName
        + '     <input type="hidden" name="idOperator" value="' + element.id + '"/>'
        + '     </div>'
        + ' </td>'
})

Вопрос, как правильно написать функцию getDetailsOperator(), чтобы получить value (например вывести его через alert или console) скрытого элемента с name="idOperator", добавлять атрибут id в данном случаи нельзя.

С JS работал очень мало, опыта работы с родительскими и дочерними объектами - нет, может кто нибудь помочь?

Answer 1

получить value (например вывести его через alert или console) скрытого элемента с name="idOperator"

Предложу такой вариант функции getDetailsOperator()...

document.querySelector('#test').addEventListener('click', e => {
  const ot = e.target.closest('tr')
  if (!ot) return
  const val = ot.querySelector('[name="idOperator"]')?.value ?? '<тут нет такого поля>'
  console.log(val)
})

function getDetailsOperator() {
  return [...document.querySelectorAll('[name="idOperator"]')].map(o => o.value)
}
console.log(getDetailsOperator().join(', '))

<table id='test'>
  <tr class="markup-table__row">
    <td class="markup-table__cell">
      <div style="cursor:pointer" class="markup-table__cell-text" onclick="getDetailsOperator()">
        operatorName1
        <input type="hidden" name="idOperator" value="element.id1" />
      </div>
    </td>
  </tr>
  <tr class="markup-table__row">
    <td class="markup-table__cell">
      <div style="cursor:pointer" class="markup-table__cell-text" onclick="getDetailsOperator()">
        operatorName2
        <input type="hidden" name="idOperator" value="element.id2" />
      </div>
    </td>
  </tr>
</table>

Answer 2

а как можно вывести только определённые, скажем, только те, по которым был щелчок?

for (const input of document.querySelectorAll(`[name="idOperator"]`)) {
   input.addEventListener("click", function (){
      console.log(this.value)
   })
}

При клике по полю выводит его результат. Или нужны только те, которые вообще изменялись/по ним кликали?

БЛОГ НА HUSL

Как получить значение скрытого элемента?

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