一个简单的javascript数字onchange函数答案

【问题标题】：A simple javascript number onchange function一个简单的javascript数字onchange函数
【发布时间】：2014-05-27 02:59:01
【问题描述】：

我有一段简单的 javascript 代码，我认为它应该可以工作，但事实并非如此。现在的想法基本上只是在将数字输入到框中时更改 div 的内容。稍后我会让它做一些更复杂的事情，但我需要它先工作。

所以我有这个 HTML 页面：

<form>
    <input type="text" name="here" onkeyup="revChange()" />
</form>
<div name="there"></div>

使用以下 javascript 运行：

var revChange = function () {
    document.there.innerHTML = "<p>Thing</p>";
};

结果是当我在输入框中输入任何内容时什么都没有发生，它只是保持空白。我试过使用onchange、onkeypress、onblur、onkeyup，我试过带括号的函数，不带括号，使用括号中的参数（包括this.value），我试过在函数里放几个不同的东西，我甚至尝试直接从脚本中调用该函数。无论我做什么，这个功能似乎都不想做任何事情。我无法弄清楚发生了什么，所以如果可能的话，我想要一些解释。哦，是的，这只是纯 javascript，而不是 jQuery 或任何东西。

【问题讨论】：

document.querySelector('div[name="there"]').innerHTML="<p>Thing</p>";

标签： javascript html forms function onchange

【解决方案1】：

document.there.innerHTML 不是您应该引用非表单元素的方式。给它一个 id，然后使用 getElementById

【讨论】：

原来是这样的，但这里的问题更多的是函数根本没有加载。
我之前也在 jsfiddle 中尝试过这段代码。我们尝试之间的区别似乎是我的设置为“onLoad”。
@Honback：是的，一个常见的错误。您可以在 jsFiddle 文档中阅读有关设置的更多信息：doc.jsfiddle.net/basic/…。

【解决方案2】：

您应该将 div 上的 name 属性更改为 id，并使用 getElementById

<script type="text/javascript">
var revChange = function () {
    document.getElementById("there").innerHTML = "<p>Thing</p>";
};
</script>

<form>
    <input type="text" name="here" onkeyup="revChange()" />
</form>
<div id="there"></div>

【讨论】：

【解决方案3】：

这似乎对我有用

<form>
    <input type="text" name="here" onkeyup="revChange(this)" />
</form>
<div name="there" id="das"></div>
<script>
var revChange = function (abd) {
    document.getElementById('das').innerHTML = abd.value;
};
</script>

【讨论】：

【解决方案4】：

只需将您的功能更改为：

var revChange = function (ref) {
 document.getElementsByName("there")[0].innerHTML = ref.value;
};

还将您的 html 更改为：

 <form>
    <input type="text" name="here" onkeyup="revChange(this)" />
    <div name="there"></div>
 </form>

这应该可行。

【讨论】：

这大概会选择input元素。
@FelixKling ，如果你仔细观察，“there”就是 div 的名称。所以它会选择 div。
但是你访问的是第一个被选中的元素，并且元素通常是按照它们在文档中出现的顺序被选中的。输入在 div 之前。
@FelixKling，我正在使用 getElementsByName()，它将仅选择具有 name="there" 的元素。输入的名称为“here”，但 div 的名称为“there”。