所以我现在有一个项目,作为我公司网站的补充,我们想向客户展示购买我们的一辆电动汽车可以节省多少汽油,我有责任实现这一目标,我不不知道如何使用 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>
请注意,虽然我已经有了这个,但我不介意根本不这样做并使用其他解决方案,即使它不使用表单,我只是展示我已经拥有的内容,以便您可以告诉我我的情况错误以及我如何才能有更好的方法
最佳答案
您的代码中有很多错误
- document.getElementById() 需要括号中的元素 ID
''
- 您不能创建与函数
calc
具有相同名称、id 的元素,否则它将抛出错误,因为它是一个对象而不是函数。 - 您正在执行 onload 函数...但您希望在单击按钮和 onchange 时执行该函数。
- 如果为空,则无需添加值;如果使用 getElementById,则无需添加名称
在表单内按钮的函数中返回 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/