在一个html页面中添加3个文本框计算如下公式((ab)+(bc))/(a+b)

Question

I was trying to create a html page.我试图创建一个 html 页面。 Here I need to add 3 text boxes in which the user will input 3 numbers :a,b,c在这里，我需要添加 3 个文本框，用户将在其中输入 3 个数字：a、b、c

Then I need to add a button that once clicked will calculate the following formula: ((a b)+(b c))/(a+b).然后我需要添加一个按钮，一旦点击将计算以下公式：((a b)+(b c))/(a+b)。

The result will be displayed in an alert.结果将显示在警报中。

This is my code so far:到目前为止，这是我的代码：

<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);
}

Answer 1

There is a lot to handle in your question, so buckle up.你的问题有很多要处理的，所以系好安全带。

Use a <form> element to wrap around your inputs.使用<form>元素环绕您的输入。 This enables you to listen for the submit event and use theFormData constructor to get all the values from your inputs inside of that form.这使您能够侦听submit事件并使用FormData构造函数从该表单内的输入中获取所有值。 It takes away the task of selecting each and every input field and read its value.它消除了选择每个输入字段并读取其值的任务。

If you want the user to input only numbers, then switch to type="number" input fields.如果您希望用户只输入数字，则切换到type="number"输入字段。 It will prevent any character other than 0-9 to be used inside of it.它将防止在其中使用除0-9以外的任何字符。

<label> is an element that accompanies <input> elements by describing what they are for. <label>是一个元素，通过描述它们的用途来伴随<input>元素。 Use these instead of <span> elements.使用这些代替<span>元素。 The for attribute on a <label> should point to the id of the <input> that it is paired with. <label>上的for属性应该指向与之配对的<input>的id 。

The submit behavior of the form should be disabled in the event handler with event.preventDefault() .应在事件处理程序中使用event.preventDefault()禁用表单的提交行为。 Now you can write your own behavior when submitting the form, like doing your calculation with all the values inside of it.现在，您可以在提交表单时编写自己的行为，例如使用其中的所有值进行计算。

I've changed the <div id="calc-result"> to an <output> element which can be used to display calculations as a result from input elements.我已将<div id="calc-result">更改为<output>元素，该元素可用于显示输入元素的计算结果。

The example below shows all the examples from above in a working snippet.下面的示例在一个工作片段中显示了上面的所有示例。 I'd suggest that you try to learn these elements as they are an essential part of your HTML form kit.我建议您尝试学习这些元素，因为它们是 HTML 表单工具包的重要组成部分。

 const multiplyForm = document.querySelector('#multiply-form'); const product = document.querySelector("#calc-result"); multiplyForm.addEventListener('submit', event => { const formData = new FormData(event.target); const a = Number(formData.get('a')); const b = Number(formData.get('b')); const c = Number(formData.get('c')); product.value = ((a * b) + (b * c)) / (a + b); event.preventDefault(); });

 <form id="multiply-form"> <div class="formrow"> <label for="Nr1" class="labelstyle">Nr1:</label> <input type="number" name="a" id="Nr1" class="textbox1style" /> </div> <div class="formrow"> <label for="Nr2" class="labelstyle">Nr2: </label> <input type="number" name="b" id="Nr2" class="textbox2style" /> </div> <div class="formrow"> <label for="Nr3" class="labelstyle">Nr3: </label> <input type="number" name="c" id="Nr3" class="textbox3style" /> </div> <div class="formrow"> <label for="calc-result">Result: </label> <output id="calc-result" for="Nr1 Nr2 Nr3"></output> </div> <div class="formrow"> <button type="submit">Multiply</button> </div> </form>

在一个html页面中添加3个文本框计算如下公式((ab)+(bc))/(a+b)

问题描述

1 个解决方案

解决方案1
0 2020-10-31 21:10:36

在一个html页面中添加3个文本框计算如下公式((a*b)+(b*c))/(a+b)

问题描述

1 个解决方案

解决方案1 0 2020-10-31 21:10:36

在一个html页面中添加3个文本框计算如下公式((ab)+(bc))/(a+b)

解决方案1
0 2020-10-31 21:10:36