时间戳

首页 > 解决方案 > 如何在我的函数中使用 html 用户输入作为 javascript 变量？

javascript - 如何在我的函数中使用 html 用户输入作为 javascript 变量？

问题描述

我正在尝试创建一个骰子滚动应用程序，该应用程序利用用户输入作为函数的参数。我希望能够输入骰子应该有的面数，以及应该掷多少个骰子。例如，用户应该能够掷 5、6 面骰子……或 2、8 面骰子……等等……这两个变量由用户决定并输入到表格中。我用“骰子类”和几个函数编写了一些代码，这些函数在两个变量被硬编码时起作用。问题是由于某种原因该函数无法读取用户输入。

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="dicex.css" />
    <title>Dice</title>
  </head>
  <body>
    <div class="container">
      <form id="form" class="form" onsubmit="return false">
        <h2>Dice Roller</h2>
        <div class="form-control">
          <input type="number" id="sides" placeholder="How many sides?" />
        </div>
        <div class="form-control">
          <input type="number" id="quantity" placeholder="How many dice?" />
        </div>
        <div class="form-control">
          <p id="results">My Results Go Here</p>
        </div>
        <button id="roll">Roll</button>
      </form>
    </div>
    <script src="dice.js"></script>
  </body>
</html>

Javascript

// Query Selectors
let sides = document.querySelector("#sides").value;
let quantity = document.querySelector("#quantity").value;
let results = document.querySelector("#results");
let roll = document.querySelector("#roll");

// Dice Class
class Die {
  constructor(sides) {
    this.sides = sides;
  }

  roll() {
    let random_side = Math.floor(Math.random() * this.sides) + 1;
    return random_side;
  }
}

// Dice Roll Function
let create = function (e) {
  let a = [];

  for (let i = 0; i < 5; i++) {
    let n = new Die(6);
    let r = n.roll();
    a.push(r);
  }

  let sum = a.reduce((a, b) => a + b);

  results.textContent = `You rolled ${a} for a total of ${sum}!`;
  e.preventDefault();
};

// Event Listeners
roll.addEventListener("click", create);

标签： javascripthtmlfunctionvariablesinput

解决方案

create在由事件触发的函数内使用它们。

// Query Selectors
//let sides = document.querySelector("#sides").value;
//let quantity = document.querySelector("#quantity").value;
let results = document.querySelector("#results");
let roll = document.querySelector("#roll");

// Dice Class
class Die {
  constructor(sides) {
    this.sides = sides;
  }

  roll() {
    let random_side = Math.floor(Math.random() * this.sides) + 1;
    return random_side;
  }
}

// Dice Roll Function
let create = function (e) {
  let a = [];

  // Here
  let sides = document.querySelector("#sides").value;
  let quantity = document.querySelector("#quantity").value;

  for (let i = 0; i < quantity; i++) {  // use here
    let n = new Die(sides);             // and here
    let r = n.roll();
    a.push(r);
  }

  let sum = a.reduce((a, b) => a + b);

  results.textContent = `You rolled ${a} for a total of ${sum}!`;
  e.preventDefault();
};

// Event Listeners
roll.addEventListener("click", create);

推荐阅读