在第三个文本框中没有得到加法的总和

Question

I want to add the sum of two numbers entered in two seprate textbox id is( PaperHeight & MountHEight ) and then get the sum in third textbox id is ( FrameHeight )我想添加在两个单独的文本框 id 中输入的两个数字的总和是（ PaperHeight & MountHEight ），然后得到第三个文本框 id 中的总和是（ FrameHeight ）

I want to get the output when the submit button is clicked单击提交按钮时，我想获取 output

following is my code以下是我的代码

 var PaperHeight = document.getElementById('PaperHeight').value; var PaperWeight = document.getElementById('PaperWeight').value; var MountHeight = document.getElementById('MountHeight').value; var MountWeight = document.getElementById('MountWeight').value; var FrameHeight = document.getElementById('FrameHeight').value; var FrameWeight = document.getElementById('FrameWeight').value; var PrintingRate = document.getElementById('PrintingRate').value; var FrameRate = document.getElementById('FrameRate').value; function btnclick(){ FrameHeight=PaperHeight+MountHeight; }

 <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Rate Calculator</h1> <br/> <form> <br/> <div class="input-group"> Paper:<span class="input-group-text">Height/Width</span> <input type="number" class="form-control" id="PaperHeight"> <input type="number" class="form-control"> </div> <br/> <div class="input-group"> Mount:<span class="input-group-text">Height/Width</span> <input type="number" aria-label="First name" class="form-control" id="MountHeight"> <input type="number" aria-label="Last name" class="form-control"> </div> <br/> <div class="input-group"> Frame:<span class="input-group-text">Height/Weight</span> <input type="number" aria-label="First name" class="form-control" id="FrameHeight"> <input type="number" aria-label="Last name" class="form-control"> </div> <br/><br/> <div class="input-group"> Printing Rate:<span class="input-group-text">Size</span> <input type="number" aria-label="First name" class="form-control"> </div> <br/> <div class="input-group"> Frame Rate:<span class="input-group-text">Size</span> <input type="number" aria-label="First name" class="form-control"> </div> <br/> <div class="input-group"> Mount Rate:<span class="input-group-text">Size</span> <input type="number" aria-label="First name" class="form-control"> </div> <br/> <br/><br/> <button type="button" class="btn btn-primary btn-lg" onclick="btnclick()">Submit</button> </form> <script src="script.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html>

so please help me to get my output所以请帮我拿到我的 output

Answer 1

Assuming that the OP ( O riginal P ost) code is more or less complete, your specific problem is not that your'e not getting anything displayed -- it actually should work.假设 OP（ O riginal Post）代码或多或少是完整的，您的具体问题不是您没有显示任何内容——它实际上应该可以工作。 Unfortunately you probably didn't notice that the entire form resets itself.不幸的是，您可能没有注意到整个表单会自行重置。 The default behavior of a form triggered by a submit event is to gather all form controls with name attributes, send their .value s to a server, and then reset itself.由 submit 事件触发的表单的默认行为是收集所有具有name属性的表单控件，将它们的.value发送到服务器，然后自行重置。 To prevent this default behavior add the following as the first line within the event handler :为了防止这种默认行为，在事件处理程序的第一行添加以下内容：

 event.preventDefault();

BTW inline event attribute handlers are garbage , instead use either on event property handlers:顺便说一句，内联事件属性处理程序是垃圾，而是在事件属性处理程序上使用：

 document.forms[0].onsubmit = handleSubmit;

Or an event listener:或事件监听器：

 document.forms[0].addEventListener('submit', handleSubmit);

In the OP, the HTML layout was haphazard.在 OP 中，HTML 布局是随意的。 There were extra <input> with no #id and no explination why the HTML had 9 <input> s but only 3 mentioned.有额外的<input>没有#id也没有解释为什么 HTML 有 9 个<input> s，但只提到了 3 个。 So by going by what makes more sense I changed the calculations:因此，通过更有意义的方式，我改变了计算：

3 Groups - Paper, Mount, Frame 3 组 - 纸张、底座、框架

2 Inputs per Group - Height and Width每组 2 个输入 - 高度和宽度

3 Outputs - 1 Rate for each Group 3 个输出 - 每组 1 个速率

Rate = Height x Width比率 = 高度 x 宽度

Referencing the form and inputs was done by .forms and .elements property and the event object:引用表单和输入由.forms和.elements属性以及事件 object 完成：

 // add #id, [name], bracket notation [0] document.forms.rateCalculator; /*.currentTarget points to form and.elements are all form controls */ event.currentTarget.elements;

