Estoy tratando de obtener algunos consejos sobre mi código Javascript. Funciona bien, pero estoy bastante seguro de que está sobrecargado de trabajo y puede/podría reducirse.
A partir de ahora tengo 4 elementos div (#5gb, #15gb, #30gb y #100gb) y 4 botones. Cada botón activa una de las cuatro funciones, mostrando un div y ocultando los otros tres.
¿Está bien hecho o tiene alguna otra solución que no requiera tanto código?
Código a continuación:
<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>Al tener una función y pasar un parámetro sería mejor. Algo así como seguir.
<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 el método de alternancia del elemento de selección que agregará y eliminará la clase.
const ele = document.getElementById("5gb"); ele.classList.toggle('display-none') //css .display-none { display: 'none' }Nota: agregue css predeterminado como bloque de visualización
Puede hacer esto en una función en lugar de cuatro:
<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>