Fatal编程技术网
  • javascript/
  • Javascript 在html页面中添加3个文本框以计算以下公式（（a*b）+；（b*c））/（a+；b）

Javascript 在html页面中添加3个文本框以计算以下公式（（a*b）+；（b*c））/（a+；b）

javascript

Javascript 在html页面中添加3个文本框以计算以下公式（（a*b）+；（b*c））/（a+；b）,javascript,Javascript,我试图创建一个html页面。在这里，我需要添加3个文本框，用户将在其中输入3个数字：a、b、c 然后我需要添加一个按钮，单击该按钮将计算以下公式： （（ab）+（bc））/（a+b） 结果将显示在警报中 这是我目前的代码： <html> <head> <script type="text/javascript" src="exercitiu1.js"></script> </he

我试图创建一个html页面。在这里，我需要添加3个文本框，用户将在其中输入3个数字：a、b、c

然后我需要添加一个按钮，单击该按钮将计算以下公式： （（ab）+（bc））/（a+b）

结果将显示在警报中

这是我目前的代码：

<html>
    <head>
    <script type="text/javascript" src="exercitiu1.js"></script>
    </head>
    <body>
        <div class="formrow">
            <span class="labelstyle">Nr1:</span><input type="text" id="Nr1" class="textbox1style" />
        </div>
        <div class="formrow">
            <span class="labelstyle">Nr2: </span><input type="text" id="Nr2" class="textbox2style" />
        </div>
        <div class="formrow">
            <span class="labelstyle">Nr3: </span><input type="text" id="Nr3" class="textbox3style" />
        </div>
            <span>Result: </span> <div id="calc-result">===</div>
        </div>
        <input type="button" value="Multiply" onclick = "Multiply();" />
        </body>
</html>

function Multiply()
{
    var a = document.getElementById("Nr1");
    var b = document.getElementById("Nr2");
    var c = document.getElementById("Nr3");
    
    var product = document.getElementById("calc-result");
    
    product.innerHTML = parseInt(a.value) * parseInt(b.value);
    product.innerHTML = parseInt(b.value) * parseInt(c.value);
}


Nr1：
Nr2：
Nr3：
结果:===
函数乘法（）
{
var a=document.getElementById（“Nr1”）；
var b=document.getElementById（“Nr2”）；
var c=document.getElementById（“Nr3”）；
var product=document.getElementById（“计算结果”）；
product.innerHTML=parseInt（a.value）*parseInt（b.value）；
product.innerHTML=parseInt（b.value）*parseInt（c.value）；
}
在你的问题中有很多要处理的，所以要做好准备

使用
元素包装您的输入。这使您能够侦听
submit
事件，并使用构造函数从该表单中的输入中获取所有值。它取消了选择每个输入字段并读取其值的任务

如果希望用户只输入数字，请切换到
type=“number”
输入字段。它将防止在其内部使用
0-9
以外的任何字符

是通过描述元素的用途而伴随
元素的元素。使用这些元素而不是
元素。
上的
for
属性应指向与其配对的
的
id

应使用
event.preventDefault（）
在事件处理程序中禁用表单的提交行为。现在，您可以在提交表单时编写自己的行为，比如使用表单中的所有值进行计算

我已将
更改为一个元素，该元素可用于显示输入元素的计算结果

下面的示例在一个工作代码段中显示了上面的所有示例。我建议您尝试学习这些元素，因为它们是HTML表单工具包的重要组成部分

const multiplyForm=document.querySelector（“#multiply form”）；
const product=document.querySelector（“计算结果”）；
multiplyForm.addEventListener（'submit'，事件=>{
const formData=新formData（event.target）；
常数a=数字（formData.get（'a'）；
const b=数字（formData.get（'b'）；
const c=Number（formData.get（'c'）；
product.value=（（a*b）+（b*c））/（a+b）；
event.preventDefault（）；
});


Nr1：
Nr2：
Nr3：
结果:
倍增

那么你的问题到底是什么呢？我需要帮助来解决这个问题。首先将函数
Multiply
放在脚本标记中。然后整理html代码。格式不对，非常感谢！