堆栈内存溢出
  简体   繁体   English

使用JavaScript从文本框中获取价值

[英]Getting value from textbox with javascript

 原文  2015-12-07 07:19:03  4   4    javascript/ html

问题描述

Here is my code. 这是我的代码。 No idea why it is not working need help inspecting my code. 不知道为什么它不起作用需要帮助检查我的代码。 I'm trying to calculate the average and sum from the value input by the user. 我正在尝试根据用户输入的值来计算平均值和总和。 The html works well but my javascript code is somehow wrong. 该html效果很好，但我的javascript代码却有问题。 Help please 请帮助 

 < script > function calc() { int a = parseInt(document.getElementsByName("english").value); int b = parseInt(document.getElementsByName("bmelayu").value); int c = parseInt(document.getElementsByName("math").value); int d = parseInt(document.getElementsByName("geo").value); int e = parseInt(document.getElementsByName("hist").value); int sum = a + b + c + d + e; int average = (a + b + c + d + e) / 5; document.getElementById("sum").innerHTML = sum; document.getElementById("average").innerHTML = average; } < /script> 
 <html> <head> <title>Assignment3</title> </head> <script> function calc() { int a = parseInt(document.getElementsByName("english").value); int b = parseInt(document.getElementsByName("bmelayu").value); int c = parseInt(document.getElementsByName("math").value); int d = parseInt(document.getElementsByName("geo").value); int e = parseInt(document.getElementsByName("hist").value); int sum = a + b + c + d + e; int average = (a + b + c + d + e) / 5; document.getElementById("sum").innerHTML = sum; document.getElementById("average").innerHTML = average; } </script> <body> <form name="form1"> English : <input type="number" name="english"> <br>Bahasa Melayu : <input type="number" name="bmelayu"> <br>Math : <input type="number" name="math"> <br>Geography : <input type="number" name="geo"> <br>History : <input type="number" name="hist"> <br> <button onclick="calc()">Calculate</button> </form> <p id="sum"></p> <p id="average"></p> </body> </html>

4 个解决方案

解决方案1
 0  2015-12-07 07:25:44

function calc() {
  var a = parseInt(document.getElementsByName("english")[0].value);
  var b = parseInt(document.getElementsByName("bmelayu")[0].value);
  var c = parseInt(document.getElementsByName("math")[0].value);
  var d = parseInt(document.getElementsByName("geo")[0].value);
  var e = parseInt(document.getElementsByName("hist")[0].value);

  var sum = a + b + c + d + e;
  var average = (a + b + c + d + e) / 5;

  document.getElementById("sum").innerHTML = sum;
  document.getElementById("average").innerHTML = average;
}

解决方案2
 0 已采纳  2015-12-07 07:28:02

  function calc() { var a = parseInt(document.getElementById("english").value); var b = parseInt(document.getElementById("bmelayu").value); var c = parseInt(document.getElementById("math").value); var d = parseInt(document.getElementById("geo").value); var e = parseInt(document.getElementById("hist").value); console.log(a); var sum = a + b + c + d + e; var average = (a + b + c + d + e) / 5; document.getElementById("sum").innerHTML = sum; document.getElementById("average").innerHTML = average; } 
 <html> <head> <title>Assignment3</title> </head> <body> English : <input type="number" id="english"> <br>Bahasa Melayu : <input type="number" id="bmelayu"> <br>Math : <input type="number" id="math"> <br>Geography : <input type="number" id="geo"> <br>History : <input type="number" id="hist"> <br> <button onclick="calc();">Calculate</button> <p id="sum"></p> <p id="average"></p> </body> </html>

解决方案3
 0  2015-12-07 07:49:41

