Question

我认为应该有一些简单的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或任何东西。

Answer 1

document.there.innerHTML不是你应该如何引用非表单元素。给它一个id，并使用getElementById

Answer 2

只需将您的功能更改为：

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>

这应该有用。

Answer 3

您应该将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>

Answer 4

这似乎在我的最后工作

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

一个简单的javascript号码onchange功能

4 个答案: