单击按钮后，使用javascript将计算结果添加到范围_Javascript_Javascript Events

单击按钮后，使用javascript将计算结果添加到范围

javascript

单击按钮后，使用javascript将计算结果添加到范围,javascript,javascript-events,Javascript,Javascript Events,您好，我是javascript新手，我希望您能帮助我找出为什么在用户使用输入的最小值和最大值单击“计算”按钮后，无法在span标记中显示随机数生成器的结果。我相信随机数函数没有错，只是当我想使用随机数函数作为按钮的onclick事件的事件处理程序时，它不起作用。我所做的是，我做了一个名为answer的函数来收集用户的输入，并将该输入用作answer函数中被调用的随机数函数的参数然后，我将应答函数用作onclick的事件处理程序，认为它将得到随机数生成器的结果，并将其应用于onclick。我将其

您好，我是javascript新手，我希望您能帮助我找出为什么在用户使用输入的最小值和最大值单击“计算”按钮后，无法在span标记中显示随机数生成器的结果。我相信随机数函数没有错，只是当我想使用随机数函数作为按钮的onclick事件的事件处理程序时，它不起作用。我所做的是，我做了一个名为answer的函数来收集用户的输入，并将该输入用作answer函数中被调用的随机数函数的参数

然后，我将应答函数用作onclick的事件处理程序，认为它将得到随机数生成器的结果，并将其应用于onclick。我将其存储在名为storage的var中，以便稍后将事件的结果放入span标记中

下面是代码的js部分。单击按钮$（“计算”）后，您能将随机数函数的结果输入到span$（“输出”）中来帮助我解决问题吗

请只使用纯javascript，不使用jquery

提前感谢您的帮助。如果我把术语弄错了，拼写也不好，我很抱歉

输入最小值：


输入最大值：


var$=函数（id）{
返回文档.getElementById（id）；
}
window.onload=函数（）{
var随机数=函数（最小值、最大值、位数）{
数字=isNaN（数字）？0:parseInt（数字）；
如果（数字<0）{
数字=0；
}否则，如果（数字>16）{
数字=16
}
如果（位数==0）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}否则{
var rand=Math.random（）*（max-min）+min；
返回parseFloat（rand.toFixed（数字））；
}
}
变量存储=$（“计算”）。onclick=答案；
var answer=函数（）{
var miny=$（“最小”）.值；
var maxy=$（“最大”）值；
返回随机数（miny，maxy）；
}
$（“输出”）.firstChild.nodeValue=存储；
}

$（“输出”）.firstChild.nodeValue=存储

这一行似乎是问题所在，因为您的输出元素没有第一个子元素。所以这个值不会被写入任何地方

只用

> $("output").nodeValue = storage;

编辑：在JSFIDLE中对此进行了测试-这不是下面提到的解决方案

var storage = $("calculate").onclick = answer;
...
$("output").firstChild.nodeValue = storage;

这两条语句在页面加载时调用。发生的情况是，您正在更改变量

storage

的值，但语句

var storage=$（“calculate”）。onclick=answer；

仅在页面加载时调用一次。当用户单击按钮时，您需要更新答案。因此，您可以删除

$（“输出”）.firstChild.nodeValue=storage并更新应答功能，如：
 var answer = function(){               
                var miny = parseInt( $("min").value );              
                var maxy = parseInt( $("max").value );                      
                var ans = random_number(miny, maxy);                
                $("output").innerHTML = ans;
         }

如果您能够在变量存储中获取您的值
然后，您可以简单地在span中将该值呈现为HTML
$("#output span").html = storage;

这应该做到：
<!DOCTYPE html>
<html>
<head>
    <script>
            var $ = function(id){
                return document.getElementById(id);
            }
            window.onload = function () {
                var random_number = function(min, max, digits){
                    digits = isNaN(digits) ? 0 : parseInt(digits);

                    if(digits < 0){
                        digits = 0;
                    }else if (digits > 16){
                        digits = 16
                    }
                    if(digits == 0){
                        return Math.floor(Math.random() * (max - min +1)) +min;
                    }else {
                        var rand = Math.random() * (max - min) + min;
                        return parseFloat(rand.toFixed(digits));
                    }
                }
                $("calculate").onclick = function() {
                    var miny = $("min").value;
                    var maxy = $("max").value;
                    $("output").firstChild.nodeValue = random_number(miny, maxy);
                }
            }
    </script>
</head>
<body>
       <label for="min">Enter the min:</label>
    <input type="text" id = "min" /> <br />

    <label for="max">Enter the max:</label>
    <input type="text" id = "max" /> <br />

    <input type="button" id = "calculate" value = "calculate"/>
    <span id ="output">&nbsp;</span>
</body>
</html>


var$=函数（id）{
返回文档.getElementById（id）；
}
window.onload=函数（）{
var随机数=函数（最小值、最大值、位数）{
数字=isNaN（数字）？0:parseInt（数字）；
如果（数字<0）{
数字=0；
}否则，如果（数字>16）{
数字=16
}
如果（位数==0）{
返回Math.floor（Math.random（）*（max-min+1））+min；
}否则{
var rand=Math.random（）*（max-min）+min；
返回parseFloat（rand.toFixed（数字））；
}
}
$（“计算”）.onclick=function（）{
var miny=$（“最小”）.值；
var maxy=$（“最大”）值；
$（“输出”）.firstChild.nodeValue=随机数（miny，maxy）；
}
}
输入最小值：


输入最大值：


感谢您的回复，但它似乎不起作用。当用户输入最小值和最大值时，该范围内的随机数应在单击后显示在量程标记的下方。试着摆脱firstChild，但仍然不起作用。目前我没有时间进一步测试-但我回家后会再看看，如果没有其他人响应，我会测试它。op要求纯javascript；没有jquery。谢谢你的帮助。谢谢你的帮助。它可以工作：）我对这个窗口感到困惑。onload对象属性的事情。有时我可以调用window.onload函数中的东西，但它可以工作，有时则不能。这是我希望在学习js的过程中解决的一件事。我想我理解你所做的。但是关于parseInt，我认为使用parseInt的一个很好的例子是，当用户输入一个小数点为198.345的数字时，它会将其截断为198。为什么在这种情况下，当用户输入1-10max而忽略parseInt时，输出111会对结果产生影响。函数的作用是：解析字符串并返回整数。在这种情况下，这是必需的，因为您将从文本框中获取最小值和最大值，默认情况下，文本框将作为数字字符串进行计算。因此，如果min=5；max=10
像min+max
这样的表达式的输出将是510
而不是15
。您可以使用parseFloat（）
解析浮点数。是的，您也可以使用parseInt（）来截断带小数的数字，但这不是它的实际用途。
<!DOCTYPE html>
<html>
<head>
    <script>
            var $ = function(id){
                return document.getElementById(id);
            }
            window.onload = function () {
                var random_number = function(min, max, digits){
                    digits = isNaN(digits) ? 0 : parseInt(digits);

                    if(digits < 0){
                        digits = 0;
                    }else if (digits > 16){
                        digits = 16
                    }
                    if(digits == 0){
                        return Math.floor(Math.random() * (max - min +1)) +min;
                    }else {
                        var rand = Math.random() * (max - min) + min;
                        return parseFloat(rand.toFixed(digits));
                    }
                }
                $("calculate").onclick = function() {
                    var miny = $("min").value;
                    var maxy = $("max").value;
                    $("output").firstChild.nodeValue = random_number(miny, maxy);
                }
            }
    </script>
</head>
<body>
       <label for="min">Enter the min:</label>
    <input type="text" id = "min" /> <br />

    <label for="max">Enter the max:</label>
    <input type="text" id = "max" /> <br />

    <input type="button" id = "calculate" value = "calculate"/>
    <span id ="output">&nbsp;</span>
</body>
</html>