Hola, creo que esto es muy fácil, pero parece que no puedo ramita en este momento. Quiero usar una función de javascript para establecer la visibilidad de una etiqueta html. Me doy cuenta de que lo siguiente es incorrecto, ya que hidden no toma un valor booleano. Solo estoy luchando para hacer clic en cuál es la forma más fácil de hacerlo.
Así que tengo un script como este
<script> function evaluateBoolean() { if (location.hostname.indexOf("someval" > 0) { return true; } else { return false; } </script>y quería usar algo como esto
<div hidden="evaluateBoolean()"> this will be shown or displayed depending on the javascript boolean </div>No puede ejecutar js explícitamente en su html, si no está utilizando ningún marco como angular o reaccionar, donde se permite el enlace de propiedad.
Para lograr sus intenciones con js, puede usar este enfoque:
Agregue a su div una identificación:
<div id="myDiv"> Toggled div </div>En su secuencia de comandos js, modifique su función evaluarBoleean() para mostrar/ocultar el elemento:
function evaluateBoolean() { const div = document.querySelector("#myDiv"); if (location.hostname.indexOf("someval" > 0) { div.hidden = true; } else { div.hidden = false; }Hay una opción muy fácil:--> tener un texto en blanco primero reemplaza el código html con esto:-->
<div hidden="evaluateBoolean()" id="ThingToBeHidden"> this will be shown or displayed depending on the javascript boolean </div>y poner código js:-->
document.getElementById("ThingToBeHidden").innerHTML = "";Así que ha asignado el div para que tenga una identificación especial que ningún otro elemento tiene. Entonces, ahora el código js selecciona el div con esa identificación y luego establece el contexto en blanco. Si desea que el texto vuelva a aparecer, el código js es:-->
document.getElementById("ThingToBeHidden").innerHTML = "this will be shown or displayed depending on the javascript boolean";Recomendaría hacerlo modificando el estilo de visualización en el código JavaScript.
const el = document.getElementById('container'); const btn = document.getElementById('btn'); btn.addEventListener('click', function handleClick() { if (el.style.display === 'none') { el.style.display = 'block'; btn.textContent = 'Hide element'; } else { el.style.display = 'none'; btn.textContent = 'Show element'; } });