勾選復選框並在文本框中插入值以在 javascript 中計算
[英]tick checkbox and insert value in textbox for calculation in javascript
問題描述
我需要數一數這棵樹已經種植了多少，這棵植物可以釋放多少二氧化碳。 所以，我需要將樹的數量和植物樹的功能相乘。 在我單擊植物樹的checkbox of the planttree and insert the total number of plant后，如何將要種植的數量與植物樹的功能multiply 。
例如，如果我插入 2 個植物，它必須是 2*-(22/12)= -3.67
var person = []; person["person1"] = 1; person["person2"] = 2; person["person3"] = 3; person["person4"] = 4; person["person5"] = 5; var elec = []; elec["elecuse"] = 0; elec["elec1"] = 100 * (5455 / 12); elec["elec2"] = 150 * (5455 / 12); elec["elec3"] = 200 * (5455 / 12); elec["elec4"] = 250 * (5455 / 12); elec["elec5"] = 300 * (5455 / 12); function getNumberperson() { var numberperson = 0; var theForm = document.forms["energyform"]; var selectedPerson = theForm.elements["selectedperson"]; for (var i = 0; i < selectedPerson.length; i++) { if (selectedPerson[i].checked) { numberperson = person[selectedPerson[i].value]; } } return numberperson; } function getElectotal() { var electotal = 0; var theForm = document.forms["energyform"]; var selectedElec = theForm.elements["electricity"]; electotal = elec[selectedElec.value]; return electotal; } function planttree() { var planttree = 0; var theForm = document.forms["energyform"]; var plant = theForm.elements["plant"]; if (plant.checked == true) { planttree = -(22 / 12); } return planttree; } function calculateTotal() { var HMontotalco = getNumberperson() * getElectotal() + planttree(); var hmco = document.getElementById('totalHMonthCst').innerHTML = "Per Month = " + HMontotalco.toFixed(2) + " pounds"; }
<body onload='hideTotal()'> <div id="all"> <form action="/action_page.php" id="energyform" onsubmit="return false;"> <div> <div class="cont_order"> <fieldset> <legend>Carbon Footprint Calculator</legend> <label>Number of Person Live in Household</label><br/> <label class='radiolabel'><input type="radio" name="selectedperson" value="person1" onclick="calculateTotal()">1 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person2" onclick="calculateTotal()">2 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person3" onclick="calculateTotal()">3 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person4" onclick="calculateTotal()">4 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person5" onclick="calculateTotal()">5 </label> <br/> <label> Electricity    </label> <select id="electricity" name='electricity' onchange="calculateTotal();allvalidate()"> <option value="elecuse">0kWh</option> <option value="elec1">100kWh</option> <option value="elec2">150kWh</option> <option value="elec3">200kWh</option> <option value="elec4">250kWh</option> <option value="elec5">300kWh</option> </select> <br/> <label for='plant' class="tree">Plant</label></hr> <input type="checkbox" id="plant" name='plant' onchange="calculateTotal();allvalidate()"> <input type="text" id="textbox" name="textbox" value="Enter total plant" /> <br/> <hr><label>Total CO2 produced per household</label></hr> <br/> <div id="totalHMonthCst">Per month = 0</div> </fieldset> </div> </div> </form> </div> </body>
1 個解決方案
解決方案1
0 已采納 2022-07-23 16:23:56
我使用.getElementById()方法而不是使用theForm.elements[] 。 您只需要使用 id textbox獲取input的值。 並將其相乘。 如果要根據用戶輸入更改值，可以在該文本框上附加 eventlistener oninput 。
var person = []; person["person1"] = 1; person["person2"] = 2; person["person3"] = 3; person["person4"] = 4; person["person5"] = 5; var elec = []; elec["elecuse"] = 0; elec["elec1"] = 100 * (5455 / 12); elec["elec2"] = 150 * (5455 / 12); elec["elec3"] = 200 * (5455 / 12); elec["elec4"] = 250 * (5455 / 12); elec["elec5"] = 300 * (5455 / 12); function getNumberperson() { var numberperson = 0; var theForm = document.forms["energyform"]; var selectedPerson = theForm.elements["selectedperson"]; for (var i = 0; i < selectedPerson.length; i++) { if (selectedPerson[i].checked) { numberperson = person[selectedPerson[i].value]; } } return numberperson; } function getElectotal() { var electotal = 0; var theForm = document.forms["energyform"]; var selectedElec = theForm.elements["electricity"]; electotal = elec[selectedElec.value]; return electotal; } function planttree() { var planttree = 0; var theForm = document.forms["energyform"]; var plant = theForm.elements["plant"]; var txtBoxVal = document.getElementById("textbox").value; if (plant.checked === true) { planttree = txtBoxVal*(-(22 / 12)); } return planttree; } function calculateTotal() { var HMontotalco = getNumberperson() * getElectotal() + planttree(); var hmco = document.getElementById('totalHMonthCst').innerHTML = "Per Month = " + HMontotalco.toFixed(2) + " pounds"; }
<body onload='hideTotal()'> <div id="all"> <form action="/action_page.php" id="energyform" onsubmit="return false;"> <div> <div class="cont_order"> <fieldset> <legend>Carbon Footprint Calculator</legend> <label>Number of Person Live in Household</label><br/> <label class='radiolabel'><input type="radio" name="selectedperson" value="person1" onclick="calculateTotal()">1 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person2" onclick="calculateTotal()">2 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person3" onclick="calculateTotal()">3 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person4" onclick="calculateTotal()">4 </label> <label class='radiolabel'><input type="radio" name="selectedperson" value="person5" onclick="calculateTotal()">5 </label> <br/> <label> Electricity    </label> <select id="electricity" name='electricity' onchange="calculateTotal();allvalidate()"> <option value="elecuse">0kWh</option> <option value="elec1">100kWh</option> <option value="elec2">150kWh</option> <option value="elec3">200kWh</option> <option value="elec4">250kWh</option> <option value="elec5">300kWh</option> </select> <br/> <label for='plant' class="tree">Plant</label></hr> <input type="checkbox" id="plant" name='plant' onchange="calculateTotal();allvalidate()"> <input type="text" oninput="calculateTotal();" id="textbox" name="textbox" placeholder="Enter total plant" /> <br/> <hr><label>Total CO2 produced per household</label></hr> <br/> <div id="totalHMonthCst">Per month = 0</div> </fieldset> </div> </div> </form> </div> </body>
如何使用 JavaScript 中的文本框值保存每個問題的復選框值？
[英]How to save checkbox value for each question with textbox value in JavaScript?
根據文本框值選中或取消選中復選框Adobe Acrobat Stamp Javascript
[英]Check or Uncheck Checkbox based on Textbox value Adobe Acrobat Stamp Javascript
javascript-向文本框添加值時如何自動選中復選框
[英]javascript - how to automatically check checkbox when adding value to textbox
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.