जावास्क्रिप्ट में फ़ंक्शन चलाने के बाद आप वैश्विक दायरे में कैसे वापस आते हैं?

Question

मेरा कार्यक्रम शुरू करते समय, सब कुछ शुरू में इरादा के अनुसार चलता है। हालांकि, जब मैं वेबपेज पर एक बटन क्लिक करता हूं जो मेरा 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>

javascript html css

0

ATEATEEFFEEE 4 नवम्बर 2020, 22:00

Answer 1

ऐसा इसलिए हो रहा है क्योंकि आप एक नया बोर्ड बना रहे हैं, फलस्वरूप एक नया grid-item तत्व। माउसओवर ईवेंट श्रोता को paint चर में जोड़ा जाता है, जिसमें clearBoard() के बाद पुराना तत्व होता है।

समाधान यह है कि एक नया बोर्ड उत्पन्न होने पर paint में एक नया ईवेंट श्रोता जोड़ा जाए। आपका जेएस कुछ इस तरह दिखना चाहिए:

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

1

Victor Kayan 4 नवम्बर 2020, 22:33

Answer 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>

1

Janaki Rajesh Duvvuri 4 नवम्बर 2020, 22:43

जावास्क्रिप्ट में फ़ंक्शन चलाने के बाद आप वैश्विक दायरे में कैसे वापस आते हैं?

2 जवाब

संबंधित सवाल

नए सवाल