Como hago: Boton que cambia de color según el contenido dentro

  • Autor Autor gusta1996
  • Fecha de inicio Fecha de inicio
gusta1996

gusta1996

Delta
Verificación en dos pasos activada
hola, soy un aficionado a la programación, por lo que se un poco html y css pero no se mucho sobre php y javascript, así que les agradecería que me enseñaran como hacer un botón que cambie de color según lo que tenga escrito dentro

Esto es lo que trato de hacer:

si el botón lleva escrito dentro:
(Estado: En emision) ---> que el color del boton sea verde
pero si el boton lleva escrito:
(Esttado: finalizado) ----> que el color del boton sea rojo

Aqui les dejo el link donde tengo el boton (el boton solo tiene html y css):
en.megaanime.org

MAJUTSUSHI ORPHEN HAGURE TABI mega - Mega-Anime

☑️ MEGA ☑️ VERSION LIGERA Carpeta contenedora (01 – 02) Episodio 03 VERSION HD Carpeta contenedora (01 – 02) Episodio 03 ☑️ MEDIAFIRE ☑️ VERSION LIGERA Carpeta contenedora (01 – 02) Episodio 03 VERSION HD Carpeta contenedora (01 – 02) Episodio 03
en.megaanime.org en.megaanime.org

aqui una imagen del boton (el boton solo tiene html y css):

Captura.webp


Les agradesco de antemano 🙂
 
<?php

if ('Estado: En emision' ) {
$btnAColocar = '<input onClick="#" type=button value="Estado: En emision" name="boton"
style="BACKGROUND-COLOR: #01e632">'; //COLOR VERDE
}elseif('Esttado: finalizado'){
$btnAColocar = '<input onClick="#" type=button value="Estado: En emision" name="boton"
style="BACKGROUND-COLOR: #ec0000">'; //COLOR ROJO
}
?>
 
existen muchas soluciones posibles, pero, partiendo que no sabes mucho de programación, te voy a poner lo fácil, el código para que pegues antes del </html>
JavaScript: 
var status = document.querySelector('.anime-emision').textContent.trim();

if (status == 'ESTADO: En emision') {
    document.querySelector('.anime-emision').setAttribute("style", "background:green;color:white;");
}
else {
    document.querySelector('.anime-emision').setAttribute("style", "background:blue;color:white;");
}
solo cambia los valores por los colores que quieras, tanto en HEX, RGB/A.
recuerda pegar el código dentro de un <script>código</script>
 
Agarra el código de @oscarcweb, siempre es mejor que uses js del navegador para que tu servidor no trabaje.
 
oscarcweb dijo:
existen muchas soluciones posibles, pero, partiendo que no sabes mucho de programación, te voy a poner lo fácil, el código para que pegues antes del </html>
JavaScript: 
var status = document.querySelector('.anime-emision').textContent.trim();

if (status == 'ESTADO: En emision') {
    document.querySelector('.anime-emision').setAttribute("style", "background:green;color:white;");
}
else {
    document.querySelector('.anime-emision').setAttribute("style", "background:blue;color:white;");
}
solo cambia los valores por los colores que quieras, tanto en HEX, RGB/A.
recuerda pegar el código dentro de un <script>código</script>
Hacer clic para expandir...

No se porque no funciona te dejare una imagen del codigo html que tengo puesto para el boton, talves asi podras ver cual es el problema 🙂

1579975318090.png
 
gusta1996 dijo:
No se porque no funciona te dejare una imagen del codigo html que tengo puesto para el boton, talves asi podras ver cual es el problema 🙂

Ver el archivo adjunto 202062
Hacer clic para expandir...
Eso ocurre, por que no puedes poner el código que te pase antes de que se muestre tu botón, por que no existe. Tienes que colocar el código que te puse, debajo de lo que marcaste en rojo, o en su defecto, en el footer.php antes del </html>
Saludos
 
Exactamente, el código JS debe ir en este caso después del código del botón.
 
oscarcweb dijo:
Eso ocurre, por que no puedes poner el código que te pase antes de que se muestre tu botón, por que no existe. Tienes que colocar el código que te puse, debajo de lo que marcaste en rojo, o en su defecto, en el footer.php antes del </html>
Saludos
Hacer clic para expandir...
Gracias ahora si funciona 🙂 , aunque hubo un pequeño error pero lo corregí xd

<script>
var status = document.querySelector('.anime-emision').textContent.trim();

if (status == 'ESTADO: En emision') {
document.querySelector('.anime-emision').setAttribute("style", "background:#6FEA40; color:white;");
}
else if (status == 'ESTADO: Finalizado') {
document.querySelector('.anime-emision').setAttribute("style", "background:#EA4040; color:white;");
}
else if (status == 'ESTADO: Pelicula') {
document.querySelector('.anime-emision').setAttribute("style", "background:#FF983F; color:white;");
}
else if (status == 'ESTADO: Ova') {
document.querySelector('.anime-emision').setAttribute("style", "background:#e3e3e3; color:white;");
}
</script>
 
gusta1996 dijo:
Gracias ahora si funciona 🙂 , aunque hubo un pequeño error pero lo corregí xd

<script>
var status = document.querySelector('.anime-emision').textContent.trim();

if (status == 'ESTADO: En emision') {
document.querySelector('.anime-emision').setAttribute("style", "background:#6FEA40; color:white;");
}
else if (status == 'ESTADO: Finalizado') {
document.querySelector('.anime-emision').setAttribute("style", "background:#EA4040; color:white;");
}
else if (status == 'ESTADO: Pelicula') {
document.querySelector('.anime-emision').setAttribute("style", "background:#FF983F; color:white;");
}
else if (status == 'ESTADO: Ova') {
document.querySelector('.anime-emision').setAttribute("style", "background:#e3e3e3; color:white;");
}
</script>
Hacer clic para expandir...
Me alegro que te haya funcionado.
El código que te pase no tiene ningún error, que error has tenido?
 
gusta1996 dijo:
Faltaba de poner "if" despues de cada "else "
Hacer clic para expandir...
jaja eso no es un error, eso es que tu quisiste poner más condiciones, tal como lo puse, solamente se ejecutan 2, una en la que hago una conparación (if) y otra que cualquier otra cosa (else). else if es para añadir más comparaciones; como pediste dos botones, te puse 2.
Saludos
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba