5

嗨，我是 javascript 新手，我希望你能帮我弄清楚为什么在用户使用他们的最小和最大数字单击计算按钮后，我无法让随机数生成器的结果出现在 span 标签中进入。我相信随机数函数没有任何问题，只是当我想将随机数函数用作按钮的 onclick 事件的事件处理程序时，它不起作用。好吧，我所做的是，我创建了一个名为 answer 的函数来收集用户输入并将该输入用作在 answer 函数内部调用的随机数函数的参数。

然后我使用 answer 函数作为 onclick 的事件处理程序，认为它会具有随机数生成器的结果并将其应用于 onclick。我将它存储在称为 storage 的 var 中，以便稍后将事件的结果放在 span 标签中。

这是代码的js小提琴。单击按钮 $("calculate") 后，您可以通过将 random_number 函数的结果输入到 span $("output") 中来帮助我解决我的问题吗？

只有纯 javascript，请不要使用 jquery。

预先感谢您的帮助。如果我弄错了术语和拼写错误，我很抱歉。http://jsfiddle.net/jack2ky/WDyMd/

        <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>
<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));
        }
    }


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

     var answer = function(){
            var miny = $("min").value;
            var maxy = $("max").value;
            return random_number(miny, maxy);
     }
    $("output").firstChild.nodeValue = storage;

}

</script>

</body>
</html>
4

4 回答 4

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

这两个语句在页面加载时调用。发生的事情是您正在更改变量的值，storage但该语句var storage = $("calculate").onclick = answer; 仅在页面加载时被调用一次。当用户单击按钮时，您需要更新答案。因此，您可以删除$("output").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;
         }
于 2013-07-29T08:51:30.997 回答
1

这应该这样做：

<!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>
于 2013-07-29T09:02:37.657 回答
0

$("输出").firstChild.nodeValue = storage;

这条线似乎是问题，因为您的输出元素没有 firstChild。因此该值无处写入。

只需使用

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

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

于 2013-07-29T08:22:34.643 回答
0

如果您能够在变量存储中获得您的价值

那么你可以简单地将这个值在 span 中呈现为 HTML

$("#output span").html = storage;
于 2013-07-29T08:53:44.513 回答