Учимся создавать базовый инструмент для назначения цвета на Wix вело

Question

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

введите описание изображения здесь

Пожалуйста, просмотрите и узнайте, почему код, который я использую, не работает. Вот код;

      $w.onReady(function () {
    // Selectors for all the Container boxes
    const bigBox = $w('#box0');
  const boxColor = bigBox.style.backgroundColor;
  const firstButton = $w('#button1');
  const firstcolor = firstButton.style.backgroundColor;
    const secondButton = $w('#button2');
  const secondColor = secondButton.style.backgroundColor;
    const thirdButton = $w('#button3');
  const thirdColor = thirdButton.style.backgroundColor;
    const fourthButton = $w('#button4');
  const fourthColor = fourthButton.style.backgroundColor;


    firstButton.onClick(event => {
     boxColor = firstcolor;
     });
    secondButton.onClick(event => {
      boxColor = secondColor;
     })
    thirdButton.onClick(event => {
      boxColor = thirdColor;
    })
    fourthButton.onClick(event => {
      boxColor = fourthColor;
    }) 
});

Answer 1

Вы не можете назначить цвет коробке так, как вы пытаетесь это сделать. В настоящее время вы сохраняете начальное значение поля в переменной, а затем просто меняете значение этой переменной. Когда вы меняете переменную, она ничего не делает с ящиком. Вместо этого вам нужно фактически изменить значение поля backgroundColor.

Итак, нижняя часть вашего кода должна выглядеть примерно так:

      firstButton.onClick(event => {
  bigBox.style.backgroundColor = firstcolor;
});
secondButton.onClick(event => {
  bigBox.style.backgroundColor = secondColor;
})
thirdButton.onClick(event => {
  bigBox.style.backgroundColor = thirdColor;
})
fourthButton.onClick(event => {
  bigBox.style.backgroundColor = fourthColor;
}) 

И вы можете избавиться от этой строчки вверху:

      const boxColor = bigBox.style.backgroundColor;