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

时间:2015-02-15 06:34:50

标签: javascript html events onclick

我正在学习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问题

2 个答案:

答案 0 :(得分:1)

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!!!";

那应该这样做。

答案 1 :(得分:0)

不是最好的方式,但肯定是用最少的努力,尝试这样的事情:

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