Reassign variables in if/else (Javascript)

Question

How can I achieve a reassigned list (or any other value for that matter) in javascript?

I've tried to do as I'd do in python, and make a empty list and assign it if my conditions are met, but it seems that javascript will fall right back on what's assigned out of my if/else

My goal is to achieve something like this:

let data1 = [];
let data2 = [];
let data3 = [];
document.addEventListener("DOMContentLoaded", function(){
  if (document.getElementById('minus').checked) {
    let data1 = [-64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    let data2 = [-23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    let data3 = [-64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  } else {
    let data1 = [64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    let data2 = [23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    let data3 = [64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  }
});

//Further code that uses the variables we just set

fiddle on my issue: https://jsfiddle.net/vk8swjc3/

If you let x inside a block, you're creating a new variable x in the inner scope. Remove let and you're reassigning the original x. — Lionel Rowe
– Lionel Rowe, Commented Sep 12, 2020 at 8:51
are you trying to set content only after the first load? or after the checkbox changes? — pilchard
– pilchard, Commented Sep 12, 2020 at 9:09

Rixcy · Accepted Answer · 2020-09-12 08:51:09Z

4

You're currently redefining all of those data variables by saying let again. Remove the lets and do data1 = [-64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34] directly to reassign them.

answered Sep 12, 2020 at 8:51

Rixcy

2842 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jannick Over a year ago

I've updated my post with a fiddle, it does not seem to work, but it makes perfectly sense.

Rixcy Over a year ago

Ah yeah, looks like you might be trying to access the data from data1, data2, data3 etc. before the event listener you have set up has run. Move the rest of your code inside of that event listener and you should be able to access the data - also if you console.log data1 shortly after the if/else statement, you should see the array filled with 12 items as you're expecting to see.

Lionel Rowe · Accepted Answer · 2020-09-12 08:59:30Z

Two problems:

If you use let x inside a block, you're creating a new variable x in the inner scope. Remove let and you're reassigning the original x.
If you reassign them inside a DOMContentLoaded callback, the new values won't be available to the immediately running code after you set up that callback (only in the callback itself, or once the callback has run). See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Here's a demo of the order of execution:

console.log('top')

document.addEventListener("DOMContentLoaded", () => {
  console.log('DOMContentLoaded')

  executeWithinCallback()
})

const executeWithinCallback = () => {
  console.log('after DOMContentLoaded')
}

console.log('bottom')

ezileli · Accepted Answer · 2020-09-12 09:00:29Z

1

When you are use var, let or const on a scope(curly braces) you are defined a variable that you can use only inside of that scope.

So if you want to use top level variable in another scope then you shouldn't use var, let or const to assign a value to variable.

You can look here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

answered Sep 12, 2020 at 9:00

ezileli

1742 silver badges6 bronze badges

Comments

pilchard · Accepted Answer · 2020-09-12 09:23:29Z

Having addressed the variable scoping issues that you had in your initial post we can now look at the larger part of your question which seems to be the matter of changing data, or at least setting initial data based on the state of a control.

Your fiddle is working as intended, but not as you expect it to. If you console.log() any of the data arrays after the conditional within the DOMContentLoaded you will see the updated array.

let data1 = [];
let data2 = [];
let data3 = [];

document.addEventListener("DOMContentLoaded", function(){
  if (document.getElementById('minus').checked) {
    data1 = [-64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    data2 = [-23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    data3 = [-64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  } else {
    data1 = [64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    data2 = [23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    data3 = [64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  }
  console.log(data1);
});
// [64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34]

However, by the time that runs you have already set up your chart with the empty array values and it has rendered. Changing the values of the data arrays after that will have no effect on the rendered chart, nor on the values of the arrays assigned to chartData.datasets[n].data

In order to update the chart you need to change these dataset values and call update on the the chart.

let barVertical = document.getElementById("barVertical");
let barVerticalChart = new Chart(barVertical, {
    type: "bar",
    data: chartData,
    options: chartOptions,
});

const minus =  document.getElementById('minus');
minus.addEventListener('change', (e) => {
  if (e.target.checked) {
    chartData.datasets[0].data = [-64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    chartData.datasets[1].data = [-23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    chartData.datasets[2].data = [-64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  } else {
    chartData.datasets[0].data = [64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
    chartData.datasets[1].data = [23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
    chartData.datasets[2].data = [64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  }
  barVerticalChart.update();
});

Updated fiddle: https://jsfiddle.net/q3tmon21/

Or, to simply make your code run as you seem to expect, using the conditionally set arrays on the first render, simply move all the code that comes after it into the DOMContentLoaded listener.

let data1 = [];
let data2 = [];
let data3 = [];

document.addEventListener("DOMContentLoaded", function(){
  if (document.getElementById('minus').checked) {
    data1 = [-64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
        data2 = [-23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
        data3 = [-64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  } else {
    data1 = [64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34];
        data2 = [23, 45, 83, 74, 99, 83, 64, 72, 50, 44, 36, 45];
        data3 = [64, 75, 43, 24, 63, 72, 88, 24, 84, 93, 45, 60];
  }

  let labels = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    let chartData = {
    labels: labels,
    datasets: [
        {
            label: "Data1",
            data: data1,
            backgroundColor: "rgba(154, 18, 179, .7)",
        },
        {
            label: "Data2",
            data: data2,
            backgroundColor: "rgba(232, 126, 4, .7)",
        },
        {
            label: "Data3",
            data: data3,
            backgroundColor: "rgba(0, 230, 64, .7)",
        },
    ],
    };


    let barVertical = document.getElementById("barVertical");
    let barVerticalChart = new Chart(barVertical, {
    type: "bar",
    data: chartData,
    options: chartOptions,
  });
});

Collectives™ on Stack Overflow

Reassign variables in if/else (Javascript)

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related