JavaScript only returns undefined in html

Question

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.

Answer 1

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>

Answer 2

Use document.getElementById instead of document.getElementsByName.

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;
            }