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

Question

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

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

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

<!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 到问题

Answer 1

不是最好的方法，但肯定是最省力的方法，试试这样的方法：

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;
};

Answer 2

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

2) 学习ternary operator。变化

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

至

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

这样就可以了。

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

Consecutive onclick events on same button triggering separate scripts

html

javascript

events

onclick