我写了这段简单的代码来做一个交互式的文字应用。这个文本会更长,更复杂,我相信我可以把它做得更简单(例如,使用1个函数代替许多函数)。我相信我可以把它简化(例如,使用一个函数而不是很多),但我不知道如何做。
我希望得到任何帮助。
先谢谢你
function showHighBP() {
var x = document.getElementById("highBP");
if (x.style.display == "none" || x.style.display == "") {
document.getElementById("diabetes").style.display = "none";
document.getElementById("asthma").style.display = "none";
x.style.display = "inline";
} else {
x.style.display = "none";
}
}
function showDiabetes() {
var x = document.getElementById("diabetes");
if (x.style.display == "none" || x.style.display == "") {
document.getElementById("highBP").style.display = "none";
document.getElementById("asthma").style.display = "none";
x.style.display = "inline";
} else {
x.style.display = "none";
}
}
function showAsthma() {
var x = document.getElementById("asthma");
if (x.style.display == "none" || x.style.display == "") {
document.getElementById("highBP").style.display = "none";
document.getElementById("diabetes").style.display = "none";
x.style.display = "inline";
} else {
x.style.display = "none";
}
}
.hidden {
display: none;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick=showHighBP()>High Blood Pressure</button>
<button onclick=showDiabetes()>Diabetes</button>
<button onclick=showAsthma()>Asthma</button>
<br/>
<p>
<span>The diagnosis is</span>
<span class="hidden" id="highBP">high blood pressure.</span>
<span class="hidden" id="diabetes">diabetes.</span>
<span class="hidden" id="asthma">asthma.</span>
</p>
</body>
</html>
你是否记得将你传递给onclick属性的函数用双引号包起来,将你传递给showText()函数的字符串值用单引号包起来?
例如
<button onclick="showText('highBP')">High Blood Pressure</button>