如何在按键时更新一组文本字段，避免在提交时重置表单？

我正在尝试制作一个像这样的简单转换器，但在JavaScript中，您输入的数量为吨，它显示从输入计算的一堆不同的数字，如下所示：

这就是我尝试过的：

    function calculate(t){ var j = document.getElementById("output") var treesSaved = t.tons.value * 17; j.value = treesSaved; }    
   
  
   

这是有效的，当您按下按钮时，它会计算并显示正确的数字。 然而，当我按下按钮时，它似乎也重置了表格，我希望完全消除按钮的需要（所以在每次按键时重新计算）。

为什么表单重置，如何将其扩展为根本不需要按钮？

Answer 1

请检查这个FIDDLE 。

您只需要将属性数据公式添加到表格单元格中。

HTML

 
 
 
  
 
card board
 
recycled
 
reusable
 
 
 
lovely trees
 
 
 
 
 
 
what is acres
 
 
 
 
  

JAVASCRIPT

  $(function () { function isNumber(n) { return !isNaN(parseFloat(n)) && isFinite(n); } var $input = $('#initial-val'), $cells = $('td[data-formula]'); $input.on('keyup', function () { var val = $input.val(); if (isNumber(val)) { $.each($cells, function () { var $thisCell = $(this); $thisCell.text( eval($thisCell.attr('data-formula').replace('val', val.toString())) ) }); } else { $cells.text('ERROR') } }); }); 

Answer 2

这是它的小提琴链接：

计算器

使用以下代码实现我认为您想要的：

Answer 3

你需要：

1. 一个下拉选项，允许用户选择他们想要做什么类型的计算，然后显示输入字段或多个输入字段
2. 用户输入的输入字段
3. 带有onclick()事件的提交按钮，将您的输入传递给您的计算（您可能希望对此进行一些validation，以便它们只能输入数字） validation示例
4. 您的Javascript文件，在提交时从您的框中获取输入并执行计算

5. 将信息显示给用户…类似于您选择的元素的innerHtml或者：

    var output = document.getelementbyid("your outputbox") output.value = ""; output.value = "your calculated value variable"; 

这是一个抓取用户输入的教程。

Answer 4

假设你的计算都是线性的，我建议你创建一个系数数组，然后循环该数组进行计算并打印出来。 像这样的东西：

HTML：

 
 
 
 
Recycled Cardboard
 
Re-usable Cardboard
 
 
 
Trees Saved
 
 
 
 
Acres Saved
 
 
 
 
Energy (in KW)
 
 
 
 
Water (in Gallons)
 
 
 
 
Landfill (Cubic Yards)
 
 
 
 
Air Pollution (in Lbs)
 
 
  

使用Javascript：

 function showStats(cardboardTons) { var elements = $("td"); var coeffs = [17, 34, 0.025, 0.5, 4100, 8200, 7000, 14000, 3, 6, 60, 120]; for(var i=0;i 

一旦您从用户那里获得输入，将其作为数字传递给showStats函数，它将遍历表中的所有单元格并计算要输入的正确数字。