2

Quería saber cómo puedo hacer para comparar el valor que tiene una etiqueta h1 con id="titulo" que cambiara por unas cadena de texto dentro de un array al hacer click con un botón, con un String. Va a tener varias validacion por lo cual me gustaria hacerlo de una manera que sea legible y entendible. Les dejo un link de codepen donde lo estoy haciendo.

```
<div class="container text-center py-1">
    <h1 id="titulo" class="display-3 py-5">No toques el boton rojo</h1> 
    <button id="boton" class="btn btn-danger p-3">Boton</button>
</div>
let titulo = document.getElementById("titulo");
let boton = document.getElementById("boton");

let fraces = [
  'Dije que no lo presiones',
  'Me cansaste...',
  'Mira! Te lo hice invisible, que vas hacer ahora ?',
  'Te odio.'
];


//Cambiar el titulo al hacer click
boton.onclick = function(){
  next();
}

//Cambiar el titulo

let pos = -1;
function next(){
  pos = pos + 1; 
  let nextFraces = fraces[pos];
  titulo.innerHTML = nextFraces;
 }; 

//Ejecuciones segun el valor del titulo
  
  if( titulo.textContent == 'Mira! Te lo hice invisible, que vas hacer ahora ?'){
    boton.style.transition = "all 0.5s";
    boton.style.opacity = "0";
    }else{
    boton.style.opacity = "1";
    boton.style.transition = "all 0s";
    };
4
  • Cual es la etiqueta que intentas obtener, cual es el obtivo final en tu cliente, en que linea intentas hacerlo , porfavor define ese tipo de cosas Commented el 16 feb. 2022 a las 16:09
  • Perdon, soy nuevo en esto. La etiqueta h1 con id="titulo" y lo quiero comparar en el if, pero al comparar no se ejecuta el código.
    – Rocks
    Commented el 16 feb. 2022 a las 16:13
  • ya te entendi , ya te subo la respuesta Commented el 16 feb. 2022 a las 16:20
  • @Rocks pulsa en editar y agrega los detalles en la pregunta. Lee Cómo preguntar y haz el recorrido de bienvenida para conocer el funcionamiento del sitio.
    – padaleiana
    Commented el 16 feb. 2022 a las 16:37

2 respuestas 2

1

Buen día,

Lo que sucede es que el if no está en una función, por lo tanto se evalúa una sola vez

Para que puedas evaluarlo cada vez que el texto cambia puedes ponerlo adentro de tu función next() de esa forma ya puede comparar el texto de titulo

Otra opción es crear otra función para comparar el texto y llamar esa función dentro de next()

Puedes utilizar switch() dentro de tu función para comparar con varios string, puedes aprender más aquí

let boton = document.getElementById("boton");

let fraces = [
  'Dije que no lo presiones',
  'Me cansaste...',
  'Mira! Te lo hice invisible, que vas hacer ahora ?',
  'Te odio.'
];


//Cambiar el titulo al hacer click
boton.onclick = function(){
  next();
}

//Cambiar el titulo

let pos = -1;
function next(){
  pos = pos + 1; 
  let nextFraces = fraces[pos];
  titulo.innerHTML = nextFraces;
  compara(titulo.textContent)
 }; 

//Ejecuciones segun el valor del titulo

function compara(texto){
    switch(texto){
   case 'Mira! Te lo hice invisible, que vas hacer ahora ?':
    boton.style.transition = "all 0.5s";
    boton.style.opacity = "0";
   break;
   default:
    boton.style.opacity = "1";
    boton.style.transition = "all 0s";
    break;
  }
}
  
<div class="container text-center py-1">
    <h1 id="titulo" class="display-3 py-5">No toques el boton rojo</h1> 
    <button id="boton" class="btn btn-danger p-3">Boton</button>
</div>

5
  • Ah ok, muchas gracias. Pero se puede hacerlo sin meterlo dentro de la funcion next() ? porque mi idea es hacerlo en varias string y esa función se va a volver muy grande. Perdon por preguntar, soy nuevo en esto
    – Rocks
    Commented el 16 feb. 2022 a las 16:15
  • @Rocks, Acabo de editar la respuesta usando una función aparte para compararlo, te recomiendo utilizar switch() si aún no sabes como funciona también te puse un URL para que puedas revisar como funciona Commented el 16 feb. 2022 a las 16:22
  • Ah ok , muchas gracias, pero entonces cada vez que quiera comparar con otro string tengo que llamar a esa función ?
    – Rocks
    Commented el 16 feb. 2022 a las 16:29
  • @Rocks, Dentro de la función puedes poner varios case con todos los string que quieras utilizar, en tu función next() automáticamente se envía el texto actual de titulo a la función compara() y evalúa el case que es igual al texto de titulo. La otra opción, como comenté es poner el if o case adentro de tu función next() y comparar ahí Commented el 16 feb. 2022 a las 16:32
  • Ah perfecto, muchas gracias enserio por tu tiempo
    – Rocks
    Commented el 16 feb. 2022 a las 16:42
0

Como lo estas trabajando cada acción nueva está dentro de tu funcion next() puedes hacerlo ahi como te indicaron o en el momento de hacer click, removi tu if del final y lo meti en el evento click

    let titulo = document.getElementById("titulo");
let boton = document.getElementById("boton");

let fraces = [
  'Dije que no lo presiones',
  'Me cansaste...',
  'Mira! Te lo hice invisible, que vas hacer ahora ?',
  'Te odio.'
];


//Cambiar el titulo al hacer click
boton.onclick = function(){
  
  next();
   if( titulo.textContent == 'Mira! Te lo hice invisible, que vas hacer ahora ?'){
    boton.style.transition = "all 0.5s";
    boton.style.opacity = "0";
    }else{
    boton.style.opacity = "1";
    boton.style.transition = "all 0s";
    };
}

//Cambiar el titulo

let pos = -1;
function next(){
  pos = pos + 1; 
  let nextFraces = fraces[pos];
  titulo.innerHTML = nextFraces;
 };
6
  • Ok ok, muchas gracias por tu respuesta, entonces todos los if los pondre en el evento click ?
    – Rocks
    Commented el 16 feb. 2022 a las 16:32
  • Si, o despues de este llamas otra funcion que haga las validaciones y las pones ahi, lo importante es quie llames la nueva funcion depues de next Commented el 16 feb. 2022 a las 16:35
  • Perfecto, ahora entiendo todo mejor, muchas gracias por tu tiempo y la respuesta :)
    – Rocks
    Commented el 16 feb. 2022 a las 16:43
  • Si te srivio no olvides marcar como respuesta Commented el 16 feb. 2022 a las 16:43
  • @Rocks, Si te ha servido alguna de las respuestas dadas no olvides aceptarla, de esa forma ayudas a otros usuarios a encontrar la solución a preguntas similares y ayudas a la comunidad a mantener abiertas únicamente las preguntas que no han sido resueltas Commented el 16 feb. 2022 a las 17:01

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.