0

Si la etiqueta h3 está visible (etiqueta entera, no solo el valor), debe ocultar el h1. Si la etiqueta h3 está oculto, debe mostrar h1

Por algún error, no me hace caso o no leer si la etiqueta h3 está o no está visible.

html:

<h1 id="titleH1" style="visibility: hidden;">¡Felicidades has completado todas las preguntas!</h1>


<h3 id="titleH3" class="h4 mb-3 font-weight-normal text-secondary">{{ tes.nameModality }}</h3>

javascript:

<script>
var vartitleH1=document.getElementById('titleH3').innerHTML;
    if(vartitleH1){
      if(vartitleH1==null){
      document.getElementById('titleH1').style.visibility=visible;
      }
    }
</script>

2 respuestas 2

1

hay varias cosas que debes cambiar en tu codigo para que funcione, pero se puede lograr de varias formas, segun lo que entiendo de la pregunta, quieres condicionar si un elemento se ve el otro no y biceversa. asi que una forma seria hacer un condicional de clases. usando las funcion de JS, "classList" .documentacion classList, pudes ver la docu, se pueden hacer varias cosas con esa funncion, hacer toogle de las clases por ejemplo, etc. espero te sirva.

//JS

let titleH3 = document.getElementById("titleH3");
let titleH1 = document.getElementById("titleH1");  
if (titleH3.classList.contains("visible")) {
 
  titleH1.classList.add("noVisible");
  
}
.visible {
  display: block;
}
.noVisible {
  display: none;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Ejmplo</title>
    <meta charset="UTF-8" />
  </head>

  <body>
   

    <h1 id="titleH1" class="">
      ¡Felicidades has completado todas las preguntas!
    </h1>

    <h3 id="titleH3" class="visible h4 mb-3 font-weight-normal text-secondary">
      H3
    </h3>
    <script src="src/index.js"></script>
  </body>
</html>

1

Como recomendación, mejor trabaja con display, ya que con visibility el elemento seguirá ocupando espacio aunque no sea visible y podría dar una apariencia extraña.

Ahora, también puedes apoyarte en el uso de clases, hace el código un poco más largo pero le da mejor legibilidad a todo el proceso.

Después pudes jugar con las clases según el valor que tengas en tu etiqueta H3. La función toggle() simplemente cambiarás las clases e invocará a la función showOrHide(), que es la que contiene la lógica para decidir si se muestra una u otra etiqueta. Luego podrías reemplazar la función -toggle()- (o cambiar su comportamiendo) para que en lugar de hacer un cambio, asigne la clase correspondiente según el valor de H3.

const tagH1 = document.getElementById("titleH1");
const tagH3 = document.getElementById("titleH3");

function showOrHide() {
  const isH1Hidden = tagH1.classList.contains('hidden');

  console.log(`Es H1 visible? ${!isH1Hidden ? 'Si': 'No'}`);

  if (isH1Hidden) {
    tagH3.classList.remove('hidden');
    tagH3.classList.add('visible');
  } else {
    tagH3.classList.add('hidden');
    tagH3.classList.remove('visible');
  }
}

showOrHide();

function toggle() {
  const isH1Visible = tagH1.classList.contains('visible');
  if (isH1Visible) {
    tagH1.classList.add('hidden');
    tagH1.classList.remove('visible');
  } else {
    tagH1.classList.remove('hidden');
    tagH1.classList.add('visible');
  }
  showOrHide();
}
.hidden {
  display: none;
}

.visible {
  display: block;
}
<h1 id="titleH1" class="hidden">¡Felicidades has completado todas las preguntas!</h1>


<h3 id="titleH3" class="visible h4 mb-3 font-weight-normal text-secondary">{{ tes.nameModality }}</h3>

<button onClick="toggle()">Toggle</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.