카운터

-2

를 증가 I가 다음 코드카운터

class battleShips { 
 
    constructor(squareNr) { 
 
    this.squareNr = squareNr; 
 
    this.createField(); 
 
    } 
 
    createField() { 
 
    let shipsCount = 0; 
 
    for (let i = 0; i < this.squareNr; i++) { 
 
     let fieldSquare = document.createElement("div"); 
 
     fieldSquare.className = "squareStyle"; 
 
     document.querySelector(".arrayWrap").appendChild(fieldSquare); 
 
     fieldSquare.setAttribute("value", "false"); 
 
     this.selectShips(fieldSquare, shipsCount); 
 
    } 
 
    } 
 
    selectShips(square, count) { 
 
    square.addEventListener("click", function() { 
 
     if (square.getAttribute("value") === "false") { 
 
     square.setAttribute("value", "true"); 
 
     square.style.backgroundColor = "green"; 
 
     count += 1; 
 
     console.log(count); 
 
     document.querySelector(".shipCounter").textContent = "You have selected " + count + " ships"; 
 
     } else { 
 
     square.setAttribute("value", "false"); 
 
     square.style.backgroundColor = "white"; 
 
     count -= 1; 
 
     document.querySelector(".shipCounter").textContent = "You have selected " + count + " ships"; 
 
     } 
 
    }) 
 
    } 
 
} 
 

 
var a = new battleShips(25);

.arrayWrap { 
 
    height: 500px; 
 
    width: 500px; 
 
    border: black solid; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.squareStyle { 
 
    height: 98px; 
 
    width: 98px; 
 
    border: 1px black solid; 
 
}

<div class="arrayWrap"></div> 
 
<p class="shipCounter"></p>

내가 달성하기 위해 노력하고있어 때마다 당신이 광장 1로 shipsCount 변수 단위를 클릭 있다는 것입니다,하지만 당신과 같은 아래의 단락에서 볼 수 있습니다. 그리고 카운트 변수를 기록하면 1을 초과하지 않고 한 번만 증가합니다.

원하는대로 작동하려면 어떻게해야합니까?

출처

2016-11-21 Tudor Apostol

귀하의 카운트 변수가 될 필요 : 아니 좋은 때마다 그 클래스의 인스턴스를 이벤트 처리기를 제공하는 방법하지만 작품 (consoloe 로그를 참조하십시오, 그것은 진짜로 카운트 업 또는 동일한 인스턴스) 높은 범위에서 선언했다. –

콘솔 출력에 오류가 있는지 확인 했습니까? – HBP

Scott이 맞습니다. 카운트는 실제로 "글로벌 변수"가 될 수 있습니다. 실제로는 클릭 할 때마다 카운트가 표시됩니다. – Aks

count을 클래스 인스턴스의 속성으로 저장해야합니다. 지금까지는 로컬에서만 사용할 수 있으므로 클릭 기능이 끝나면 제거됩니다. 따라서 생성자에 다음 줄을 추가하면됩니다.

this.count = 0;

그리고 증분/감소 기능에 사용하십시오. 그게 다야! ;-)

편집 : 그건 전부가 아닙니다. 여기에는 해결되지 않은 범위 문제가 있습니다. 키워드 this에는 이벤트 처리기 내에 또 다른 컨텍스트가 있습니다. 이 this은 excepted와 같은 클래스 범위가 아니며 해당 이벤트 처리기의 범위이며 여기서는 클릭 핸들러입니다. 많은 개발자들이 함정에 빠지게하는 아주 불쾌한 JavaScript 문제. 이번에도 내가 그랬다. 그 죄송합니다. 아래에서는 평범한 자바 스크립트에서 완전히 작동하는 코드 예제를 볼 수 있습니다.

이

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <script type="text/javascript"> 
     class battleShips 
     { 
      constructor(squareNr) 
      { 
      this.squareNr = squareNr; 
      this.createField(); 
      this.count = 0; 
      } 

      createField() 
      { 
      let shipsCount = 0; 
      for (let i = 0; i < this.squareNr; i++) { 
       let fieldSquare = document.createElement("div"); 
       fieldSquare.className = "squareStyle"; 
       document.querySelector(".arrayWrap").appendChild(fieldSquare); 
       fieldSquare.setAttribute("value", "false"); 
       this.selectShips(fieldSquare, this); 
      } 
      } 

      selectShips(square, battleShipsInstance) 
      { 
      square.addEventListener(
       "click", 
       function() { 
        if (square.getAttribute("value") === "false") { 
         square.setAttribute("value", "true"); 
         square.style.backgroundColor = "green"; 
         battleShipsInstance.count++; 
         console.log("Battleships count=", battleShipsInstance.count); 
         console.log("Battleships instance", battleShipsInstance); 
         document.querySelector(".shipCounter") 
          .textContent = "You have selected " 
          + battleShipsInstance.count 
          + " ships"; 
        } else { 
         square.setAttribute("value", "false"); 
         square.style.backgroundColor = "white"; 
         battleShipsInstance.count--; 
         document.querySelector(".shipCounter") 
          .textContent = "You have selected " 
          + battleShipsInstance.count 
          + " ships"; 
        } 
       } 
      ); 
      } 
     } 

     document.addEventListener(
      "DOMContentLoaded", 
      function(event) { 
       var a = new battleShips(25); 
      } 
     ); 
    </script> 
    <style type="text/css"> 
     .arrayWrap { 
      height: 500px; 
      width: 500px; 
      border: black solid; 
      margin: 0 auto; 
      display: flex; 
      flex-wrap: wrap; 
     } 

     .squareStyle { 
      height: 98px; 
      width: 98px; 
      border: 1px black solid; 
     } 
    </style> 
</head> 
<body> 
    <div class="arrayWrap"></div> 
    <p class="shipCounter"></p> 
</body> 
</html>

출처

2016-11-21 16:38:38 alpham8

답장을 보내 주셔서 감사합니다. 당신의 방법을 시도했지만, 이제 this.count를 기록 할 때 NaN을 얻습니다. –

그러면 올바르게 초기화되지 않습니다. NaN은 숫자가 아닌 간단한 형식입니다. 클래스 변수를 사용하기 전에 숫자로 미리 초기화해야합니다. – alpham8

글쎄, 당신의 조언을 따라 this.count = 0 생성자에 넣어. –

답변

관련 문제