samedi 20 février 2016

How to simplify my javascript code, it seems too long and messy?

This code basically makes 7 a tags on my page, onclick, change the content of another div tag. The code works but it's too long. I am thinking maybe something to do with else if statements, but I am new to javascript and I don't think I am there yet.

<script>
            function showBaseChakra(text) {
                if(text.id == "baseChakra") {
                    document.getElementById("baseChakraInfo").style.display = "block";
                    document.getElementById("defaultText").style.display = "none";
                    document.getElementById("sacralChakraInfo").style.display = "none";
                    document.getElementById("solarPlexusChakraInfo").style.display = "none";
                    document.getElementById("heartChakraInfo").style.display = "none";
                    document.getElementById("throatChakraInfo").style.display = "none";
                    document.getElementById("browChakraInfo").style.display = "none";
                    document.getElementById("crownChakraInfo").style.display = "none";
                }
            }

            function showSacralChakra(text) {
                if(text.id == "sacralChakra") {
                    document.getElementById("sacralChakraInfo").style.display = "block";
                    document.getElementById("defaultText").style.display = "none";
                    document.getElementById("baseChakraInfo").style.display = "none";
                    document.getElementById("solarPlexusChakraInfo").style.display = "none";
                    document.getElementById("heartChakraInfo").style.display = "none";
                    document.getElementById("throatChakraInfo").style.display = "none";
                    document.getElementById("browChakraInfo").style.display = "none";
                    document.getElementById("crownChakraInfo").style.display = "none";
                }
            }

            function showSolarPlexusChakra(text) {
                if(text.id == "solarPlexusChakra") {
                    document.getElementById("solarPlexusChakraInfo").style.display = "block";
                    document.getElementById("defaultText").style.display = "none";
                    document.getElementById("baseChakraInfo").style.display = "none";
                    document.getElementById("sacralChakraInfo").style.display = "none";
                    document.getElementById("heartChakraInfo").style.display = "none";
                    document.getElementById("throatChakraInfo").style.display = "none";
                    document.getElementById("browChakraInfo").style.display = "none";
                    document.getElementById("crownChakraInfo").style.display = "none";
                }
            }

            function showHeartChakra(text) {
                if(text.id == "heartChakra") {
                    document.getElementById("heartChakraInfo").style.display = "block";
                    document.getElementById("defaultText").style.display = "none";
                    document.getElementById("baseChakraInfo").style.display = "none";
                    document.getElementById("sacralChakraInfo").style.display = "none";
                    document.getElementById("solarPlexusChakraInfo").style.display = "none";
                    document.getElementById("throatChakraInfo").style.display = "none";
                    document.getElementById("browChakraInfo").style.display = "none";
                    document.getElementById("crownChakraInfo").style.display = "none";
                }
            }

            function showThroatChakra(text) {
                if(text.id == "throatChakra") {
                    document.getElementById("throatChakraInfo").style.display = "block";
                    document.getElementById("defaultText").style.display = "none";
                    document.getElementById("baseChakraInfo").style.display = "none";
                    document.getElementById("sacralChakraInfo").style.display = "none";
                    document.getElementById("solarPlexusChakraInfo").style.display = "none";
                    document.getElementById("heartChakraInfo").style.display = "none";
                    document.getElementById("browChakraInfo").style.display = "none";
                    document.getElementById("crownChakraInfo").style.display = "none";
                }
            }

            function showBrowChakra(text) {
                if(text.id == "browChakra") {
                    document.getElementById("browChakraInfo").style.display = "block";
                    document.getElementById("defaultText").style.display = "none";
                    document.getElementById("baseChakraInfo").style.display = "none";
                    document.getElementById("sacralChakraInfo").style.display = "none";
                    document.getElementById("solarPlexusChakraInfo").style.display = "none";
                    document.getElementById("heartChakraInfo").style.display = "none";
                    document.getElementById("throatChakraInfo").style.display = "none";
                    document.getElementById("crownChakraInfo").style.display = "none";
                }
            }

            function showCrownChakra(text) {
                if(text.id == "crownChakra") {
                    document.getElementById("crownChakraInfo").style.display = "block";
                    document.getElementById("defaultText").style.display = "none";
                    document.getElementById("baseChakraInfo").style.display = "none";
                    document.getElementById("sacralChakraInfo").style.display = "none";
                    document.getElementById("solarPlexusChakraInfo").style.display = "none";
                    document.getElementById("heartChakraInfo").style.display = "none";
                    document.getElementById("throatChakraInfo").style.display = "none";
                    document.getElementById("browChakraInfo").style.display = "none";
                }
            }
        </script>




Aucun commentaire:

Enregistrer un commentaire