时间戳

首页 > 解决方案 > 如何显示多个答案（javascript）

javascript - 如何显示多个答案（javascript）

问题描述

我做了一个 rng（随机数生成器），我想把它做成一个骰子生成器。因此，我需要滚动多个骰子。我的问题是，每次我尝试从不同的“盒子”生成一个数字时，以前的结果都会被覆盖。我尝试将'min'，'max'更改为编号，但是当我这样做时，它不会显示结果。任何帮助表示赞赏。先感谢您。 

<!DOCTYPE html>
    <html>
        <head>
            <title>Random Number Generator</title>
            <script type="text/javascript">

            function generateRandomNumber(){
                var min = parseInt(document.getElementById('min').value);
                var max = parseInt(document.getElementById('max').value);
                var rand = Math.floor(Math.random() * (max - min + 1)) + min;
                document.getElementById('display').innerText = rand;
            }

            </script>
        </head>
        <body>
            <label>Min</label>
            <input id="min" type="text" /><br />
            <label>Max</label>
            <input id="max" type="text" /><br />
            <button onclick="generateRandomNumber();">Generate</button>
            <div id="display" style="font-size:60px;"></div>
        </body>

        <head>
            <title>Random Number Generator</title>
            <script type="text/javascript">

            function generateRandomNumber(){
                var min = parseInt(document.getElementById('min').value);
                var max = parseInt(document.getElementById('max').value);
                var rand = Math.floor(Math.random() * (max - min + 1)) + min;
                document.getElementById('display').innerText = rand;
            }

            </script>
        </head>
        <body>
            <label>Min</label>
            <input id="min" type="text" /><br />
            <label>Max</label>
            <input id="max" type="text" /><br />
            <button onclick="generateRandomNumber();">Generate</button>
            <div id="display" style="font-size:60px;"></div>
        </body>

        <head>
            <title>Random Number Generator</title>
            <script type="text/javascript">

            function generateRandomNumber(){
                var min = parseInt(document.getElementById('min').value);
                var max = parseInt(document.getElementById('max').value);
                var rand = Math.floor(Math.random() * (max - min + 1)) + min;
                document.getElementById('display').innerText = rand;
            }

            </script>
        </head>
        <body>
            <label>Min</label>
            <input id="min" type="text" /><br />
            <label>Max</label>
            <input id="max" type="text" /><br />
            <button onclick="generateRandomNumber();">Generate</button>
            <div id="display" style="font-size:60px;"></div>
        </body>

        <head>
            <title>Random Number Generator</title>
            <script type="text/javascript">

            function generateRandomNumber(){
                var min = parseInt(document.getElementById('min').value);
                var max = parseInt(document.getElementById('max').value);
                var rand = Math.floor(Math.random() * (max - min + 1)) + min;
                document.getElementById('display').innerText = rand;
            }

            </script>
        </head>
        <body>
            <label>Min</label>
            <input id="min" type="text" /><br />
            <label>Max</label>
            <input id="max" type="text" /><br />
            <button onclick="generateRandomNumber();">Generate</button>
            <div id="display" style="font-size:60px;"></div>
        </body>

        <head>
            <title>Random Number Generator</title>
            <script type="text/javascript">

            function generateRandomNumber(){
                var min = parseInt(document.getElementById('min').value);
                var max = parseInt(document.getElementById('max').value);
                var rand = Math.floor(Math.random() * (max - min + 1)) + min;
                document.getElementById('display').innerText = rand;
            }

            </script>
        </head>
        <body>
            <label>Min</label>
            <input id="min" type="text" /><br />
            <label>Max</label>
            <input id="max" type="text" /><br />
            <button onclick="generateRandomNumber();">Generate</button>
            <div id="display" style="font-size:60px;"></div>
        </body>

        <head>
            <title>Random Number Generator</title>
            <script type="text/javascript">

            function generateRandomNumber(){
                var min = parseInt(document.getElementById('min').value);
                var max = parseInt(document.getElementById('max').value);
                var rand = Math.floor(Math.random() * (max - min + 1)) + min;
                document.getElementById('display').innerText = rand;
            }

            </script>
        </head>
        <body>
            <label>Min</label>
            <input id="min" type="text" /><br />
            <label>Max</label>
            <input id="max" type="text" /><br />
            <button onclick="generateRandomNumber();">Generate</button>
            <div id="display" style="font-size:60px;"></div>
        </body>

        <head>
            <title>Random Number Generator</title>
            <script type="text/javascript">

            function generateRandomNumber(){
                var min = parseInt(document.getElementById('min').value);
                var max = parseInt(document.getElementById('max').value);
                var rand = Math.floor(Math.random() * (max - min + 1)) + min;
                document.getElementById('display').innerText = rand;
            }

            </script>
        </head>
        <body>
            <label>Min</label>
            <input id="min" type="text" /><br />
            <label>Max</label>
            <input id="max" type="text" /><br />
            <button onclick="generateRandomNumber();">Generate</button>
            <div id="display" style="font-size:60px;"></div>
        </body>


    </html>

标签： javascript

解决方案

这里有一些东西，但是如果您打算以任何方式选择和使用这些元素，则需要具有唯一的元素 ID 。

我已经把这个问题简化为最简单的情况，只有两个盒子。尝试这个：

示例 JSBin 演示

Javascript...

function generateRandomNumber(elementid){
    var min = parseInt(document.getElementById('min' + elementid).value);
    var max = parseInt(document.getElementById('max' + elementid).value);
    var rand = Math.floor(Math.random() * (max - min + 1)) + min;
    document.getElementById('display' + elementid).innerText = rand;
}

HTML...

<label>Min</label>
<input id="min1" type="text" /><br />
<label>Max</label>
<input id="max1" type="text" /><br />
<button onclick="generateRandomNumber('1');">Generate</button>
<div id="display1" style="font-size:60px;"></div>

<label>Min</label>
<input id="min2" type="text" /><br />
<label>Max</label>
<input id="max2" type="text" /><br />
<button onclick="generateRandomNumber('2');">Generate</button>
<div id="display2" style="font-size:60px;"></div>

我做的最重要的事情是使 id 独一无二。不再有一个id="display"元素，但现在有一个id="display1"and id="display2"。

另外：您有多个<HEAD/>块和<BODY/>块相互交叉。这可能不是主要问题，但没有帮助。

推荐阅读