Vanilla JS - Ottieni l'elemento in base al nome di un div

Aug 21 2020

Devo tradurre questo comando jQuery in JavaScript:

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

Ho provato a:

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

ma ho ricevuto l'errore "element.getElementsByName non è una funzione"

Risposte

3 Sascha Aug 21 2020 at 21:35

Utilizzare getElementByIdper ottenere il tag con ID "edit_pickup_date_modal". Quindi cerca con querySelectoril primo campo INPUT con nome = 'tipo' e imposta il valore.

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

3 Nithish Aug 21 2020 at 21:37

Per ulteriori informazioni sulla ricerca di elementi su DOM come getElementById, querySelectorfare riferimento qui

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>

1 DanielBeck Aug 21 2020 at 21:42

Puoi anche combinare l'intera operazione in un'unica querySelector:

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

1 toto Aug 21 2020 at 21:52

La funzione vanilla equivalente per jQuery $('#edit_pickup_date_modal').find('input[name=type]').val('2');

è:

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>
 

E significa:

per ciascuno input[name=type]all'interno dell'elemento con ID edit_pickup_date_modal, assegna alla sua valueproprietà il valore della costante 2.