同一按钮上的连续onclick事件触发单独的脚本

Consecutive onclick events on same button triggering separate scripts

本文关键字：单独 脚本 事件 连续 按钮 onclick      更新时间：2023-11-16

我正在学习javascript，并开始使用脚本修改DOM。

我有一个小的html文件，用户按下一个按钮，html就会改变状态。我遇到的问题是，在主onclick事件之后，使用相同的按钮将页面重置为原始状态，即编辑DOM以返回其原始标记。

这是我的文件（我知道它很简单，但它会帮助我）：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My First JavaScript</title>
<style type="text/css">
h3#norm {
    font-size: 1.5em;
    color: #000;
}
h3 {
    font-size: 2em;
    color: #0059D7;
}
</style>
</head>
<body>
<!--creating a wrapper to contain and layout the page-->
<div id="wrapper">
<h3 id="norm">Are you new here?</h3>
<!--button for running script-->
<input class="button" type="button" id="button" name="button" value="Yes">
<!--begin javascript to edit html in above line-->
<script type="text/javascript">
<!-- 
//when button is clicked script edits html
document.getElementById('button').onclick = function () {
    document.getElementById('norm').innerHTML="<h3>Welcome!!!</h3>";
};
document.getElementById('button').onclick
//-->
</script>
</div>
</body>
</html>

编辑将丢失的CSS添加到问题

1）不要将h3标记放在javascript innerHTML中，因为它是重复的。

2） 学习三元运算符。更改

document.getElementById('norm').innerHTML="<h3>Welcome!!!</h3>";

至

document.getElementById('norm').innerHTML = (document.getElementById('norm').innerHTML == "Welcome!!!") ? "Are you new here?" : "Welcome!!!";

这样就可以了。

不是最好的方法，但肯定需要最少的努力，尝试这样的方法：

document.getElementById('button').onclick = function () {
    var test = document.getElementById('norm').innerHTML;
    if (test == "Welcome!!!") {
        document.getElementById('norm').innerHTML="Are You New Here?";
    } else {
        document.getElementById('norm').innerHTML= "Welcome!!!";
    }
};

例如，一种更整洁的方式是

document.getElementById('button').onclick = function () {
  var norm = document.getElementById('norm'),
      test = "Welcome!!!";
  norm.innerHTML=norm.innerHTML==test?"Are You New Here?":test;
};
相关文章：