Hey I'm glad you found your answer, but I thought it might help you out if you see a different approach: 嘿，很高兴您找到答案，但是我认为如果您使用其他方法可以对您有所帮助： 

 function calc() { var elements = Array.prototype.slice.call(document.querySelectorAll(".grade-val")); var grades = elements.map(function(element) { return element.value; }); var sum = grades.reduce(function(s, c) { return parseInt(s, 10) + parseInt(c, 10); }); var average = sum / grades.length; document.getElementById("sum").innerHTML = sum; document.getElementById("average").innerHTML = average; } 
 <html> <head> <title>Assignment3</title> </head> <body> English : <input type="number" class="grade-val" name="english"> <br>Bahasa Melayu : <input type="number" class="grade-val" name="bmelayu"> <br>Math : <input type="number" class="grade-val" name="math"> <br>Geography : <input type="number" class="grade-val" name="geo"> <br>History : <input type="number" class="grade-val" name="hist"> <br> <button onclick="calc();">Calculate</button> <p id="sum"></p> <p id="average"></p> </body> </html>

Note that I've added a class grade-val on each of the elements, if you simply want to add another subject to be taken into consideration you don't have to modify the code but only the markup (insert new element with the same class). 请注意，我已经在每个元素上添加了一个class grade-val ，如果您只是想添加另一个要考虑的主题，则不必修改代码，而只需修改标记（使用相同的新元素插入类）。 Simple as that. 就那么简单。

This is going to work on IE8+ 这将在IE8+

解决方案4
 0  2015-12-07 07:58:02

I have fixed your snippet - you have made a number of errors there. 我已经修复了您的代码段-您在此处犯了许多错误。 Now it works 现在可以了 

  function calc() { var a = parseInt(document.getElementsByName("english")[0].value); var b = parseInt(document.getElementsByName("bmelayu")[0].value); var c = parseInt(document.getElementsByName("math")[0].value); var d = parseInt(document.getElementsByName("geo")[0].value); var e = parseInt(document.getElementsByName("hist")[0].value); var sum = a + b + c + d + e; var average = (a + b + c + d + e) / 5; document.getElementById("sum").innerHTML = sum; document.getElementById("average").innerHTML = average; } 
 <html> <head> <title>Assignment3</title> </head> <script> function calc() { int a = parseInt(document.getElementsByName("english")[0].value); int b = parseInt(document.getElementsByName("bmelayu")[0].value); int c = parseInt(document.getElementsByName("math")[0].value); int d = parseInt(document.getElementsByName("geo")[0].value); int e = parseInt(document.getElementsByName("hist")[0].value); int sum = a + b + c + d + e; int average = (a + b + c + d + e) / 5; document.getElementById("sum").innerHTML = sum; document.getElementById("average").innerHTML = average; } </script> <body> <form name="form1"> English : <input type="number" name="english"> <br>Bahasa Melayu : <input type="number" name="bmelayu"> <br>Math : <input type="number" name="math"> <br>Geography : <input type="number" name="geo"> <br>History : <input type="number" name="hist"> <br> <button onclick="calc()">Calculate</button> </form> <p id="sum"></p> <p id="average"></p> </body> </html>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用 javascript 从@Html.TextBox 获取价值？ - Getting value from a @Html.TextBox with javascript? 使用 Excel VBA 从 javascript 中的文本框中获取值 - Getting a value from a textbox in javascript with Excel VBA 在Javascript中获取Textbox值 - Getting Textbox value in Javascript 在JavaScript中获取文本框onchange的价值 - Getting value of textbox onchange in javascript 使用JavaScript从文本框中获取AJAX CalendarExtender值 - Getting a AJAX CalendarExtender value from a textbox using javascript 无法从textBox获取最新值 - Not getting latest value from textBox 在javascript中获取文本框值（或本身）将导致null - Getting textbox value(or itself) in javascript results in null 使用javascript获取动态创建的文本框的价值 - getting value of dynamically created textbox using javascript 在onchange之后获取javascript代码中的文本框值 - Getting textbox value in javascript code after onchange 使用 JavaScript 获取文本框值或内容的长度 - Getting the length of a textbox value or content using JavaScript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM