javascript - 如何在 html 正文上打印函数结果？

Question

我需要在跨度上显示 y 的结果。

目前，当我单击播放按钮时，它对我没有任何作用。我的代码可能还有更多问题。

我需要该函数执行的操作是获取用户在输入框中输入的数字，将其转换为 int，并将其存储在“x”内。Y 是存储此循环发生的时间量。当 x 大于 0 时，掷骰子求和。

如果总和恰好为 7，则 x+4，否则 x-1。每次此函数循环时，x-1。

谢谢。

function playLoop() {
  var x = parseInt(document.getElementById("amount").val());
  var y = 0;
  while (x > 0) {
    var die1 = Math.floor((Math.random() * 6) + 1);
    var die2 = Math.floor((Math.random() * 6) + 1);
    if (die1 + die2 == 7) {
      x + 4;
    } else {
      x - 1;
    }
  }
  x--
  y++
  document.getElementById("result").innerHTML = y;
}

<div class="container">
  <label>Starting Bet:</label>
  <input id="amount" type="text">
  <button onclick="playLoop()">Play</button>
  <span id="result"></span>
</div>

Answer 1

获取输入元素值的方法是使用 .value，而不是 .val()(这是一个 jQuery 方法)。

你的while()循环永远不会结束，因为你在循环期间永远不会修改x。 x + 4 应为 x += 4，x - 1 应为 x -= 1 或 x--.

并且您需要在循环内而不是在循环结束时递增y并递减x。

function playLoop() {
  var x = parseInt(document.getElementById("amount").value);
  var y = 0;
  while (x > 0) {
    var die1 = Math.floor((Math.random() * 6) + 1);
    var die2 = Math.floor((Math.random() * 6) + 1);
    if (die1 + die2 == 7) {
      x += 4;
    } else {
      x--;
    }
    y++;
    x--;
  }

  document.getElementById("result").innerHTML = y;
}

<div class="container">
  <label>Starting Bet:</label>
  <input id="amount" type="text">
  <button onclick="playLoop()">Play</button>
  <span id="result"></span>
</div>