范围编号生成器

Question

对 JavaScript 很陌生，遇到了一些麻烦。我的任务是点击一个按钮，它会生成一个 1-20 之间的数字。一切正常，除了函数的输出被放置在文本框之外这一事实。任何关于如何将输出输入文本框的建议都会很棒！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
<script type="text/javascript">
    function getRNG(min, max) {
    return function() {
    return Math.floor(Math.random() * (max - min + 1) + min);
    }
    }
    d20 = getRNG(1, 20);
    function rollD20() {
    document.getElementById("output").innerHTML = d20();
    }
</script>
<body>
<input type="text" disabled="disabled" size="2" id="txtNumber" />
<div id="output"></div>
<button onclick="rollD20()">Roll</button>
</body>
</html>

Answer 1

您希望将值放在文本框内 input (#txtNumber)
但您的目标是 DIV #output

使用：

<script>
  function getRNG(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }
  function rollD20() {
    document.getElementById("txtNumber").value = getRNG(1, 20);
  }
</script>

<body>
  <input type="text" disabled="disabled" size="2" id="txtNumber" />
  <div id="output"></div>
  <button onclick="rollD20();">Roll</button>
</body>

Answer 2

我修复了你的代码，尝试使用这个：

<script>
    function getRNG(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    function rollD20() {
        document.getElementById("output").innerHTML = getRNG(1, 20);
    }
</script>

Answer 3

您有 1 个问题，问题是您正在设置 div 的 innerHTML 值（第一个宽度为 0 像素），当您将内容放入其中时，它会扩展以适合其内容。

您要做的就是像这样分配 txtNumber 的值

 function rollD20() {
      document.getElementById("txtNumber").value = d20();
 }

另一个节点将改变返回一个 returns 一个值的函数并稍微清理代码（将函数调用放在 rollD20 函数中）

 function getRNG(min, max) {
     return Math.floor(Math.random() * (max - min + 1) + min);
 }

 function rollD20() {
      document.getElementById("txtNumber").value = getRNG(1, 20);
 }

全部合并为一个片段

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<html>
    <script type="text/javascript">
        function getRNG(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min);
        }

        function rollD20() {
            document.getElementById("txtNumber").value = getRNG(1, 20);
        }
    </script>
    <body>
        <input type="text" disabled="disabled" size="2" id="txtNumber" />
        <div id="output"></div>
        <button onclick="rollD20()">Roll</button>
    </body>
</html>

范围编号生成器

Range Number Generator

javascript

range

output