以JavaScript形式输入进程号

Question

我正在构建一个允许计算Bishop得分的表单：https://jsfiddle.net/molecoder/zv2kww5a/3/。

如您所见，用户无需提交任何表单，以便显示Bishop Score值。

在第一阶段，所有表单输入都是使用无线电类型的输入构建的，如下图所示：

那么，现在这个实现存在问题......用户需要能够在扩张中写一个数字（0到10之间），如下图所示：

这句话，需要一种更有效的方法。输入数字的最小值和最大值定义在0到10之间，允许最多两个小数位（step=".01"）是我正在寻找的。该部分中的HTML代码已修改为：

<label><b>Dilation</b></label><br/>
<input type="number" id="selecteddilation" min="0" max="10" step=".01" name="selecteddilation" value="2"/><br/>

我可以使用输入的id获取JavaScript输入的值，例如：

var dilation = document.getElementById('selecteddilation').value;

目前的代码可以在这里看到：https://jsfiddle.net/molecoder/00Lsx5mq/16/

getDilation（）函数如何返回该输入？

// getDilation() finds the points based on the dilation.
// Here, we need to take user's the selection from radio button selection
function getDilation()
{  
    var dilationPoints=0;
    //Get a reference to the form id="bishopform"
    var theForm = document.forms["bishopform"];
    //Get a reference to the dilation the user Chooses name=selecteddilation":
    var selectedDilation = theForm.elements["selecteddilation"];
    //Here since there are 4 radio buttons selectedDilation.length = 4
    //We loop through each radio buttons
    for(var i = 0; i < selectedDilation.length; i++)
    {
        //if the radio button is checked
        if(selectedDilation[i].checked)
        {
            //we set dilationPoints to the value of the selected radio button
            //i.e. if the user choose the 0 cm we set it to 0
            //by using the dilation array
            //We get the selected Items value
            //For example dilation["Round11".value]"
            dilationPoints = dilation[selectedDilation[i].value];
            //If we get a match then we break out of this loop
            //No reason to continue if we get a match
            break;
        }
    }
    //We return the dilationPoints
    return dilationPoints;
}

Answer 1

这是从该输入字段中检索数值的最直接方法：

function getDilation()
{  
    return parseFloat(document.querySelector('#selecteddilation').value);
}

请注意此处使用parseFloat()。在用于计算结果的每个函数中，您将返回一个字符串。强烈建议您将这些字符串强制转换为整数/浮点数，以便您的数学运算符不会自动为您执行此操作。

您可以使用parseInt()或一元+运算符来实现整数。

修改

在回答有关不更新结果的问题时，您还需要包含一个事件监听器：

 onchange="calculateTotalBishop()" //in style of your other listeners

到HTML元素。