Javascript 如何使链接在单击时更改段落内容？返回false不工作_Javascript_Javascript Events

Javascript 如何使链接在单击时更改段落内容？返回false不工作

javascript

Javascript 如何使链接在单击时更改段落内容？返回false不工作,javascript,javascript-events,Javascript,Javascript Events,我正在学习编写Java脚本。在这个脚本中，我希望一个链接不是指向它指定的位置，而是更改它前面段落中的文本。我已经创建了一个函数来实现onclick，但是该函数不能返回false <html> <head> <title>Javascript Test #6</title> <script type="text/javascript"> document.getElementById("links").on

我正在学习编写Java脚本。在这个脚本中，我希望一个链接不是指向它指定的位置，而是更改它前面段落中的文本。我已经创建了一个函数来实现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>


Javascript测试#6
document.getElementById（“links”）.onclick=writeData（）；
函数writeData（）
{
document.getElementById（“para”）.innerHTML=“已更改的段落内容”；
返回false；
}
未更改段落内容

不要使用括号。它们迫使您对功能进行评估。但是您想要分配函数

编辑：

当然，您需要在加载文档后分配函数。按照现在的方式，在执行分配时，将不会有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>


Javascript测试#6
未更改段落内容


document.getElementById（“links”）.onclick=writeData；
函数writeData（）
{
document.getElementById（“para”）.innerHTML=“已更改的段落内容”；
返回false；
}

编辑（使用window.onload）：


Javascript测试#6
window.onload=函数（）{
document.getElementById（“links”）.onclick=writeData；
}
函数writeData（）
{
document.getElementById（“para”）.innerHTML=“已更改的段落内容”；
返回false；
}
未更改段落内容

不要使用括号。它们迫使您对功能进行评估。但是您想要分配函数

编辑：

当然，您需要在加载文档后分配函数。按照现在的方式，在执行分配时，将不会有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>


Javascript测试#6
未更改段落内容


document.getElementById（“links”）.onclick=writeData；
函数writeData（）
{
document.getElementById（“para”）.innerHTML=“已更改的段落内容”；
返回false；
}

编辑（使用window.onload）：


Javascript测试#6
window.onload=函数（）{
document.getElementById（“links”）.onclick=writeData；
}
函数writeData（）
{
document.getElementById（“para”）.innerHTML=“已更改的段落内容”；
返回false；
}
未更改段落内容

处理document.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>


Javascript测试#6
函数writeData（）
{
document.getElementById（“para”）.innerHTML=“已更改的段落内容”；
返回false；
}
未更改段落内容

或者，改变事情的顺序：首先准备好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>


Javascript测试#6
未更改段落内容


document.getElementById（“links”）.onclick=writeData；
函数writeData（）
{
document.getElementById（“para”）.innerHTML=“已更改的段落内容”；
返回false；
}

请参见

处理document.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>


Javascript测试#6
函数writeData（）
{
document.getElementById（“para”）.innerHTML=“已更改的段落内容”；
返回false；
}
未更改段落内容

或者，改变事情的顺序：首先准备好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>


Javascript测试#6
未更改段落内容


document.getElementById（“links”）.onclick=writeData；
函数writeData（）
{
document.getElementById（“para”）.innerHTML=“已更改的段落内容”；
返回false；
}

看

我已经试过了，即使不起作用。点击后仍然会转到链接。请看我的编辑，可能会有效果。您还可以看看如何使用

document ready

事件，如果您想将脚本保留在head部分，只需搜索

javascript document ready event

我尝试按照您提到的方式分配函数（实际使用的是确切的代码）。没用。恐怕这会引起更多的问题。默认情况下，段落将改为“已更改的段落内容”，而不是“未更改的段落内容”，并且@Chips_100是否准备好文档作为jQuery事件？搜索结果主要是一些jQuery文章。我还没有找到jQuery。很抱歉，如果我听起来很粗鲁，我完全不知道我学到了什么。很抱歉，我的代码中有一个拼写错误-我复制了你的代码，忘了再次删除括号。请在没有括号的情况下重试（我还编辑了代码，因此您现在可以使用它）。关于事件：documentready是一个

jQuery事件

，它基本上只是

窗口的包装器。尤米