Javascript 如何避免TypeError：无法设置属性'；onchange'；空的

如何避免这个错误？它可以工作，但我总是看到这个错误，下面是代码：

function Separe(price) {
    nStr = Number(document.getElementById(price).value) * 100
    nStr += '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(nStr)) {
        nStr = nStr.replace(rgx, '$1' + ' ' + '$2');
    }
    return nStr + " Centimes"
}

function Forma(price, dest) {
    var handler = function(e) {
        document.getElementById(dest).innerHTML = Separe(price)
    };
    document.getElementById(price).onchange = handler; //line 50
    document.getElementById(price).onkeyup = handler;
}

以及HTML：

<input id="prix" type="number" name="prix" min="1" step="1">
<script>
    Forma("prix", "hhh"); //profil 148
</script>
<h1 id="hhh" >&nbsp;</h1>

我这样做是为了避免两次

onchange

和

onkeyup

---

变量尚未生成，这是错误的原因，但如何避免它？我甚至尝试添加所有变量并将它们初始化为null，但仍然得到了错误

完全避免此错误的唯一方法是在查询时，在DOM中准备好要请求的元素

假设您有以下HTML：

<span id="monkey">Hey I'm a monkey</span>
Result for hopeful monkey:<span id="result"></span>
Result for not so hopeful monkey:<span id="noresult"></span>

产出将是：

Hey I'm a monkey 
Result for hopeful monkey:[object HTMLSpanElement] 
Result for not so hopeful monkey: null

因此，您正试图访问一个显然还不存在的元素，或者如果您遇到了错误，则尝试访问一个根本不存在的元素

这就是说，由于你发布的代码在Chrome中运行，你还有其他一些东西在给你带来麻烦。你正在运行哪个版本

我把你的问题弄得一团糟：

---

我还做了一把小提琴来演示我的答案：（它有猴子，所以也很有趣！）

似乎我是代码中的一个重复函数！ 页面使用了手风琴效果，该功能被调用了两次（buy area和sell area），奇怪的是，即使

id

不同，代码也会提示错误；但只有第一次通话有效，第二次通话无效

在第二种情况下，它是一个不同的id：

<script>
Forma("hh", "max");
</script>

形式（“hh”、“max”）；

形式（“h”、“min”）；

我所做的，就是换成第二个

<input .... onkeyup="document.getElementById('h').innerHTML = Separe('min')"  onchange="document.getElementById('h').innerHTML = Separe('min')"/>

---

成功了！现在Chrome不会提醒我，即使第一部分（buy）会调用我问题中的函数

您应该发布函数的其余部分并正确缩进函数体，而不是更改变量名。这将更进一步避免混乱。天哪。问题是，在这两个函数中，都将结束符

}

保留在函数的最后一行。永远不要那样做。一些有经验的程序员试图帮助您，但他们完全没有注意到结尾部分的出现。这应该是一个很好的迹象，表明您无意中发现了一种需要避免的编码风格。

document.getElementById（price）

-您必须确保此元素始终存在，如果它不存在，那么您将继续获得空值。如果您加载我复制并粘贴代码的链接，则在Chrome中不会显示错误。当Chrome报告错误时，它应该提供一个返回到代码中发生错误的行的链接-然后您应该能够在其中放置断点并进行调试。那一行在哪里？@AbdelouahabPp这甚至不是你问题中的错误。在他的标记中很明显，他在标记中声明了有问题的元素后立即调用了函数-但是如果你输出它，他的代码实际上不会产生错误。我使用的是

版本26.0.1410.64 m

，值将不存在，直到我

onchange

或

onkeyup

并且我尝试

onload

但没有work@AbdelouahabPp好吧，你的代码是有效的，你还有其他问题。您的formatter.js的第47行是什么？这是在添加函数Forma（prix，dest）{document.getElementById（prix）.value=“0”尝试添加初始化值后发生的，删除它后，我在`document.getElementById（prix）行中得到错误.onchange=handler；`对不起，因为当我写答案时，它说我必须等待，然后连接中断（这里是非洲）

<script>
Forma("hh", "max");
</script>

<script>
Forma("h", "min");
</script>

<input .... onkeyup="document.getElementById('h').innerHTML = Separe('min')"  onchange="document.getElementById('h').innerHTML = Separe('min')"/>