Блог

Как я могу получить переназначенный список (или любое другое значение, если на то пошло) в javascript?

Я попытался сделать так, как я бы сделал в python, и создать пустой список и назначить его, если мои условия выполнены, но, похоже, что javascript вернется к тому, что назначено из моего if/else

Моя цель — достичь чего-то подобного:

 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
  

разберитесь с моей проблемой:
https://jsfiddle.net/vk8swjc3 /

В настоящее время вы переопределяете все эти переменные данных, повторяя команду let. Удалите lets и сделайте data1 = [-64, 31, 23, 34, 23, 30, 50, 43, 29, 64, 22, 34] напрямую, чтобы переназначить их.

Две проблемы:

1. Если вы используете let x внутри блока, вы создаете новую переменную x во внутренней области видимости. Удалите, let и вы переназначаете оригинал x .

2. Если вы переназначите их внутри DOMContentLoaded обратного вызова, новые значения не будут доступны для кода, выполняющегося сразу после настройки этого обратного вызова (только в самом обратном вызове или после выполнения обратного вызова). См https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Вот демонстрация порядка выполнения:

 console.log('top')

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

  executeWithinCallback()
})

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

console.log('bottom')  

Когда вы используете var , let или const в области видимости (фигурные скобки), вы определяете переменную, которую вы можете использовать только внутри этой области видимости.

Поэтому, если вы хотите использовать переменную верхнего уровня в другой области, вам не следует использовать var , let или const для присвоения значения переменной.

Вы можете посмотреть здесь:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures

Рассмотрев проблемы с областью видимости переменных, которые у вас были в вашем первоначальном сообщении, теперь мы можем рассмотреть большую часть вашего вопроса, который, по-видимому, касается изменения данных или, по крайней мере, установки начальных данных на основе состояния элемента управления.

Ваша скрипка работает так, как задумано, но не так, как вы ожидаете. Если вы console.log() какой-либо из массивов данных после условного внутри DOMContentLoaded , вы увидите обновленный массив.

 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]
  

Однако ко времени выполнения вы уже настроили свою диаграмму с пустыми значениями массива, и она отобразилась. Изменение значений массивов данных после этого не повлияет ни на отображаемую диаграмму, ни на значения массивов, назначенных chartData.datasets[n].data

Для обновления диаграммы вам необходимо изменить эти значения набора данных и вызвать update на диаграмме.

 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();
});
  

Обновленная скрипка:https://jsfiddle.net/q3tmon21 /

Или, чтобы просто заставить ваш код работать так, как вы, кажется, ожидаете, используя условно установленные массивы при первом рендеринге, просто переместите весь код, который идет после него, в DOMContentLoaded прослушиватель.

 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,
  });
});