Не удается получить атрибут value

215

30 января 2018, 07:36

Есть html страница и от туда нужно получить значение атрибута value из input. Для этого я использую cefSharp .

(function() { var sb = document.getElementById('sidebar');
                var query=document.getElementById('query');
                return query.getAttribute("value");
                })();

Без всего лишнего код выглядит так. Так вот return возвращает пустую строку, даже если я туда что либо впишу. Получить атрибут class мне удалось

   <input type="text" name="query" id="query" placeholder="Поиск" 
   autofocus="autofocus" class="overflow">

Value скрыт как я понял. Так как получить его при помощи webbrowser мне удавалось. Вопрос как получить или задать атрибут value, или хотя бы подскажите как исправить.

Answer 1

Все работает правильно. Давайте взглянем на ваш HTML код:

<input type="text" name="query" id="query" placeholder="Поиск" 
   autofocus="autofocus" class="overflow">

getAttribute() возвращает значение указанного атрибута элемента. Если элемент не содержит данный атрибут, могут быть возвращены null или "" (пустая строка);

Так как input не содержит аттрибут value поэтому вы и получаете значение null или пустую строку. Также из документации:

Примечание:
Имеет смысл использовать hasAttribute, чтобы проверять наличие атрибутов перед вызовом getAttribute(), если может быть такое, что выбранный элемент не будет содержать искомого атрибута.

Я бы рекомендовал вам использовать value вместо getAttribute, покажу на примере, почему (добавим value="" в input):

function getValue() { 
  var query = document.getElementById('query'); 
  // пустая строка 
  console.log(query.getAttribute("value")); 
  // корректное значение 
  console.log(query.value); 
}

<input type="text" name="query" id="query" placeholder="Поиск" autofocus="autofocus" class="overflow" value=""> 
 
<button onclick="getValue();">Get input value</button>

Разница в том, что query.value - это значение реального времени, и если пользователь изменит значение текстового поля, он будет содержать это и покажет новое значение. В то время как query.getAttribute('value') будет показывать исходное значение.

Ссылка на оригинал: Difference between Element.value and Element.getAttribute(“value”)

Answer 2

Ваш скрипт работает корректно, измените значение value для тега input в html, чтобы скрипт возвращал не null