Tengo este código, repitiendo 20 veces con solo cambio de prefijo de variables. ¿Cómo puedo hacer un bucle e iterarlo para evitar este enorme bloque de código? Se utiliza en mi sitio web y quiero que el proceso de desarrollo sea más claro.
var keepElements = document.getElementsByName("keep-type"); for(var i = 0; i < keepElements.length; i++){ keep = document.getElementById(keepElements[i].value); if(keepElements[i].checked == true){ keep.style.display = "block"; } else{keep.style.display = "none";} } var offworkshopElements = document.getElementsByName("offworkshop-type"); for(var i = 0; i < offworkshopElements.length; i++){ offworkshop = document.getElementById(offworkshopElements[i].value); if(offworkshopElements[i].checked == true){ offworkshop.style.display = "block"; } else{offworkshop.style.display = "none";} } var defworkshopElements = document.getElementsByName("defworkshop-type"); for(var i = 0; i < defworkshopElements.length; i++){ defworkshop = document.getElementById(defworkshopElements[i].value); if(defworkshopElements[i].checked == true){ defworkshop.style.display = "block"; } else{defworkshop.style.display = "none";} }Mover la lógica a una función:
function keepElements(name) { var keepElements = document.getElementsByName(name); for (var i = 0; i < keepElements.length; i++) { keep = document.getElementById(keepElements[i].value); if (keepElements[i].checked == true) { keep.style.display = "block"; } else { keep.style.display = "none"; } } } keepElements("keep-type"); keepElements("offworkshop-type"); keepElements("defworkshop-type");Las respuestas que dicen que debe poner la funcionalidad común en una sola función son absolutamente correctas.
Solo quería agregar que también hay soluciones en el lado de la consulta de las cosas:
podría recopilar todos los elementos en una función javascript, querySelectorAll()
const elements = document.querySelectorAll('[name="keep-type"], [name="offworkshop-type"], [name="defworkshop-type"]')Alternativamente, podría darles a todos la misma clase y seleccionar por esa clase.
const elements = document.getElementsByClassName("requiredElements");Y de esta manera tienes todos tus elementos en una matriz.
Si no me perdí ningún detalle, estás repitiendo el mismo bloque 3 veces:
["keep-type", "offworkshop-type", "defworkshop-type"].forEach(name => { var elements = document.getElementsByName(name); for(var i = 0; i < elements.length; i++){ element = document.getElementById(elements[i].value); if(elements[i].checked == true){ element.style.display = "block"; } else{element.style.display = "none";} } });Prefiero la sintaxis array / forEach, porque el bloque comienza con la lista de nombres. Pero podrías usar un bucle for...of en su lugar.
for (const name of ["keep-type", "offworkshop-type", "defworkshop-type"]) { var elements = document.getElementsByName(name); for(var i = 0; i < elements.length; i++){ element = document.getElementById(elements[i].value); if(elements[i].checked == true){ element.style.display = "block"; } else{element.style.display = "none";} } }