javascript - 图片未在 Javascript 中显示

问题描述

这应该是一个骰子游戏，其中 2 个人点击掷骰子，然后他们将得到的东西相加，直到达到目标。如果他们翻过 9，他们的分数会重置。骰子的图像应该弹出并显示它们滚动的内容。我知道图像不在此处，但它仍然显示应该有一个带有错误符号的图像。我遇到了第二张图片没有显示的问题，它应该来自 SetPic2 函数。任何帮助，将不胜感激。此外，PASS 按钮应该是让该人轮到其他玩家，但主要问题是图像。

//console.log("file loaded");
//var p1Button = document.getElementById("p1");
var p1Button = document.querySelector("#p1");
var p2Button = document.querySelector("#p2");
var P1Pass = document.querySelector("P1Pass");
var P2Pass = document.querySelector("P2Pass");
var setButton = document.querySelector("#set");
var resetButton = document.querySelector("#reset");
var diceImage = document.querySelector("img");
var diceImage2 = document.querySelector("img2");
var p1Total = document.querySelector("#p1score");
var p2Total = document.querySelector("#p2score");
var targetScore = document.querySelector("#tscore");
var newScore = document.querySelector("#newtarget");
var num = 0,
  num2 = 0,
  p1val = 0,
  p2val = 0,
  target;
var playgame = true;

target = Number(targetScore.textContent); //convert the string to num

p1Button.addEventListener("click", function() {

  if (playgame) {
    //Math.random() --> return a value between 0 & 1
    num = Math.floor((Math.random() * 6) + 1);
    num2 = Math.floor((Math.random() * 6) + 1);
    p1val = p1val + num + num2;
    p1Total.textContent = p1val;

    setButton.disabled = true;
    p1Button.disabled = true;
    p2Button.disabled = false;
    setPic(num);
    setPic2(num2);

    if (num + num2 > 9) {
      p1val = 0;
    }

    if (p1val >= target) {
      playgame = false;
      p1Total.classList.add("winner");
      stopGame();
    }
  }
});

p2Button.addEventListener("click", function() {

  if (playgame) {
    //Math.random() --> return a value between 0 & 1
    num = Math.floor((Math.random() * 6) + 1);
    num2 = Math.floor((Math.random() * 6) + 1);
    p2val = p2val + num + num2;
    p2Total.textContent = p2val;

    setButton.disabled = true;
    p1Button.disabled = false;
    p2Button.disabled = true;
    setPic(num);
    setPic2(num2);

    if (num + num2 > 9) {
      p2val = 0;
    }

    if (p2val >= target) {
      playgame = false;
      p2Total.classList.add("winner");
      stopGame();
    }
  }
});

/*P1Pass.addEventListener("click", function(){
    p1Button.disabled= true;
    p2Button.disabled = false;
});

P2Pass.addEventListener("click", function(){
    p1Button.disabled = false;
    p2Button.disabled = true;
});*/

setButton.addEventListener("click", function() {
  targetScore.textContent = newScore.value;
  target = Number(targetScore.textContent);
  setButton.disabled = true;
  newScore.disabled = true;
});
resetButton.addEventListener("click", function() {
  p1Button.disabled = false;
  p2Button.disabled = true;
  p1Total.textContent = "0";
  p2Total.textContent = "0";
  targetScore.textContent = "25";
  setButton.disabled = false;
  newScore.disabled = false;
  p1Total.classList.remove("winner");
  p2Total.classList.remove("winner");
  playgame = true;
  p1val = 0;
  p2val = 0;
  target = 25;
});

function stopGame() {
  p1Button.disabled = true;
  p2Button.disabled = true;
  setButton.disabled = true;
  newScore.disabled = true;
}

function setPic(val) {
  if (val == 1) {
    diceImage.src = "1.png";
  } else if (val == 2) {
    diceImage.src = "2.png";
  } else if (val == 3) {
    diceImage.src = "3.png";
  } else if (val == 4) {
    diceImage.src = "4.png";
  } else if (val == 5) {
    diceImage.src = "5.png";
  } else if (val == 6) {
    diceImage.src = "6.png";
  }

}

function setPic2(val2) {

  if (val2 == 1) {
    diceImage2.src = "1.png";
  } else if (val2 == 2) {
    diceImage2.src = "2.png";
  } else if (val2 == 3) {
    diceImage2.src = "3.png";
  } else if (val2 == 4) {
    diceImage2.src = "4.png";
  } else if (val2 == 5) {
    diceImage2.src = "5.png";
  } else if (val2 == 6) {
    diceImage2.src = "6.png";
  }
}

.winner {
  color: green;
  background-color: yellow;
}

;

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initialscale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap
.min.css" integrity="sha384-
Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link rel="stylesheet" href="gamestyle.css">
  <title>Dice Game</title>
</head>

<body>
  <div class="container">
    <br>
    <h1> <span id="p1score">0</span> vs. <span id="p2score">0</span> </h1>
    <br>
    <p>Target-Score: <span id="tscore">25</span></p>
    <br>
    <button class="btn btn-success" id="p1"> Player One </button>
    <button class="btn btn-warning" id="p2"> Player Two </button>
    <br><br>
    <button class="btn btn-secondary" id="P1Pass">PASS</button>
    <button class="btn btn-secondary" id="P2Pass">PASS</button>
    <br><br> New Target: <input type="number" id="newtarget">
    <br><br>
    <button class="btn btn-primary" id="set"> Set </button>
    <button class="btn btn-danger" id="reset"> Reset </button>
    <br><br>

    <img src="">
    <img src="">

  </div>
  <script src="gamefunction.js"></script>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-
J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min
.js" integrity="sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.m
in.js" integrity="sha384-
wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

</html>

标签： javascripthtmlcss

javascript - 图片未在 Javascript 中显示

问题描述

解决方案

推荐阅读