时间戳

首页 > 解决方案 > 如何显示函数的输入

javascript - 如何显示函数的输入

问题描述

我正在创建一个游戏，让用户从列表框中选择他们想要掷多少个骰子，在用户输入他们的输入后，将出现该数量的骰子。然后用户可以单击按钮来掷骰子，它将掷出他们选择的骰子数量。然后我想将数字放在下面以显示每个数字滚动了多少次，然后如果用户再次滚动则重置。目前，我希望在其中显示数字的位置为空且未定义。我该如何解决。

function GetQty() {
  var val = document.getElementById("myList").value;
  SetUpDice(val);
}
SetUpDice(val);

function SetUpDice(Val) {
  let dices = document.getElementById("dices");
  dices.innerHTML = "";
  //Loop to show questionDie
  for (i = 1; i <= Val; i++) {
    let img = document.createElement('img');
    img.src = "dieImages/question-mark-dice.jpg", img.id = "dieImg" + i, onclick = "rollAlldice()";
    dices.appendChild(img);
  }
  rollAlldice(Val);
}

function rollAlldice() {
  //roll all dice randomly
  for (var i = 1; i <= 5; i++) {
    var ran = Math.floor(6 * Math.random()) + 1;
    document.getElementById('dieImg' + i).setAttribute("src", "dieImages/die" + ran + ".jpg");
    if (ran == 1)
      countOne++;
    else if (ran == 2)
      countTwo++;
    else if (ran == 3)
      countThree++;
    else if (ran == 4)
      countFour++;
    else if (ran == 5)
      countFive++;
    else if (ran == 6)
      countSix++;
  }
  document.getElementById("display").innerHTML = countOne + "," + countTwo + "," + countThree + "," + countFour + "," + countFive;
}
var countOne = 0;
var countTwo = 0;
var countThree = 0;
var countFour = 0;
var countFive = 0;
var countSix = 0;
body {
  text-align: center;
}

img {
  height: 150px;
}

.document {
  text-size-adjust: 50px;
}
<body>
  <p>
    <label># of dice: </label>
    <select id="myList">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <!-- <option value = "6">6</option> -->
    </select>
    <button type="button" onclick="GetQty()">Roll dice!</button>
    <div id="dices"></div>
  </p>
  <hr>
  <p id="display">--</p>
</body>

标签： javascripthtml

解决方案

你读过错误吗？您正在尝试在定义之前使用事物。

var countOne = 0;
var countTwo = 0;
var countThree = 0;
var countFour = 0;
var countFive = 0;
var countSix = 0;
var val = 0;

function GetQty() {
 val = document.getElementById("myList").value;
  SetUpDice(val);
}
SetUpDice(val);

function SetUpDice(Val) {
  let dices = document.getElementById("dices");
  dices.innerHTML = "";
  //Loop to show questionDie
  for (i = 1; i <= Val; i++) {
    let img = document.createElement('img');
    img.src = "dieImages/question-mark-dice.jpg", img.id = "dieImg" + i, onclick = "rollAlldice()";
    dices.appendChild(img);
  }
  rollAlldice(Val);
}

function rollAlldice() {
  //roll all dice randomly
  for (var i = 1; i <= 5; i++) {
    var ran = Math.floor(6 * Math.random()) + 1;
    const el =  document.getElementById('dieImg' + i);
    if(el){
       el.setAttribute("src", "dieImages/die" + ran + ".jpg");
    }

    if (ran == 1)
      countOne++;
    else if (ran == 2)
      countTwo++;
    else if (ran == 3)
      countThree++;
    else if (ran == 4)
      countFour++;
    else if (ran == 5)
      countFive++;
    else if (ran == 6)
      countSix++;
  }
  document.getElementById("display").innerHTML = countOne + "," + countTwo + "," + countThree + "," + countFour + "," + countFive;
}
body {
  text-align: center;
}

img {
  height: 150px;
}

.document {
  text-size-adjust: 50px;
}
<body>
  <p>
    <label># of dice: </label>
    <select id="myList">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <!-- <option value = "6">6</option> -->
    </select>
    <button type="button" onclick="GetQty()">Roll dice!</button>
    <div id="dices"></div>
  </p>
  <hr>
  <p id="display">--</p>
</body>

推荐阅读