javascripthtmlgetelementbyidgetelementsbyname

JavaScript only returns undefined in html


This is my code:

function INVIO() {
  var nome = document.getElementsByName("userName").value;
  var password = document.getElementsByName("userPassword").value;
  var email = document.getElementsByName("userMail").value;
  var messaggio = nome + ", abbiamo registrato la tua password (" + password + ") e la tua mail (" + email + ")";
  document.getElementById("risultato").innerHTML = messaggio;
}
<b>Username:</b>
<input id="userName" type="text" name="userName" /><br><br>

<b>Password:</b>
<input id="userPassword" type="password" name="userPassword" /><br><br>

<b>Email:</b>
<input id="userMail" type="email" name="userMail" /><br><br>

<button type="button" onclick="INVIO();"> 
    <font color="black">
        <b>INVIO</b>
    </font>
</button>

<p id="risultato"></p>


This is the problem: all the values are displayed as undefined.

I searched for an answer all over the site, but I didn't find anything.
For example it's full of answers about how to have a value from an iframe using JavaScript, but nobody had problems with input tag.

I'd be thankful with anybody who can help me.


Solution

  • You should use getElementById instead of getElementsByName

    var nome = document.getElementById("userName").value;
    var password = document.getElementById("userPassword").value;
    var email = document.getElementById("userMail").value;
    

    document.getElementsByName returns a collection of all elements in the document with the specified name, and not a single element

    <b>Username:</b>
            <input id="userName" type="text" class="input_arancione" title="Il tuo userName" name="userName"/><br><br><br>
            
            <b>Password:</b>
            <input id="userPassword" type="password" class="input_arancione" title="Un numero compreso tra 8 e 12 cifre HEX" name="userPassword"/><br><br><br>
            
            <b>Email:</b>
            <input id="userMail" type="email" class="input_arancione" title="Il tuo indirizzo mail" name="userMail"/><br><br><br>
                        
            <button type="button" class="button" onclick="INVIO();"> 
                <font color="black">
                    <b>
                        INVIO
                    </b>
                </font>
            </button>
    
    <!--Some useless code between-->
    
    <script type="text/javascript">
                function INVIO()
                {
                    var nome = document.getElementById("userName").value;
                    var password = document.getElementById("userPassword").value;
                    var email = document.getElementById("userMail").value;
                    
                    var messaggio = nome + ", abbiamo registrato la tua password (" + password + ") e la tua mail (" + email + ")";
                    
                    document.getElementById("risultato").innerHTML = messaggio;
                }
            </script>
    <p id="risultato"></p>