Estoy tratando de cambiar el color del texto según el valor del número.
<?php $secure_num = 8; $price_num = 4; <script> function change_color_text (num1) { var rate_num = num1; if(rate_num >= 7) { rate_num.style.color = "#008000"; // green } else if (rate_num >= 4) { rate_num.style.color = " #FFFF00"; // yellow } else { rate_num.style.color = " #FF0000"; // red } return rate_num; } </script> <figure class="wp-block-table"> <table> <thead> <tr> <th>Service Rate</th> <th class="has-text-align-center" data-align="center">Status</th> </tr> </thead> <tbody> <tr> <td>Secure Rate</td> <td class="has-text-align-center" data-align="center"><div class="Secure-Rate"><?php echo "<script> change_color_text($secure_num); </script>"?></div></td> </tr> <tr> <td>Price Rate</td> <td class="has-text-align-center" data-align="center"><div class="Price-Rate"><?php echo "<script> change_color_text($price_num); </script>"?></div></td> </tr> </tbody> </table> </figure> ?>Entonces, lo que estoy tratando de hacer es que si $numero_seguro es 8, entonces el número '8' (color verde) debería repetirse, y si $número_precio es 4, entonces el número '4' (rojo) debería repetirse en el pantalla. No uso el formato html porque estoy escribiendo este código en el código del tema de wordpress (principalmente archivo php).
Este código definitivamente dará un error, "no se puede leer el valor de indefinido"
Esto tiene que ver con la manipulación del DOM. En este código, el motor de JavaScript no comprende qué color de estilo de elemento está tratando de cambiar.
Una forma de arreglar esto será
const rate_num = document.querySelector(".class")Donde .class es el nombre de clase de cualquier texto que esté tratando de cambiar en el HTML.
puedes escribir esto
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="demo"></div> <script> function change_color_text (num1) { var rate_num = num1; if(rate_num >= 7) { document.getElementById('demo').innerHTML="green"; document.getElementById('demo').style.color="green"; } else if (rate_num >= 4) { document.getElementById('demo').innerHTML="yellow"; // yellow document.getElementById('demo').style.color="yellow"; } else { document.getElementById('demo').innerHTML="red" // red; document.getElementById('demo').style.color="red"; } return rate_num; } </script> </body> </html> <?php echo "<script> change_color_text(8) </script>"?>