Question

我在运动中需要帮助。我必须使用特定的TextNode创建一个新元素。此TextNode是来自两个输入的值。单击提交按钮时，使用该值创建新段落的名字和姓氏。我尝试了很多没有成功的事情。结果不显示。

这是代码段代码：

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

当数组具有名称时

名称[0] .value +名称[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

的更多信息

如何从“节点列表”中选择元素值？

2 个答案: