0

Переменная let blue = 255; в контексте функции R255G255B255() является глобальной. По логике вещей, в функции R255G255Bto0 () после прохождения цикла переменная blue принимает значение 0, НО только внутри этой функции. Далее - в других функциях - значение будет браться из глобальной переменной (let blue = 255;), однако, как видно из значений console.log, в промежутке между функциями значение переменной blue = 255, что верно, но при создании новой функции и вызове переменной blue, её значение равно 0, как если бы наследовалось из предыдущей функции. Не понимаю. Почему так?

let colorTable = document.getElementById('color_table');

function R255G255B255() {
  let red = 255;
  let green = 255;
  let blue = 255;

  function R255G255Bto0() {
    for (i = 0; i < 5; i++) {
      let cell = document.createElement('div');
      colorTable.appendChild(cell);
      cell.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
      blue -= 51;
    }
  }

  console.log(blue); //255

  function R255Gto0Bto0() {
    console.log(blue); //0
    //blue = 255; 
    for (i = 0; i < 5; i++) {
      let cell = document.createElement('div');
      colorTable.appendChild(cell);
      cell.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
      green -= 51;
      //blue-=51;
    }
  }
  R255G255Bto0();
  R255Gto0Bto0();

};
R255G255B255();
#color_table {
  width: 270px;
  height: 270px;
  outline: 1px dotted gray;
  margin: 50px auto;
  background-color: rgb(255, 255, 255);
}

div {
  width: 18px;
  height: 18px;
  display: inline-block;
  //outline: 1px solid black;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  padding: 0;
  margin: 0;
}

p {
  padding: 0;
  margin: 0;
}
<p id="color_table"></p>

1 ответ 1

1

Вывод console.log(blue); //255 происходит после определения функции, но до запуска

Так как функция не запускалась - переменная и не менялась.

Если перенести console.log в место между вызовами - то значение будет 0

let colorTable = document.getElementById('color_table');

function R255G255B255() {
  let red = 255;
  let green = 255;
  let blue = 255;

  function R255G255Bto0() {
    for (i = 0; i < 5; i++) {
      let cell = document.createElement('div');
      colorTable.appendChild(cell);
      cell.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
      blue -= 51;
    }
  }

  function R255Gto0Bto0() {
    console.log(blue); //0
    //blue = 255; 
    for (i = 0; i < 5; i++) {
      let cell = document.createElement('div');
      colorTable.appendChild(cell);
      cell.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
      green -= 51;
      //blue-=51;
    }
  }
  R255G255Bto0();
  console.log('после вызова R255G255Bto0:', blue); //0
  R255Gto0Bto0();

};
R255G255B255();
#color_table {
  width: 270px;
  height: 270px;
  outline: 1px dotted gray;
  margin: 50px auto;
  background-color: rgb(255, 255, 255);
}

#color_table div {
  width: 18px;
  height: 18px;
  display: inline-block;
  //outline: 1px solid black;
  border-radius: 50%;
  background: rgb(255, 255, 255);
  padding: 0;
  margin: 0;
}

p {
  padding: 0;
  margin: 0;
}
<p id="color_table"></p>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.