如何缩短简化Javascript代码来制作交互式文本?

问题描述 投票:0回答:1

我写了这段简单的代码来做一个交互式的文字应用。这个文本会更长,更复杂,我相信我可以把它做得更简单(例如,使用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>
javascript html text interactive
1个回答
0
投票

你是否记得将你传递给onclick属性的函数用双引号包起来,将你传递给showText()函数的字符串值用单引号包起来?

例如

<button onclick="showText('highBP')">High Blood Pressure</button>
© www.soinside.com 2019 - 2024. All rights reserved.