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

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

<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 2

你有一个问题，问题是你正在设置div的innerHTML值（首先是0 px宽度），当你把你的内容放入其中时，会扩展以适应它的内容。

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

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

另一个节点是改变而不是返回一个返回值的函数并稍微清理一下代码（将函数调用放在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>

范围编号生成器

2 个答案: