Tengo dos botones HTML, cada uno vinculado a una función específica de JavaScript. El primer botón activa una función codificada así:

 function add() { var newScript = document.createElement("script"); newScript.src = "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"; document.head.appendChild(newScript); }

El segundo botón activa la siguiente función:

 function draw() { const ctx = document.getElementById('myChart').getContext('2d'); const myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } });

En la función número 2, estoy usando una muestra de www.chartjs.org . Para funcionar necesita que la página tenga cargado el script al que se refiere la primera función.

Después de hacer clic en el botón 1 y luego en el botón 2, espero ver en mi elemento principal un elemento de secuencia de comandos, src=https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart .js, que veo, a través de la consola del navegador.

En mi página, espero ver (después de hacer clic en mi segundo botón) un gráfico producido por el código ChartJS. Falta este mismo elemento. En cambio, tengo un error en mi consola que dice: 'El gráfico no está definido en HTMLButtonElement.draw'

¿Por qué tengo este error? ¿Por qué no aparece mi gráfico?

Gracias por visitarnos :) (y)