Javascript and Chart.js not taking user input assuming it is a variable scope issue-CodePudding

Hey I have only been javascript for a little bit but I am trying to get user input so that it can split up that number into 50% 30% and 20% which will also display the percentages in a chart using chart.js. Now I have tried many different ways which either result in no chart, no output of the numbers in the div elements, or just nothing at all. I assume it has to deal with scope issues on the perfifty variables being in the function but then getDocumentById is not retrieving them when they are global and I still can't get those variables to be part of the chart. Sorry if this is a simple fix I have just been on this for too many days and I still cant figure it out. Thank you.

function calculate(){
    var user_input = document.getElementById("monthlyincome").value;
    var percentages = {
        perfifty: (50 / 100) * user_input,
        perthirty: (30 / 100) * user_input,
        pertwenty: (20 / 100) * user_input
    };

  document.getElementById("50%").innerHTML = percentages.perfifty;
  document.getElementById("30%").innerHTML = percentages.perthirty;
  document.getElementById("20%").innerHTML = percentages.pertwenty;
};


var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [{
            label: '',
            data: [percentages.perfifty, percentages.perthirty, percentages.pertwenty],
            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
            }
        }
    }
});

CodePudding user response：

I assume you call calculate when the user has given input and you create the chart outside of any function. This would mean you create the chart immediately when loading the script, when the user has not given any input yet. you want to create the chart inside calculate or if you want to see the canvas before user input, you can update the chart.

Here is an example:

function handleInput() {
    let text = document.getElementById("uInput");
    var num = Number(text.value);
    if (isNaN(num)) {
        alert("bad input!");
        return;
    }
  
    var percentages = {
        perfifty: (50 / 100) * num,
        perthirty: (30 / 100) * num,
        pertwenty: (20 / 100) * num
    };
    
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ['Red', 'Blue', 'Yellow'],
            datasets: [{
                label: '',
                data: [percentages.perfifty, percentages.perthirty, percentages.pertwenty],
                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
                }
            }
        }
    });
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<label for="uInput">Input:</label>
<input type="text" id="uInput">
<button onclick="handleInput()"> Submit </button>

<canvas id="myChart"></canvas>