Todavía soy nuevo, así que perdónenme si esta pregunta es demasiado trivial o si el tema ya se ha discutido. No encontré nada específico, lo que me llevó a abrir una nueva pregunta. Dicho esto, así es como funciona:
Estoy pasando valores de mi base de datos a atributos de datos para usarlos en javascript para alterar el ancho de ciertos elementos (es decir, gráficos). El elemento que debe modificarse de acuerdo con el valor recuperado es una etiqueta p (junto con otros, se encuentra dentro de un foreach):
<span class="fdpg-nut-vline"><p class="fdpg-nut-graph" id="graph" data-somedat="<?php echo "'" . $value['Nu_Val'] . "%'" ?>"></p></span>El valor del atributo de datos con el nombre "somedat" que quiero usar en js, así:
var somevar = document.getElementById('graph').getAttribute("data-somedat"); document.getElementById("graph").style.width = somevar;¿Lo que hice?
var somevartest = '20%'; y lo usé en el código anterior. Funcionó y el gráfico cambió en consecuencia.¿Qué es lo que no estoy recibiendo? ¿Cómo puedo solucionar mi problema?
La forma correcta de pasar datos de PHP a JavaScript es usando una cadena JSON.
PHP:
<?php $arr = get_from_database_as_array(...); // at end of page before your scripts: echo "<script>"; echo "var data = " . json_encode($arr, true) . ";"; echo "</script>";HTML:
<script> console.log(data); document.getElementById("elem1").style.width = data["elem1"] + "px"; document.getElementById("elem2").style.width = data["elem2"] + "px"; // and so on. </script>