Jak mogę użyć querySelector, aby wybrać element wejściowy według nazwy?

Question

Niedawno otrzymałem pomoc na tej stronie w używaniu querySelector na formularzu wejściowym, takim jak select, ale jak tylko wziąłem <select>, całkowicie zmieniło to, co trzeba było zrobić w funkcji.

HTML:

<form onsubmit="return checkForm()"> 
    Password: <input type="text" name="pwd"> 
    <input type="submit" value="Submit"> 
</form> 

Javascript:

<script language="Javascript" type="text/javascript"> 
    debugger; 
    function checkForm() { 
     var form = document.forms[0]; 
     var selectElement = form.querySelector(''); 
     var selectedValue = selectElement.value; 

     alert(selectedValue); 
</script> 

Przedtem miałem ('select') dla querySelector, ale teraz jestem pewien, co się tam umieścić.
Próbowałem wielu rzeczy, a także querySelectorAll, ale nie mogę tego rozgryźć.

Aby było jasne, próbuję ściągnąć name="pwd".

Jak mogę to zrobić?

Answer 1

Można spróbować 'wejściowy [name = "pwd"]':

function checkForm(){ 
    var form = document.forms[0]; 
    var selectElement = form.querySelector('input[name="pwd"]'); 
    var selectedValue = selectElement.value; 
} 

wziąć wyglądać ten http://jsfiddle.net/2ZL4G/1/

Answer 2

Przykłady te wydają się nieco nieefektywne. Spróbuj tego, jeśli chcesz działać na wartości:

<input id="cta" type="email" placeholder="Enter Email..."> 
<button onclick="return joinMailingList()">Join</button> 

<script> 
    const joinMailingList =() => { 
     const email = document.querySelector('#cta').value 
     console.log(email) 
    } 
</script> 

Napotkacie problem jeśli używasz this słowa kluczowego z tłuszczu strzałką (=>). Jeśli musisz to zrobić, przejdź starej szkoły:

<script> 
    function joinMailingList() { 
     const email = document.querySelector('#cta').value 
     console.log(email) 
    } 
</script> 

Jeśli pracujesz z wejściami hasło, należy użyć type="password" tak wyświetli ****** gdy użytkownik pisze, i to jest również bardziej semantyczny.