Question

所以我现在有一个项目，作为我公司网站的一个补充，我们希望通过购买我们的电动汽车向客户展示他们可以节省多少燃气，我负责实现这一目标，我不知道我不知道如何使用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>

请注意，虽然我已经有了这个，但我不介意不这样做并使用其他解决方案，即使它不使用表格，我只是展示我已经拥有的所以你可以告诉我我是怎么做的错了，我怎么能有更好的方法

Answer 1

代码中有很多错误

document.getElementById（）需要括号''
你不能创建一个具有相同名称的元素，id作为函数calc，否则它将抛出一个错误，因为它是一个对象而不是一个函数。
你执行函数onload ...但你希望它在点击按钮时被执行＆amp;平变化。
如果使用空值则不需要添加值，如果使用getElementById
return 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>

Answer 2

使用jQuery（和html5 type =“number”表单字段）：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<form>
    <p>
        Km/dia
        <input type="number" name="km" id="km" value="" />
    </p>
    <p>
        €/Litro
        <input type="number" name="euro" id="euro" value="" />
    </p>
    <p>
        Litros/100km
        <input type="number"  name="consumo" id="consumo" value="" />
    </p>
    <div id="fossil-day"></div>
</form>
<script src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    function calculate(){
        var km = $('#km').val();
        var euro = $('#euro').val();
        var consumo = $('#consumo').val();
        var cem_km = consumo*euro;
        var fossil_day = (cem_km*km)/100;

        $('#fossil-day').html(fossil_day);

    }

    $(function() {
        /*when #consumo input loses focus, as per original question*/
        $('#consumo').blur(function(){
            calculate();

        });
    });
</script>
</body>
</html>

在javascript中创建“计算表单”

2 个答案: