Как выбрать значение элемента из списка узлов? - PullRequest
Новая
       32

Как выбрать значение элемента из списка узлов?

0 голосов
/ 24 марта 2019

Мне нужна помощь в упражнении. Я должен создать новый элемент с конкретным 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>

Ответы [ 2 ]

0 голосов
/ 24 марта 2019

Может быть, оригинальный код немного отличается, но попробуйте это решение. 

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

0 голосов
/ 24 марта 2019

Что вы делаете неправильно, так это получение значения из массива значений

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

, пока массивимен

имена [0] .значение + имена [1] .значение 

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