如何使链接在点击时改变段落的内容?返回false，不工作

我正在学习编写JavaScript代码。在这个脚本中，我想要一个链接不去其指定的位置，但改变段落之前的文本。我已经创建了一个函数来实现它onclick，但是该函数不能返回false。

<html>
<head>
    <title>Javascript Test #6</title>
    <script type="text/javascript">
        document.getElementById("links").onclick=writeData();
        function writeData()
            {
                document.getElementById("para").innerHTML="Changed Paragraph Content";
                return false;
            }
    </script>
</head>
<body>
    <p id="para">Unchanged Paragraph Content</p>
    <br/>
    <a id="links" href="javascript-return.html"> Click here to change the paragraph content </a>
</body>
</html>

document.getElementById("links").onclick=writeData;

不要使用括号。它们迫使你的函数求值。但是你想给函数赋值

编辑:

当然，你需要在文档加载之后赋值你的函数。现在的方式是，在执行赋值时不会有id为links的元素。基本上，只要把你的脚本块放在links元素下面。

<html>
<head>
    <title>Javascript Test #6</title>
</head>
<body>
    <p id="para">Unchanged Paragraph Content</p>
    <br/>
    <a id="links" href="javascript-return.html"> Click here to change the paragraph content </a>
    <script type="text/javascript">
        document.getElementById("links").onclick=writeData;
        function writeData()
        {
            document.getElementById("para").innerHTML="Changed Paragraph Content";
            return false;
        }
    </script>
</body>
</html>

EDIT (Using window.onload):

<html>
<head>
    <title>Javascript Test #6</title>
    <script type="text/javascript">
        window.onload = function() {
            document.getElementById("links").onclick=writeData;
        }
        function writeData()
        {
            document.getElementById("para").innerHTML="Changed Paragraph Content";
            return false;
        }
    </script>
</head>
<body>
    <p id="para">Unchanged Paragraph Content</p>
    <br/>
    <a id="links" href="javascript-return.html"> Click here to change the paragraph content </a>
</body>
</html>

处理文档时。getElementById，您应该确保在调用时，元素在DOM中。只需使用内联点击处理程序:

<html>
    <head>
    <title>Javascript Test #6</title>
    <script type="text/javascript">
        function writeData()
        {
            document.getElementById("para").innerHTML="Changed Paragraph Content";
            return false;
        }
    </script>
    </head>
    <body>
        <p id="para">Unchanged Paragraph Content</p>
        <br/>
        <a id="links" href="javascript-return.html" onclick="return writeData();">    Click here       to change the paragraph content </a>
    </body>
 </html>

或者，改变事情的顺序:首先准备好DOM，然后，插入你的js脚本:

<html>
    <head>
    <title>Javascript Test #6</title>
    </head>
    <body>
        <p id="para">Unchanged Paragraph Content</p>
        <br/>
        <a id="links" href="javascript-return.html" onclick="return writeData();">    Click here       to change the paragraph content </a>
        <script type="text/javascript">
            document.getElementById("links").onclick=writeData;
            function writeData()
            {
                document.getElementById("para").innerHTML="Changed Paragraph Content";
                return false;
            }
        </script>
    </body>
 </html>

在这里看到它的作用:http://jsfiddle.net/2CpcF/

相关内容

最新更新

热门标签：