Vanilla JS - получить элемент по имени div

Мне нужно перевести эту команду jQuery в JavaScript:

$('#edit_pickup_date_modal').find('input[name=type]').val('2');

Я попытался:

var element = document.getElementById('edit_pickup_date_modal');
var input = element.getElementsByName('type')[0];
input.value = '2'

но я получил ошибку element.getElementsByName не является функцией


javascript jquery getelementsbyname
person Riccardo Manzato    schedule 21.08.2020    source источник
comment
Javascript Получить дочерний элемент по имени   -  person Nathan Champion    schedule 21.08.2020
comment
ты пробовал var elms = document.querySelectorAll('#edit_pickup_date_modal input[name=type]'); elms.forEach(x => { x.value = 2 } )? Возможно, в самом старом браузере вам нужно преобразовать NodeList, возвращенный из Element.prototype.querySelectorAll, в обычный Array с Array.from(elms)   -  person asdru    schedule 21.08.2020

Ответы (3)


arrow_upward
3
arrow_downward

Используйте getElementById, чтобы получить тег с идентификатором «edit_pickup_date_modal». Затем найдите с помощью querySelector первое поле INPUT с именем = 'type' и установите значение.

document.getElementById('edit_pickup_date_modal').querySelector('input[name=type]').value=2;
<div id='edit_pickup_date_modal'>
  <div>
    <input name ='type'>
  </div>
</div>

person Sascha    schedule 21.08.2020

arrow_upward
3
arrow_downward

Дополнительную информацию о поиске элементов DOM, таких как getElementById, querySelector, см. здесь

const modalDiv = document.getElementById('edit_pickup_date_modal')

const inputElem = modalDiv.querySelector('input[name=type]');

inputElem.value = 2
<div id="edit_pickup_date_modal">
  <input name="type"/>
</div>

person Nithish    schedule 21.08.2020

arrow_upward
1
arrow_downward

Эквивалентная ванильная функция для jQuery $('#edit_pickup_date_modal').find('input[name=type]').val('2');

is:

document.querySelectorAll('#edit_pickup_date_modal input[name=type]').forEach(function(obj, index){
    obj.value=2;
});

//If you need to take the first element only.
document.querySelector('#edit_pickup_date_modal input[name=type]').value=3;
<div id="edit_pickup_date_modal">
  <input name="type"/>
   <input name="type"/>
    <input name="type"/>
     <input name="type"/>
</div>

И это означает:

для каждого input[name=type] внутри элемента с идентификатором edit_pickup_date_modal присвоить его свойству value постоянное значение 2.

person toto    schedule 21.08.2020
comment
Не мой отрицательный голос, но я считаю, что этот сайт стека требует вопросов и ответов только на английском языке - person freedomn-m; 21.08.2020
comment
Почему бы не использовать английский язык? - person asdru; 21.08.2020