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

【问题标题】：How do I use html user input as a javascript variable in my function?如何在我的函数中使用 html 用户输入作为 javascript 变量？
【发布时间】：2021-09-26 17:12:29
【问题描述】：

我正在尝试创建一个掷骰子应用程序，该应用程序利用用户输入作为函数的参数。我希望能够输入骰子应该有的面数，以及应该掷多少个骰子。例如，用户应该能够掷 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);

【问题讨论】：

您需要在用户设置后获取输入值...在create() 中。现在您只在页面加载时获取值

标签： javascript html function variables input

【解决方案1】：

在由事件触发的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);

【讨论】：

谢谢！多么简单……我只花了 2 个小时试图解决这个问题，哈哈。那么这是一个范围问题吗？我原以为该函数可以访问全局查询选择器？
该函数正在获取全局值...哪些是页面加载时的值。用户在之后更改了输入的值，而不是变量的值。 ;)