javascript - 从buttonclick上的输入框中绘制百分比条

Question

我有两个输入框，我想要的是单击一个按钮以显示第一个数字表示的整体百分比。我找到了一个用于绘制我喜欢的进度条的 JavaScript 代码，当我在一个数字中“硬编码”以表示它时，下面的代码就可以工作。如果有人可以帮助我处理变量，我将不胜感激。

<FORM NAME="myform" ACTION="" METHOD="GET">
Enter something in the box: <BR>
<INPUT TYPE="text" NAME="Input" VALUE="">
<INPUT TYPE="text" NAME="Input2" VALUE="">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="drawPercentBar(800, Number(Input/Input2*100), 'blue', 'red')">
</FORM> 

这将绘制带有 NaN% 错误的百分比条。

Answer 1

您应该使用以下数字而不是 Number(Input/Input2*100)

Number(document.getElementsByName('Input')[0].value/document.getElementsByName('Input2')[0].value*100)

但请确保输入的值不是 0。

Answer 2

我就是这样做的http://jsfiddle.net/dangoodspeed/JbEdZ/1/

$(function() {
    $(".percent").click(function() {
        var percent=parseInt($(".input1").val())/parseInt($(".input2").val());
        $("#percentage").css("width",parseInt(percent*parseInt($("#percentageBar").css("width"))));
    });
})

Answer 3

NaN代表非数字。

因此，您尝试划分Input/Input2哪些不是数字。它们是文本框的名称。

你能试一下吗

... onclick="drawPercentBar(800, 
                            Number(
                                  document.getElementsByName('Input')[0]/
                                  document.getElementsByName('Input2')[0]*
                                  100
                                  ), 
                            'blue', 
                            'red')" ...