How do I select an element value from an Node List?

Question

How do I select an element value from an Node List?

1.4k Views Asked by Raquel Santos At 04 April 2025 at 22:36

I need help in an exercise. I have to create a new element with a specific TextNode. This TextNode is the value from two inputs. FirstName and LastName that creat a new paragraph with that values when I click the submit button. I tried do a lot of things without sucess. The result doesn't show.

This is the snippet code:

(function() {
    'use strict'

    var $form = document.getElementById('form1');
    var $names = document.getElementsByTagName('input');
    var $button = document.getElementById('press');

    $button.addEventListener('click', getValueName);

    function getValueName() {
        for(var i = 0; i<$names.length; i++) { 
            $names[i]; 
        } 
    
        var output=document.createTextNode('$names.value[0]' +
        '$names.value[1]' ); 
        var novop=document.createElement('p');
        novop.appendChild(output); 
        $form.appendChild(novop); 
    }
})();

<form id="form1" onsubmit="getFormvalue()">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <button id="press" type="submit" value="Submit">Submit</button>
</form>

Original Q&A

There are 2 best solutions below

Yulio Aleman Jimenez On 24 March 2019 at 15:51

Maybe the original code is a little different, but try with this solution.

function getFormvalue() {
    'use strict'

    var $form = document.getElementById('form1');
    var $names = document.getElementsByTagName('input');
    var $button = document.getElementById('press');

    var output=document.createTextNode("");
    for(var i = 0; i<$names.length; i++) { 
        output.textContent += $names[i].value; 
    } 
    
    var novop=document.createElement('p');
    novop.appendChild(output); 
    $form.appendChild(novop); 
    
    return false;
}

<form id="form1" onsubmit="return getFormvalue();">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <button id="press" type="submit" value="Submit">Submit</button>
</form>

If you want the same result with less code, this is an ideal solution:

function getFormvalue(){
  var $form = document.getElementById('form1');
  var $names = document.getElementsByTagName('input');
  
  $form.innerHTML += "<p>" + $names[0].value + " " + $names[1].value + "</p>";
  
  return false;
}

<form id="form1" onsubmit="return getFormvalue();">
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <button id="press" type="submit" value="Submit">Submit</button>
</form>

You can learn more about HTML DOM innerHTML Property

**Syed Mehtab Hassan** · Accepted Answer

What you are doing wrong is getting value from array of values

names.value[0] + names.value[1]

while the array is of names

names[0].value + names[1].value

function getFormvalue() {

  var formData = document.getElementsByTagName('body')[0];
  var names = document.getElementsByTagName('input');
  var output = document.createTextNode(names[0].value + names[1].value);
  var novop = document.createElement('p');
  novop.appendChild(output);
  formData.appendChild(novop);
}

<body>
  First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br>
  <button id="press" type="submit" value="Submit" onclick="getFormvalue()">Submit</button>
</body>

How do I select an element value from an Node List?

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in DOM

Related Questions in DOM-EVENTS

Related Questions in NODELIST

Related Questions in CREATETEXTNODE

Trending Questions

Popular # Hahtags

Popular Questions