我正在学习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问题
答案 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;
};