Question

在下面的html中，当后退按钮更改标签的内容时，前面按钮没有响应。

<!DOCTYPE html>
<html>
    <body>
        <p id ="para">Initial text. </p>
        <button onClick=document.getElementById('para').innerHTML="move front">
            front
        </button>
        <button onClick=document.getElementById('para').innerHTML="back">
            back
        </button>
    </body>
</html>

在下面，两个按钮都会更改标签的内容。

<!DOCTYPE html>
<html>
    <body>
        <p id ="para">Initial text. </p>
        <button onClick=document.getElementById('para').innerHTML="movefront">
            front
        </button>
        <button onClick=document.getElementById('para').innerHTML="back">
            back
        </button>
    </body>
</html>

为什么银行空间会使按钮无响应？

Answer 1

这只是无效的HTML。

您必须在整个onclick属性值周围加上引号，否则它将在空格处结束。

onClick = document.getElementById('para').innerHTML="move   // cut off here
front"    // a second (meaningless) attribute for your button tag.

Answer 2

如果您使用此技术，则可能会遇到问题。

很抱歉，不如何将点击事件附加到现代javascript中的元素，至少如果您想使用所谓的“良好做法”。

更好的方法是使用javascript将click事件附加到所需元素。

我会给你一个简短的代码示例。

首先是HTML - 我会使用您原来的HTML（稍加修改）：

<!DOCTYPE html>
<html>
    <body>
        <p id ="para">Initial text. </p>
        <button id="frontBtn"> front </button>
        <button id="backBtn"> back </button>
    </body>
</html>

如您所见，我已从按钮中删除了“onclick”事件，并为每个按钮分配了一个ID。

其次，我们会编写一些javascript来正确地将点击事件附加到每个按钮，当然还会执行原本打算执行的文本更改：

如果您熟悉jQuery，那么这样做：

$('#frontBtn').on('click',function(){
    $('#para').html('move front');
});
$('#backBtn').on('click',function(){
    $('#para').html('back');
});

这也可以使用vanilla（native）javascript：

来完成

document.getElementById("frontBtn").addEventListener("click", function(){
        document.getElementById("para").innerHTML = "move front";
});


document.getElementById("backBtn").addEventListener("click", function(){
        document.getElementById("para").innerHTML = "back";
});

现在我们为每个按钮提供了一个结构合理的事件处理程序，可以轻松添加更多代码。

关于在哪里插入您的javascript？

您可以使用html文档头中的脚本标记将javascript添加到html文档中，如下所示：

<!DOCTYPE html>
<html>
   <head>
     <script type="text/javascript">
        // your code here..
     </script>
   </head>
    <body>
     ....
     ....

甚至更好 - 创建一个单独的脚本文件并将其加载到html页面的底部，如下所示：

<!DOCTYPE html>
<html>
   <head>
     ....
   </head>
    <body>
     ....
     ....
        <script type="text/javascript" src="scripts.js"></script>
    </body>
</html>

这是使用javascript将事件附加到元素的更好方法。

想象一下，如果你尝试内联编写50-100行代码？不可能！但是使用事件处理函数，您可以轻松完成。

事情基本上会更好，你的项目将更容易维护。

希望它有所帮助！

Answer 3

请考虑以下语法：

<button onclick="document.getElementById('para').innerHTML='move front'">front</button>

为什么innerHTML不能使用空格？

3 个答案: