奇怪的行为 - getElementById()

Question

我目前正在做一些简单的事情 - 一个 JavaScript 脚本，如果字符串是电子邮件，它会进行一些最低限度的验证。

但是出现问题，我似乎无法理解。

我有一个输入文本字段，用户可以在其中输入一封电子邮件，一个按钮，单击该按钮时，会从输入中获取字符串并将其显示在具有绿色背景的 div 中，如果有效，或红色的 - 如果无效。

所以，我创建了一个函数 get()，它简单地执行 return 具有给定 id 的 DOM 元素。没什么特别的，但奇怪的事情接踵而至。

当我尝试使用一个元素时，我从 DOM 'got' 中将其与回调函数中的此函数一起使用，我根本做不到。但是当我在回调函数中用 document.getElementById('status') 手动获取它时，它起作用了。

我不明白问题出在哪里。

这是我的 Html:

<section>
    <input type="text" name="email" placeholder="Enter an email" id="input" />
    <input type="submit" value="Validate &rarr;" id="submit" />
    <div class="status" id="status"></div>
</section>

这里是 JS:

var get = function(id) {
    return document.getElementById(id);
};

var input   = get('input'),
    status  = get('status'),
    btn     = get('submit');

btn.addEventListener('click', function(){
    // doesn't work
    status.innerHTML = 'Checking...';

    // works?!
    // Puts 'Checking' text in div#status
    document.getElementById('status').innerHTML = 'Checking...';
});

Answer 1

名称为 status 的全局变量不会采用非字符串值，这是一个有点讨厌的问题...如果您尝试分配一个值，那么它将采用该对象的 toString() 值（已在 chrome 中测试）。

在您的控制台中，如果您记录 status 的值，您应该得到 [object HTMLDivElement]，这是 Element 对象的 toString() 实现。

只要重命名变量就可以了

var get = function(id) {
    return document.getElementById(id);
};

var input   = get('input'),
    status1  = get('status'),
    btn     = get('submit');

btn.addEventListener('click', function(){
    // doesn't work
    status.innerHTML = 'Checking...';

    // works?!
    // Puts 'Checking' text in div#status
    document.getElementById('status').innerHTML = 'Checking...';
});

其他关键 window 属性也是如此，例如 name

Answer 2

你应该把这个代码

window.onload = function() { 
 var input   = get('input'),
     status  = get('status'),
     btn     = get('submit'); 

 btn.addEventListener('click', function(){
    // doesn't work
    status.innerHTML = 'Checking...';

    // works?!
    // Puts 'Checking' text in div#status
    document.getElementById('status').innerHTML = 'Checking...';
 });
};

应该可以。

奇怪的行为 - getElementById()

Strange behavior - getElementById()

javascript

getelementbyid