I'm trying to get some advice regarding my Javascript code. It works fine but I'm pretty certain that it's overworked and can/could be scaled down.
As of now I have 4 div elements (#5gb, #15gb, #30gb and #100gb) and 4 buttons. Each button triggers one of the four functions, showing one div and hiding the three others.
Is this proper done or do you have any other solution that doesn't require as much code.
Code below:
<script>
function loaded() {
document.getElementById("5gb").style.display = "block";
document.getElementById("15gb").style.display = "none";
document.getElementById("30gb").style.display = "none";
document.getElementById("100gb").style.display = "none";
}
</script>
<script>
function ab5gb() {
document.getElementById("5gb").style.display = "block";
document.getElementById("15gb").style.display = "none";
document.getElementById("30gb").style.display = "none";
document.getElementById("100gb").style.display = "none";
}
function ab15gb() {
document.getElementById("5gb").style.display = "none";
document.getElementById("15gb").style.display = "block";
document.getElementById("30gb").style.display = "none";
document.getElementById("100gb").style.display = "none";
}
function ab30gb() {
document.getElementById("5gb").style.display = "none";
document.getElementById("15gb").style.display = "none";
document.getElementById("30gb").style.display = "block";
document.getElementById("100gb").style.display = "none";
}
function ab100gb() {
document.getElementById("5gb").style.display = "none";
document.getElementById("15gb").style.display = "none";
document.getElementById("30gb").style.display = "none";
document.getElementById("100gb").style.display = "block";
}
</script>
<button onclick="ab5gb()">5 GB</button>
<button onclick="ab15gb()">15 GB</button>
<button onclick="ab30gb()">30 GB</button>
<button onclick="ab100gb()">100 GB</button>
By having one function and passing a parameter would be better. Something like following.
<script>
function loaded() {
document.getElementById("5gb").style.display="block";
document.getElementById("15gb").style.display="none";
document.getElementById("30gb").style.display="none";
document.getElementById("100gb").style.display="none";
}
function ab(param) {
document.getElementById("5gb").style.display="none";
document.getElementById("15gb").style.display="none";
document.getElementById("30gb").style.display="none";
document.getElementById("100gb").style.display="none";
document.getElementById(param).style.display="block";
}
</script>
<button onclick="ab('5gb')">5 GB</button>
<button onclick="ab('15gb')">15 GB</button>
<button onclick="ab('30gb')">30 GB</button>
<button onclick="ab('100gb')">100 GB</button>
Use the toggle method from the select element which will add and remove the class.
const ele = document.getElementById("5gb");
ele.classList.toggle('display-none')
//css
.display-none { display: 'none' }
Note - add default css as display-block
You can do this in one function instead of four:
<script>
function loaded(id){
document.getElementById("5gb").style.display="none";
document.getElementById("15gb").style.display="none";
document.getElementById("30gb").style.display="none";
document.getElementById("100gb").style.display="none";
document.getElementById(id).style.display="block";
}
</script>
<button onclick="loaded(document.getElementById('5gb').id)">5 GB</button>
<button onclick="loaded(document.getElementById('15gb').id)">15 GB</button>
<button onclick="loaded(document.getElementById('30gb').id)">30 GB</button>
<button onclick="loaded(document.getElementById('100gb').id)">100 GB</button>