-2

a

Как правильно вытащить текст value из input, если нет id у этого элемента?

Пробовал так, но ощущение, что двигаюсь не туда:

var btn = document.createElement('button')
document.body.appendChild(btn)

const ttr = document.createElement("div");

      ttr.setAttribute("class", "saver");

      class test {
        constructor(btn, inputs) {
          this.btn = document.querySelector(btn);
          this.inputs = document.querySelectorAll(inputs);

          this.letes = "";
          this.main();
        }

        main() {
          this.inputs.forEach((item) => {
            this.letes += item.innerHTML;
          });

          this.btn.onclick = () => {
            console.log(this.letes);
          };
        }
      }

      const obj = new test("button", "input");

8
  • Как ни странно, для получения value надо использовать свойство value а не innerHTML
    – Grundy
    28 мая 2019 в 10:52
  • @Grundy, пробовал, пустое поле возвращает
    – Jefoce
    28 мая 2019 в 10:55
  • если поменять innerHTML на value + добавить таки в дом инпуты, то все работает как нужно
    – ThisMan
    28 мая 2019 в 11:02
  • @Grundy this.letes += item.inputs.value;, правильно понял?
    – Jefoce
    28 мая 2019 в 11:19
  • @Jefoce, да, только тут у тебя опечатка, item это и есть input у тебя, и ты у него сначала брал innerHTML, почему сейчас начал брать inputs? Надо просто заменить innerHTML на value
    – Grundy
    28 мая 2019 в 11:25

2 ответа 2

1

Несколько вариантов...

/* Первый инпут( [0] ), который находится внутри id="file_1" */
let x = document.getElementById('file_1').getElementsByTagName('input')[0];

/* Первый найденный инпут внутри id="file_1" */
let y = document.querySelectorAll('#file_1 input')[0];

/* Только первый на странице инпут, с value="test-bubu", тут нельзя добавлять [0], [1]...*/
let z = document.querySelector('input[value="test-bubu"]');

console.log( x.value );
console.log( y.value );
console.log( z.value );
<output id="list">
  <ol>
    <ol id="file_1">
      <h3>FileName</h3>
      <dl></dl>
      <div class="textarea">
        <dt></dt>
        <dt>
          <input readonly value="test-bubu" type="text">
        </dt>
      </div>
    </ol>
  </ol>
</output>

Но не понятно, почему нельзя туда просто добавить id...

P.s. выкладывать код в виде картинки - садизм... не ннада так)))

5
  • Спасибо, не сработало, лог: save.js:19 Uncaught TypeError: Cannot read property 'getElementsByTagName' of null at new test (save.js:19) at save.js:34
    – Jefoce
    28 мая 2019 в 11:36
  • "Но не понятно, почему нельзя туда просто добавить id..." - не мой html, я через расширение делаю
    – Jefoce
    28 мая 2019 в 11:36
  • "P.s. выкладывать код в виде картинки - садизм... не ннада так)))" хорошо😅
    – Jefoce
    28 мая 2019 в 11:36
  • Значит у вас скрипт загружается еще до того, как браузер успел "прочитать" HTML. Нужно либо разместить его где-то ниже HTML, либо разместить внутри общей функции... window.addEventListener('DOMContentLoaded', function(){ /* код, размещенный здесь, сработает после загрузки страницы */ }); — или, если скрипт добавляется через внешнюю ссылку, использовать <script src="..." defer></script> 28 мая 2019 в 11:39
  • Спасибо, сработало)
    – Jefoce
    28 мая 2019 в 11:44
-1

Можно же поставить id и использовать document.getElementById

можно вот так var text = document.getElementsByTagName("input")[0]; var val=text.value; alert(val)

можно поставить на инпут событие onchange и в функцию посылать значение

1
  • Спасибо, попробую
    – Jefoce
    28 мая 2019 в 11:20

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