Soy nuevo en javascript y estoy tratando de hacer un gráfico circular que obtenga la entrada del usuario .
Hice lo que pensé que era correcto pero no sale el gráfico.
Cuando pongo la variable no reconoce el código que he puesto aunque ya he importado el Chart.js usando CDN, que proporcionan en su web.
function buttonClicked() { let timeSpend = document.getElementsByClassName("time_spend"); let breakTime = document.getElementsByClassName("break_time"); let fSubject = document.getElementsByClassName("first_subjects"); let sSubject = document.getElementsByClassName("second_subjects"); let tSubject = document.getElementsByClassName("third_subjects"); } let myChart = document.getElementById('myChart').getContext('2d'); let pieChart = new Chart(myChart), { type:'pie', data: { labels: ['Time spend', 'Break Time', 'First Subject', 'Second Subject', 'Third Subject'], datasets: [ label: 'Plan', data: [ timeSpend, breakTime, fSubject, sSubject, tSubject ] ], }, options: {}, }; <form class="form"> <input type="text" id="text-box" class="time_spend" placeholder="How much time do you have?" /> <input type="text" id="text-box" class="break_time" placeholder="how many breaks do you want to have?" /> <input type="text" id="text-box" class="first_subjects" placeholder="What is the first thing you would like to achieve" /> <input type="text" id="text-box" class="second_subjects" placeholder="What is the second thing you would like to achieve?" /> <input type="text" id="text-box" class="third_subjects" placeholder="What is the third thing you would like to achieve" /> </form> <button type="button" class="button" onclick="buttonClicked()">Finished</button> <div class="container"> <canvas id="myChart"></canvas> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>getElementsByClassName para seleccionar elementos individuales.buttonClicked solo selecciona los elementos de entrada cuando se hace clic y no realiza más acciones.dataset es incorrecta. datasets: [ label: 'Plan', data: [timeSpend, breakTime, fSubject, sSubject, tSubject] ]data con referencias de elementos y no con sus valores.form ....
Todavía no funcionará para actualizar el gráfico
let timeSpend = document.querySelector("#time_spend"); let breakTime = document.querySelector("#break_time"); let fSubject = document.querySelector("#first_subjects"); let sSubject = document.querySelector("#second_subjects"); let tSubject = document.querySelector("#third_subjects"); let myChart = document.getElementById("myChart").getContext("2d"); document.querySelector("button").addEventListener("click", () => { let pieChart = new Chart(myChart, { type: "pie", data: { labels: [ "Time spend", "Break Time", "First Subject", "Second Subject", "Third Subject", ], datasets: [ { label: "Plan", data: [ timeSpend.value, breakTime.value, fSubject.value, sSubject.value, tSubject.value, ], }, ], }, options: {}, }); }); <input type="text" id="time_spend" placeholder="How much time do you have?" /> <input type="text" id="break_time" placeholder="how many breaks do you want to have?" /><br> <input type="text" id="first_subjects" placeholder="What is the first thing you would like to achieve" /> <input type="text" id="second_subjects" placeholder="What is the second thing you would like to achieve?" /> <input type="text" id="third_subjects" placeholder="What is the third thing you would like to achieve" /> <button type="button" class="button">Finished</button> <div class="container"> <canvas id="myChart"></canvas> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>