Question

大家好我有一个小问题，试图让我的变量每次点击其中一个图像时减去1，并且一旦选择了5，就不能再点击了。但出于某种原因，我似乎无法让这个工作。如果有人能够看到我在这里出错的地方那就太棒了。我不确定我在哪里出错了，所以我已经注释掉了那个让它吐出错误的代码。

错误讯息：

ReferenceError：未定义battleship1Placement

提前致谢。

＆＃13;

function load() {
  //var numberOfShipsPlaced = 0;
  //var battleShip1Placement = 5;
}

function tileClicked(img) {
  var tagID = img.id;
  var img_el = document.getElementById(tagID);

  //document.getElementById("hud").innerHTML = "battleship1Placement: " + battleship1Placement;

  //if (numberOfShipsPlaced == 0) {
  if (img_el.src.indexOf('http://server2.sulmaxcp.com/Images/gridHover.png') > -1) {
    //battleship1Placement - 1;

    //if (battleship1Placement > 0) {
    img_el.src = 'http://server2.sulmaxcp.com/Images/gridShip.png'
    //}
  }
  //}
}

function hover(img) {
  var tagID = img.id;
  var img_el = document.getElementById(tagID);

  if (img_el.src.indexOf('http://server2.sulmaxcp.com/Images/gridDefault.png') > -1) {
    img_el.src = 'http://server2.sulmaxcp.com/Images/gridHover.png'
  }
}

function unhover(img) {
  var tagID = img.id;
  var img_el = document.getElementById(tagID);

  if (img_el.src.indexOf('http://server2.sulmaxcp.com/Images/gridHover.png') > -1) {
    img_el.src = 'http://server2.sulmaxcp.com/Images/gridDefault.png'
  }
}

＆＃13;

<body onload="load()">
  <tr>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A1" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A2" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A3" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A4" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A5" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A6" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A7" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A8" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A9" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A10" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
  </tr>
  <p id="hud"></p>
</body>

＆＃13;

Answer 1

看起来变量battleship1Placement仅在load函数的范围内定义。您可以通过将变量置于函数之外来使变量成为全局变量，或者将所有变量放在一个作用域下并使用作用域中的变量。有关详细参考，请参阅https://www.w3schools.com/js/js_scope.asp。

所以它是

var numberOfShipsPlaced = 0;
var battleShip1Placement = 5;

function load() {
}

function tileClicked(img) {
  var tagID = img.id;
  var img_el = document.getElementById(tagID);

  document.getElementById("hud").innerHTML = "battleship1Placement: " + battleship1Placement;

  if (numberOfShipsPlaced == 0) {
  if (img_el.src.indexOf('http://server2.sulmaxcp.com/Images/gridHover.png') > -1) {
    battleship1Placement - 1;

    if (battleship1Placement > 0) {
    img_el.src = 'http://server2.sulmaxcp.com/Images/gridShip.png'
    }
  }
  }
}

function hover(img) {
  var tagID = img.id;
  var img_el = document.getElementById(tagID);

  if (img_el.src.indexOf('http://server2.sulmaxcp.com/Images/gridDefault.png') > -1) {
    img_el.src = 'http://server2.sulmaxcp.com/Images/gridHover.png'
  }
}

function unhover(img) {
  var tagID = img.id;
  var img_el = document.getElementById(tagID);

  if (img_el.src.indexOf('http://server2.sulmaxcp.com/Images/gridHover.png') > -1) {
    img_el.src = 'http://server2.sulmaxcp.com/Images/gridDefault.png'
  }
}

或

(function () {
var numberOfShipsPlaced = 0;
var battleShip1Placement = 5;

function load() {
}

function tileClicked(img) {
  var tagID = img.id;
  var img_el = document.getElementById(tagID);

  document.getElementById("hud").innerHTML = "battleship1Placement: " + battleship1Placement;

  if (numberOfShipsPlaced == 0) {
  if (img_el.src.indexOf('http://server2.sulmaxcp.com/Images/gridHover.png') > -1) {
    battleship1Placement - 1;

    if (battleship1Placement > 0) {
    img_el.src = 'http://server2.sulmaxcp.com/Images/gridShip.png'
    }
  }
  }
}

function hover(img) {
  var tagID = img.id;
  var img_el = document.getElementById(tagID);

  if (img_el.src.indexOf('http://server2.sulmaxcp.com/Images/gridDefault.png') > -1) {
    img_el.src = 'http://server2.sulmaxcp.com/Images/gridHover.png'
  }
}

function unhover(img) {
  var tagID = img.id;
  var img_el = document.getElementById(tagID);

  if (img_el.src.indexOf('http://server2.sulmaxcp.com/Images/gridHover.png') > -1) {
    img_el.src = 'http://server2.sulmaxcp.com/Images/gridDefault.png'
  }
}
}());

Answer 2

您需要将变量battleShip1Placement置于load()函数之外，因为其范围仅限于load()函数。

此外，由于您使用battleship1Placement代替battleShip1Placement，因此您的条件过于复杂，也会出现拼写错误...

我在tileClicked()函数中进行了一些更改..

Stack Snippet

＆＃13;

function load() {}

var numberOfShipsPlaced = 0;
var battleShip1Placement = 5;
//battleShip1Placement < 1 || 
function tileClicked(img) {
  var lengthImg = document.querySelectorAll("img").length;
  var tagID = img.id;
  var img_el = document.getElementById(tagID);
  var imgSrc = img.getAttribute("src");
  //console.log(imgSrc);
  if ((imgSrc.includes("gridHover") || imgSrc.includes("gridDefault")) && battleShip1Placement > 0) {
    battleShip1Placement--;
    img.src = 'http://server2.sulmaxcp.com/Images/gridShip.png';
  } else if (imgSrc.includes("gridShip")) {
    battleShip1Placement++;
    img.src = 'http://server2.sulmaxcp.com/Images/gridDefault.png';
  }
  document.getElementById("hud").innerHTML = "battleship1Placement: " + battleShip1Placement;
}

function hover(img) {
  var tagID = img.id;
  var img_el = document.getElementById(tagID);
  if (img_el.src.indexOf('http://server2.sulmaxcp.com/Images/gridDefault.png') > -1) {
    img_el.src = 'http://server2.sulmaxcp.com/Images/gridHover.png'
  }
}

function unhover(img) {
  var tagID = img.id;
  var img_el = document.getElementById(tagID);
  if (img_el.src.indexOf('http://server2.sulmaxcp.com/Images/gridHover.png') > -1) {
    img_el.src = 'http://server2.sulmaxcp.com/Images/gridDefault.png'
  }
}

＆＃13;

<body onload="load()">
  <tr>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A1" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A2" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A3" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A4" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A5" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A6" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A7" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A8" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A9" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
    <th><img src="http://server2.sulmaxcp.com/Images/gridDefault.png" draggable="false" class="gridDefault" id="A10" onclick="tileClicked(this)" onmouseover="hover(this)" onmouseout="unhover(this)"></th>
  </tr>
  <p id="hud"></p>
</body>

＆＃13;

减去不起作用的变量

2 个答案: