Question

我正在编写一个程序来为模块添加测试，考试，实践，作业。

关于课程加权，我想知道当用户输入每项任务的权重时是否可以动态更改总权重的值。

像这样：

红色矩形中的输入应加起来并显示在蓝色矩形标签中。反过来，蓝色矩形应该加起来并显示在绿色矩形标签中。

欢迎任何帮助

到目前为止我已尝试过这个：

<form name="Calcultor" Method="Get" id='form1'>First Number:
<input type="text" name="fnum" size="35" id="first">
+ Second Number:
<input type="text" name="snum" size="35" id="sec">
+ Third Number:
<input type="text" name="lom" size="35" id="third3">
<br>
<br>Answer:
<input type="text" name="ans" size="35" id="ans" />
<button type="button" onclick="Calculate();">Calculate</button>

<script lang="javascript">
function Calculate() {
    var first = document.getElementById('first').value;
    if(document.getElementById('sec'))
    {
        var last = document.getElementById('sec').value; 
    }
    else
    {
        var last = 0; 
    }
    if(document.getElementById('third'))
    {
        var third = document.getElementById('third').value; 
    }
    else
    {
        var third = 0; 
    }        
    document.getElementById('ans').value = parseInt(first) + parseInt(last) + parseInt(third);
    document.form1.submit();
}

https://jsfiddle.net/www1fxjb/9/

我要问的是，只要输入字段中的数字发生变化，就会更改标签。

Answer 1

您需要在输入字段属性中使用onchange事件。

然后，您可以将onchange事件指向您的计算方法。

此外，添加＆＃34; 0＆＃34;的默认值在您的输入字段中，以便它始终具有要添加的值，这将防止错误。

<input type="number" name="fnum" size="35" id="first" onchange="Calculate();" value="0"/>
+ Second Number:
<input type="number" name="snum" size="35" id="second" onchange="Calculate();" value="0"/>
+ Third Number:
<input type="number" name="lom" size="35" id="third" onchange="Calculate();" value="0"/>
<br />
Answer:
<input type="text" name="ans" size="35" id="ans" />

使用Javascript：

<script lang="javascript">
    function Calculate() {
        if (document.getElementById('first')) {
            var first = document.getElementById('first').value;
        }
        else {
            var first = 0;
        }
        if (document.getElementById('second'))
        {
            var second = document.getElementById('second').value; 
        }
        else
        {
            var second = 0; 
        }
        if (document.getElementById('third'))
        {
            var third = document.getElementById('third').value; 
        }
        else
        {
            var third = 0; 
        }        
        document.getElementById('ans').value = parseInt(first) + parseInt(second) + parseInt(third);
        document.form1.submit();
    }
</script>

希望它有所帮助。

将输入字段添加到一起并显示在标签中

1 个答案: