How to update a variable after button click

change variable value onclick jquery
onclick assign value
button onclick
change value of button in javascript
onclick set variable
change global variable in function javascript
php set variable on button click
get button value javascript

I just can't get my head around on how can I click a button and pass a different dataset to a variable in order to dynamically update my Chart.js graph after I press a specific button. I come from python and started to learn js only recently and such code usually works in python. Please see my code

<div id="parentElementID">
    <button type="button" id="1">Button1</button>
    <button type="button" id="2">Button2</button>
    <button type="button" id="3">Button3</button>
</div>

<div class="container">
    <canvas id="myChart"></canvas>
</div>

<script type="text/javascript">
    var spins15 = [1, 1, 1]
    //These should update the value of a variable on click. But apparently they don't
    $(document).ready(function(){
        $('#1').click(function(){
            spins15=[15, 25, 35];
            });
        });

    $(document).ready(function(){
        $('#2').click(function(){
            spins15=[25, 31, 24];
            });
        });

    $(document).ready(function(){
        $('#3').click(function(){
            spins15=[50, 11, 25];
            });
        });
    //Chart.js part
    let myChart = document.getElementById('myChart').getContext('2d');
    var options = {
        responsive: true,
        maintainAspectRatio: true,
        };

    let someChart = new Chart(myChart, {
        type:'bar',
        data:{
            labels:['0', '32', '15'],

            datasets:[{
                label:'Some chart',
                //This variable below should be updated in order to update the barchart
                data:spins15
            }]
        },
        options:options
    });

    //

</script>

I think this is what you need:

function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
    dataset.data.push(data);
});
chart.update();}

function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
    dataset.data.pop();
});
chart.update();}

Source: Updating Charts

Change variable value on button click, You have just a couple of problems with your code. The first is this: if (beast = "​yes") {. In this case, you're assigning "yes" to beast , not  I just can't get my head around on how can I click a button and pass a different dataset to a variable in order to dynamically update my Chart.js graph after I press a specific button. I come from python and started to learn js only recently and such code usually works in python. Please see my code

You need to call the object method .update(), every time you change the data, in order to update the graph visualisation. Take a look at the documentation of the Chartjs library: https://www.chartjs.org/docs/latest/developers/updates.html.

How to Share a Variable Between Two Event Handlers in Javascript, The easiest way to fix this problem is the change the scope of the variable. In our Roll button click handler, we'll stuff the roll value into a data attribute on the  The first option is what you should be using - update a variable to the value that you want the text input to display, and set that variable as the Default property for the text input. The first time you click the button, the variable value will be updated (from nothing to "Test"), so this changeis propagated to the text input control.

Original Docs: https://www.chartjs.org/docs/latest/developers/api.html#updateconfig

Sample:

 $('#1').click(function () {
    spins15 = [15, 25, 35];
    someChart.data.datasets[0] = spin;
    someChart.update();
});

How to Update a Field through a button's OnSelect Event, In the form below, I want a quick way to mark a task as done, by clicking on a then have my button change the variable to the new value (e.g. “Complete”); then​  If it’s it advance, then I think I need to capture the field value and put it in the variable on load, so that the field can be populated with that value; then have my button change the variable to the new value (e.g. “Complete”); then the field will reflect the updated value.

Change global variables through buttons?, There is any way of changing the value of a global variable through a button? But, after clicking "Change global var", if i click "Alert global" again it still gives  From the Power User Task Menu, click System. Click the Advanced System Settings link in the left column. In the System Properties window, click on the Advanced tab, then click the Environment Variables button near the bottom of that tab.

How to directly update a field by using ng-click in AngularJS , After Click on the Button: The button calls the change function which changes the variable name. The change reflected on the page because of the {{name}} syntax​  Update database on button click? store it as another hidden form variable, then as part of the update routine re-generate the field, compare it to the content of the hidden field, and see that

Can't pass an input value into a javascript variable - JavaScript, Hello everyone, I have been stuck for one day on this script. I am trying to pass an input value into a variable, but for some reason my code doesn't work. I saw other You should absolutely make your AJAX call in your button's click handler. When the page is loaded, the variable (theVar) should not print to the screen. When the button is pressed, the string "set" should be printed to the screen, as (ideally) the function would have set theVar when the button was pressed.

Comments
  • You need to call someChart.update();.
  • Thanks it worked.