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

gusta1996 · 25 Ene 2020

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):

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

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

Les agradesco de antemano

DJBreak · 25 Ene 2020

<?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
}
?>

oscarcweb · 25 Ene 2020

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>

jarri1999 · 25 Ene 2020

Agarra el código de @oscarcweb, siempre es mejor que uses js del navegador para que tu servidor no trabaje.

gusta1996 · 25 Ene 2020

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>

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

oscarcweb · 25 Ene 2020

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

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

Kaiba · 25 Ene 2020

Exactamente, el código JS debe ir en este caso después del código del botón.

gusta1996 · 25 Ene 2020

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

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>

oscarcweb · 25 Ene 2020

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>

Me alegro que te haya funcionado.
El código que te pase no tiene ningún error, que error has tenido?

gusta1996 · 26 Ene 2020

oscarcweb dijo:
Me alegro que te haya funcionado.
El código que te pase no tiene ningún error, que error has tenido?

Faltaba de poner "if" despues de cada "else "

oscarcweb · 26 Ene 2020

gusta1996 dijo:
Faltaba de poner "if" despues de cada "else "

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