单击按钮后，使用javascript将计算结果添加到跨度中

Question

Hi I'm new to javascript and I would like you to help me figure out why I can't get the result of the random number generator to appear in the span tag after the user clicks a calculate button using the min and max number they entered. 嗨，我是javascript的新手，我希望你能帮我找出为什么在用户点击使用最小和最大数字的计算按钮后，我无法得到随机数生成器的结果出现在span标签中进入。 I believe there is nothing wrong with the random number function it's just when I want to use the random number function as an event handler for the onclick event for the button it doesn't work. 我相信随机数函数没有任何问题，当我想使用随机数函数作为onclick事件的事件处理程序时，它不起作用的按钮。 well, what I did was, I made a function called answer to gather the users input and to use that input as a parameter for the the random number function that is being called inside the answer function. 好吧，我做的是，我创建了一个名为answer的函数来收集用户输入并将该输入用作在answer函数内调用的随机数函数的参数。

Then I used the answer function as an event handler for the onclick thinking that it would have the result of the the random number generator and would apply that to the onclick. 然后我使用了回答函数作为onclick的事件处理程序，认为它将具有随机数生成器的结果并将其应用于onclick。 and I stored that in var called storage so I could place the result of the event in the span tag later. 我将其存储在var存储中，因此我可以稍后将事件的结果放在span标记中。

Here is the js fiddle of the code. 这是代码的js小提琴。 can you help me solve my problem by getting the result of the random_number function in to the span $("output") after the button $("calculate") click? 你可以通过在按钮$（“计算”）点击之后将random_number函数的结果输入到span $（“output”）来帮助我解决我的问题吗？

only pure javascript, no jquery please. 只有纯粹的javascript，请不要jquery。

Thank you in advance for your help. 预先感谢您的帮助。 and I'm sorry if I got terminology wrong and for bad spelling. 如果我的术语错误且拼写错误，我很抱歉。 http://jsfiddle.net/jack2ky/WDyMd/ 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>

Answer 1

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

These two statements are called on page load. 在页面加载时调用这两个语句。 What is happening is you are changing the value of variable storage but the statement var storage = $("calculate").onclick = answer; 发生的事情是你正在改变变量storage的值，但语句var storage = $("calculate").onclick = answer; is being called only once when the page loads. 页面加载时只调用一次。 You need to update the answer when user clicks the button. 用户单击按钮时需要更新答案。 So you can remove $("output").firstChild.nodeValue = storage; 所以你可以删除$("output").firstChild.nodeValue = storage; and update the answer function like: 并更新答案功能，如：

 var answer = function(){               
                var miny = parseInt( $("min").value );              
                var maxy = parseInt( $("max").value );                      
                var ans = random_number(miny, maxy);                
                $("output").innerHTML = ans;
         }

Answer 2

This should do it: 这应该这样做：

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

Answer 3

$("output").firstChild.nodeValue = storage; $（“output”）。firstChild.nodeValue = storage;

This line seems to be the problem because your output-Element has no firstChild. 这一行似乎是问题，因为你的output-Element没有firstChild。 So the value gets written nowhere. 所以价值无处可写。

Just use 只是用

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

edit: Tested this in jsFiddle - this is not the solutions as mentioned below! 编辑：在jsFiddle中测试过 - 这不是下面提到的解决方案！

Answer 4

If You are able to get your value in the variable storage 如果您能够在变量存储中获得价值

then you can simply render this value in span as HTML 那么你可以简单地将此值作为HTML呈现在span中

$("#output span").html = storage;

单击按钮后，使用javascript将计算结果添加到跨度中

问题描述

4 个解决方案

解决方案1
1 已采纳 2013-07-29 08:51:30

解决方案2
1 2013-07-29 09:02:37

解决方案3
0 2013-07-29 08:22:34

解决方案4
0 2013-07-29 08:53:44

单击按钮后，使用javascript将计算结果添加到跨度中

问题描述

4 个解决方案

解决方案1 1 已采纳 2013-07-29 08:51:30

解决方案2 1 2013-07-29 09:02:37

解决方案3 0 2013-07-29 08:22:34

解决方案4 0 2013-07-29 08:53:44

解决方案1
1 已采纳 2013-07-29 08:51:30

解决方案2
1 2013-07-29 09:02:37

解决方案3
0 2013-07-29 08:22:34

解决方案4
0 2013-07-29 08:53:44