Question

在我网站的测试页面中，js的这个文本更改位完美无瑕，但是当我将它带到实际网站时，底部的链接都没有工作。

完全实现的想法是在页面底部放置一个导航栏，为页面内容生成HTML代码。实际内容本身隐藏在javascript字符串中，直到需要为止。然后它被放到页面上的预定位置。

<html>
<head>
<title>Javascript Test #9</title>
<script type="text/javascript">
    window.onload = function() {
        document.getElementById("workl").onclick=workf;
        document.getElementById("aboutl").onclick=aboutf;
        document.getElementById("contactl").onclick=contactf;
        document.getElementById("quote").onclick=quotationf;        
    }

    function workf(){
        document.getElementById("para").innerHTML="Primary Changed Paragraph Content";
        quotationf("changed quote content");
        return false;
    }
    function aboutf(){
        document.getElementById("para").innerHTML="Secondary Changed Paragraph Content<br><br><br>";
        quotationf("changed quote content");

        return false;
    }       
    function contactf(){
        document.getElementById("para").innerHTML="Tertiary Changed Paragraph Content";
        quotationf("changed quote content");

        return false;
    }
    function quotationf (input){
        document.getElementById("quote").innerHTML=input;
        return false;
    }

</script>
</head>
<body>

    <p id="quote"> quote content</p>
    <p id="para">Unchanged Paragraph Content</p>    <br>
<a id="workl" href="#"> Click here to change the paragraph content </a><br>
<a id="aboutl" href="#"> Click here to change the paragraph content </a><br>
<a id="contactl" href="#"> Click here to change the paragraph content </a>

</body>
</html>

代码不起作用的地方是：http://theblankframe.com/tempmobile/index.html

工作测试在这里：http://theblankframe.com/tempmobile/test2.html

任何帮助都会很棒。谢谢！

Answer 1

在生产网站上，我看到了错误

SCRIPT5007：无法设置属性'onclick'的值：object为null或undefined

在代码行

document.getElementById("workl").onclick=workf;

在测试网站上，您使用ID workl

定义 A 标记

<a id="workl" href="#"> Click here to change the paragraph content </a>

但是，您没有在生产站点上定义此类标记。

生产中的JavaScript尝试通过ID获取不存在的ID的元素，然后在该元素上调用无法找到的方法。

Answer 2

您需要在实际网站中使用ID为work1的元素才能生效。这是因为代码

document.getElementById("workl").onclick=workf;

正在寻找无法找到的元素。

Answer 3

问题出在这里

window.onload = function() {
document.getElementById("workl").onclick=workf; // << error thrown here
document.getElementById("aboutl").onclick=aboutf; //<< aboutl doesnt exist too
document.getElementById("contactl").onclick=contactf;
document.getElementById("quotet").onclick=quotationf;
}

没有标识为workl的元素，因此在null对象上附加处理程序会在document.getElementById("workl").onclick=workf;中引发错误，而其余的脚本将失败

Answer 4

@In production中没有id为“work”的元素。

一个好的做法是验证getElementById是否返回有效的内容。

if(document.getElementById("workl")){
   document.getElementById("workl").onclick=workf;
}

更改文本的JavaScript可以在测试中使用，但不能在实际站点中使用

4 个答案: