Блог

Главная - Вопросы по программированию - Как вернуться к глобальной области видимости после запуска функции в JavaScript?

Как вернуться к глобальной области видимости после запуска функции в JavaScript?

#javascript #html #css

#javascript #HTML #css

Вопрос:

При запуске моей программы все изначально выполняется так, как задумано. Однако, когда я нажимаю кнопку на веб-странице, которая запускает мою функцию clearBoard() , код в глобальной области видимости больше не выполняется.

Я использовал консоль.журнал и все, что находится за пределами функции, пусты после запуска clearBoard() .

 const container = document.getElementById("container");
//Create board
function makeRows(rows, columns) {
  //let container = document.getElementById("container");
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', columns);
  for (c = 0; c < (rows * columns); c  ) {
    let cell = document.createElement("div");
    //cell.innerText = (c   1);
    container.appendChild(cell).className = "grid-item";
  }

}

//Draw starting Board
makeRows(16, 16);

//Paint on board
const paint = document.getElementsByClassName("grid-item");
console.log(container);

for (let i = 0; i < paint.length; i  ) {
  paint[i].addEventListener('mouseover', function() {
    this.style.backgroundColor = "black";
  });
}

//Get new board size
function getNewBoard() {
  //clear divs
  const removeOldGrid = document.getElementById("container");
  removeOldGrid.innerHTML = '';
  //get input from user
  let squares = prompt('How many squares per side?');
  //convert input to number
  let squaresInt = parseInt(squares);
  //generate new board
  makeRows(squaresInt, squaresInt);
}

//Clear board
function clearBoard() {

  for (let i = 0; i < paint.length; i  ) {
    paint[i].style.backgroundColor = "";

  }
  getNewBoard();
}  
 :root {
  --grid-cols: 0;
  --grid-rows: 0;
  --paint-color: ;
}

#container {
  display: grid;
  padding: 10em;
  height: 40vh;
  width: 50vh;
  margin-left: auto;
  margin-right: auto;
  /*grid-gap: 1em;*/
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: center;
  /*background-color: var(--paint-color);*/
}


/*.grid-item:hover {
        background-color: black;
      }  
 <button onclick="clearBoard()">Clear Board</button>

<div id="container">


</div>

Комментарии:

1. ну, вам нужно будет добавить все прослушиватели событий обратно. Вы создаете новые элементы….

2. Нет способа перезапустить тело глобального кода, вы должны обернуть все, что хотите повторно использовать, в функции.

Ответ №1:

Это происходит потому, что вы создаете новую доску, следовательно, новый grid-item элемент. Прослушиватель событий наведения курсора мыши добавляется к paint переменной, которая содержит старый элемент после clearBoard() вызова.

Решение состоит в том, чтобы добавить новый прослушиватель событий paint при создании новой платы. Ваш JS должен выглядеть примерно так:

 //Paint on board
var paint = document.getElementsByClassName("grid-item");
console.log(container);

// Function to add the mouseover event listener when "paint" changes
function addMouseoverEventListener() {  
  for (let i = 0; i < paint.length; i  )
  {
      paint[i].addEventListener('mouseover', function() {
          this.style.backgroundColor = "black";
      });
  }
}

addMouseoverEventListener();

//Get new board size
function getNewBoard() {
    //clear divs
    const removeOldGrid = document.getElementById("container");
    removeOldGrid.innerHTML = '';
    //get input from user
    let squares = prompt('How many squares per side?');
    //convert input to number
    let squaresInt = parseInt(squares);
    //generate new board
    makeRows(squaresInt, squaresInt);

    // Get the new element
    paint = document.getElementsByClassName("grid-item");
    // Add the event listener again
    addMouseoverEventListener();
}

Ответ №2:

Вместо использования paint[i].addEventListener используйте window.onmouseover и проверяйте цель

 const container = document.getElementById("container");
//Create board
function makeRows (rows, columns) {
    //let container = document.getElementById("container");
    container.style.setProperty('--grid-rows', rows);
    container.style.setProperty('--grid-cols', columns);
    for (c = 0; c < (rows * columns); c  ) {
        let cell = document.createElement("div");
        //cell.innerText = (c   1);
        container.appendChild(cell).className = "grid-item";
    }

}
const paint = document.getElementsByClassName("grid-item");

//Draw starting Board
makeRows(16, 16);

window.onmouseover=function(e) {
  if(e.target.className == "grid-item")
    {
      e.target.style.backgroundColor = "black";
    }

};


//Get new board size
function getNewBoard() {
    //clear divs
    const removeOldGrid = document.getElementById("container");
    removeOldGrid.innerHTML = '';
    //get input from user
    let squares = prompt('How many squares per side?');
    //convert input to number
    let squaresInt = parseInt(squares);
    //generate new board

    makeRows(squaresInt, squaresInt);
}

function clearBoard() {

  for (let i = 0; i < paint.length; i  ) {
    paint[i].style.backgroundColor = "";

  }
  getNewBoard();
}  
 :root {
    --grid-cols: 0;
    --grid-rows: 0;
    --paint-color: ;
  }
  
  #container {
    display: grid;
    padding: 10em;
    height: 40vh;
    width: 50vh;
    margin-left: auto;
    margin-right: auto;
    /*grid-gap: 1em;*/
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    grid-template-columns: repeat(var(--grid-cols), 1fr);
    
  }
  
  .grid-item {
    padding: 1em;
    border: 1px solid #ddd;
    text-align: center;
    /*background-color: var(--paint-color);*/

  }

  /*.grid-item:hover {
    background-color: black;
  }  
 <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Etch-a-Sketch</title>
  <meta name="author" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="style.css" rel="stylesheet">
</head>

<body>
  <button onclick = "clearBoard()">Clear Board</button>

  <div id="container">


  </div>>

  <script src="script.js"></script>
</body>

</html>