如何 select 节点列表中的元素值？

Question

我在练习中需要帮助。我必须创建一个具有特定 TextNode 的新元素。此 TextNode 是来自两个输入的值。当我单击提交按钮时，FirstName 和 LastName 使用该值创建一个新段落。我尝试做很多事情都没有成功。结果没有显示。

这是代码片段：

(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>

Answer 1

你做错的是从值数组中获取值

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

而数组是名字

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>

Answer 2

也许原始代码有点不同，但请尝试使用此解决方案。

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>

如果您想用更少的代码获得相同的结果，这是一个理想的解决方案：

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>

您可以了解更多 HTML DOM innerHTML Property

如何 select 节点列表中的元素值？

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

javascript

dom

nodelist

createtextnode

dom-events