javascript - 在javascript中创建一个 "calculation form"

标签 javascript jquery html forms calculator

所以我现在有一个项目,作为我公司网站的补充,我们想向客户展示购买我们的一辆电动汽车可以节省多少汽油,我有责任实现这一目标,我不不知道如何使用 javascript 来解决这个问题,你们能帮我吗?我们的营销人员从 this 得到了这个想法网站,这基本上就是我们想要的,但我希望我可以在某些方面做得更好一点:

第一-客户端不必按提交即可查看结果,因为它们填充了最后一个字段,计算的部分会自动填充,为此我一直在摆弄 onChange 事件,但没有成功 xD

这是我到目前为止所拥有的,它不起作用,至少在 Dreamweaver 的实时模式上,还没有在线测试它,因为我希望离线开发整个东西:

<script type="text/javascript">

function calc(){

var km=document.getElementById(km).value;
var euro=document.getElementById(euro).value;
var consumo=document.getElementById(consumo).value;

var cem_km=consumo*euro;

var fossil_day=(cem_km*km)/100;
return fossil_day;
}

</script>

<form name="calc" id="calc"  >
  <p>
  Km/dia
  <input type="text" name="km" id="km" value="" />
  </p>
  <p>
  €/Litro
  <input type="text" name="euro" id="euro" value="" />
  </p>
  <p>
  Litros/100km
  <input type="text" onChange="calc()" name="consumo" id="consumo" value="" />
  </p>

   <input type="button" onClick="calc()" name="submit" id="submit" value="Calcular" />

<script type="text/javascript">
 var fossil_day = calc();
document.write('<p>'+fossil_day+'</p>');
</script>

</form>

请注意,虽然我已经有了这个,但我不介意根本不这样做并使用其他解决方案,即使它不使用表单,我只是展示我已经拥有的内容,以便您可以告诉我我的情况错误以及我如何才能有更好的方法

最佳答案

您的代码中有很多错误

  1. document.getElementById() 需要括号中的元素 ID ''
  2. 您不能创建与函数 calc 具有相同名称、id 的元素,否则它将抛出错误,因为它是一个对象而不是函数。
  3. 您正在执行 onload 函数...但您希望在单击按钮和 onchange 时执行该函数。
  4. 如果为空,则无需添加值;如果使用 getElementById,则无需添加名称
  5. 在表单内按钮的函数中返回 false,否则它可以发送表单并刷新页面。
<小时/>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>calc</title>
<script>
function calc(){
var km=document.getElementById('km').value;
var euro=document.getElementById('euro').value;
var consumo=document.getElementById('consumo').value;
var cem_km=consumo*euro;
var fossil_day=(cem_km*km)/100;
document.getElementById('result').innerHTML=fossil_day;
return false
}
</script>
</head>
<body>
<form>
<p>Km/dia<input type="text" id="km"/></p>
<p>€/Litro<input type="text" id="euro" /></p>
<p>Litros/100km<input type="text" onChange="calc()" id="consumo" /></p>
<input type="button" onClick="calc()" value="Calcular" />
</form>
<div id="result"></div>
</body>
</html>

关于javascript - 在javascript中创建一个 "calculation form",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18847359/

相关文章:

html - 使用 XSLT 识别特定的 XHTML 单元格,并在找到它们后修改它们的属性

html - 有没有办法在 html 中插入 QPixmap 对象?

javascript - 在处理事件监听器时,如何让 IIFE 记住变量的**每个**实例?

javascript - 获取对象时如何干净地提取 Parse.Object 关系的记录?

javascript - 在可扩展的 div jQuery 上悬停/取消悬停期间多次调用

jquery - 将图像旋转 45 度并在悬停时返回到相同位置

javascript - 焦点文本字段中的 TYPE 值(如 selenium RC 中的 TYPE)- Selenium webdriver

javascript - 当更改另一个选择框的值时,如何在一个选择框中填充值

javascript - Bootstrap 3 - 切换 - 2 个按钮,2 个元素 - 如何显示/隐藏?

javascript - 使用 javascript 中的 <canvas> 元素