javascript - getElementByName 验证

Question

我知道如何使用 getElementById 等方法获取字段以使用 JavaScript 进行验证。对于这种情况，我需要使用 getElementByName 方法。我'Cannot read property 'nodeValue' of null在 console.log 中有错误。

这是我与 getElementByName 方法一起使用的代码

HTML

<button name="button1">Hello</button>
<div class="form-row">    
            <div class="field w100">    
                <label for="primary_phone">Primary phone (digits only) *</label>
                <input type="text" name="primary_phone" id="primary_phone" placeholder="hello"></input>

        </div>
    </div>   
    <div class="form-row">      
        <label for="confirm_phone">Confirm phone (digits only) *</label>
        <input type="text" name="confirm_phone" id="confirm_phone"></input>    
    </div> 
  </div>

JavaScript

var btn1 = document.getElementsByName('button1')[0];
var btn1Text = btn1.firstChild.nodeValue;
console.log(btn1Text);

下面是返回错误的代码。

HTML

<button id="button">Button</button>

JavaScript

function validate() {

    var primaryNo = document.getElementsByName('primary_phone')[0];
    var confirmNo = document.getElementsByName('confirm_phone')[0];
    var primaryValue = primaryNo.firstChild.nodeValue;
    var confirmValue = confirmNo.firstChild.nodeValue;

        if (primaryValue !== confirmValue) {
            alert('Numbers do not match');
        } else {
            alert('congratulations')
        }
};

var btn = document.getElementById('button');
btn.addEventListener('click', validate, false);

有任何想法吗？

Answer 1

看起来您可能input正在尝试获取其值的字段。

在那种情况下，他们没有任何子元素，相反你需要得到他们的value喜欢

var primaryValue = primaryNo.value;
var confirmValue = confirmNo.value;

Answer 2

var btn1 = document.getElementsByName('button1')[0]; 的结果是什么？在控制台 (console.log(btn1);) 中？

小心标签名称：button，button1...也许你有语法错误。