Details are commented in example below详细信息在下面的示例中注释

 // Pass the event oject const calculateRate = event => { // Stops the form from sending data event.preventDefault(); // All form controls const io = event.currentTarget.elements; /* All values of all form controls are strings so if you need to calculate any value you must convert the values to numbers */ let pH = parseFloat(io.pHeight.value); let mH = parseFloat(io.mHeight.value); let fH = parseFloat(io.fHeight.value); let pW = parseFloat(io.pWidth.value); let mW = parseFloat(io.mWidth.value); let fW = parseFloat(io.fWidth.value); /* The ternary expression will display 0 instead of NaN */ io.pRate.value = isNaN(pH * pW)? 0: pH * pW; io.mRate.value = isNaN(mH * mW)? 0: mH * mW; io.fRate.value = isNaN(fH * fW)? 0: fH * fW; } // Reference the form const form = document.forms.rateCalculator; // form will listen for the submit event form.addEventListener('submit', calculateRate);

 <,DOCTYPE html> <html lang="en"> <head> <title>Calculate Rates</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min:css" rel="stylesheet"> </head> <body> <main class="container"> <form id='rateCalculator'> <fieldset class='row pb-2'> <legend> <h1>Rate Calculator</h1> </legend> <fieldset class="form-group col-4 mb-3"> <legend>Paper</legend> <label for='pHeight' class='label-control'>Height </label> <input id='pHeight' class="form-control" type="number" min='0' value='0'> <label for='pWidth' class='label-control'>Width </label> <input id='pWidth' class="form-control" type="number" min='0' value='0'> </fieldset> <fieldset class="form-group col-4 mb-3"> <legend>Mount</legend> <label for="mHeight" class='label-control'>Height </label> <input id="mHeight" class="form-control" type="number" min='0' value='0'> <label for='mWidth' class="label-control">Width </label> <input id='mWidth' class="form-control" type="number" min='0' value='0'> </fieldset> <fieldset class="form-group col-4 mb-3"> <legend>Frame</legend> <label for="fHeight" class='label-control'>Height </label> <input id="fHeight" class="form-control" type="number" min='0' value='0'> <label for='fWidth' class="label-control">Width </label> <input id='fWidth' class="form-control" type="number" min='0' value='0'> </fieldset> <hr> <fieldset class="row mt-1 mb-3"> <legend>Rates</legend> <label for='pRate' class="col-2 col-form-label">Print: </label> <div class='col'> <input id='pRate' class="form-control-plaintext" readonly> </div><br> <label for='mRate' class="col-2 col-form-label">Mount: </label> <div class='col'> <input id='mRate' class="form-control-plaintext" readonly> </div><br> <label for='fRate' class="col-2 col-form-label">Frame: </label> <div class='col'> <input id='fRate' class="form-control-plaintext" readonly> </div><br> </fieldset> <div class='btn-group'> <button class='btn btn-primary'>Submit</button> <button class='btn btn-danger' type='reset'>Reset</button> </div> </fieldset> </form> </main> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>

Answer 2

Move document.getElementById('PaperHeight').value code in side function.移动 function 侧的 document.getElementById('PaperHeight').value 代码。

 function btnclick() { var PaperHeight = document.getElementById('PaperHeight').value; var MountHeight = document.getElementById('MountHeight').value; var FrameHeight = document.getElementById('FrameHeight').value; document.getElementById('FrameHeight').value = parseInt(PaperHeight) + parseInt(MountHeight); }

 <html> <head> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Rate Calculator</h1> <br/> <form> <br/> <div class="input-group"> Paper:<span class="input-group-text">Height/Width</span> <input type="number" class="form-control" id="PaperHeight"> <input type="number" class="form-control"> </div> <br/> <div class="input-group"> Mount:<span class="input-group-text">Height/Width</span> <input type="number" aria-label="First name" class="form-control" id="MountHeight"> <input type="number" aria-label="Last name" class="form-control"> </div> <br/> <div class="input-group"> Frame:<span class="input-group-text">Height/Weight</span> <input type="number" aria-label="First name" class="form-control" id="FrameHeight"> <input type="number" aria-label="Last name" class="form-control"> </div> <br/><br/> <div class="input-group"> Printing Rate:<span class="input-group-text">Size</span> <input type="number" aria-label="First name" class="form-control"> </div> <br/> <div class="input-group"> Frame Rate:<span class="input-group-text">Size</span> <input type="number" aria-label="First name" class="form-control"> </div> <br/> <div class="input-group"> Mount Rate:<span class="input-group-text">Size</span> <input type="number" aria-label="First name" class="form-control"> </div> <br/> <br/><br/> <button type="button" class="btn btn-primary btn-lg" onclick="btnclick()">Submit</button> </form> <script src="script.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </body> </html>

在第三个文本框中没有得到加法的总和

问题描述

2 个解决方案

解决方案1
1 2022-01-19 15:21:22

解决方案2
0 2022-01-19 10:04:26

在第三个文本框中没有得到加法的总和

问题描述

2 个解决方案

解决方案1 1 2022-01-19 15:21:22

解决方案2 0 2022-01-19 10:04:26

解决方案1
1 2022-01-19 15:21:22

解决方案2
0 2022-01-19 10:04:26