0

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

第一个 - 客户不必按下提交来查看结果，因为他们填写了最后一个字段，计算的部分会自动填充，为此我一直在摆弄 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>

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

4

2 回答 2

2

您的代码中有很多错误

  1. document.getElementById() 需要括号中的元素 id''
  2. 您不能创建具有相同名称的元素，id 作为函数，calc否则它将引发错误，因为它是对象而不是函数。
  3. 您正在执行 onload 函数...但是您希望在单击按钮和 onchange 时执行它。
  4. you don't need to add value if empty and name if you use getElementById
  5. return false in the function on buttons inside form else it could send the form and so refresh the page.
<!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>
于 2013-09-17T10:43:57.380 回答
1

Useing jQuery (and html5 type="number" form fields):

<!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>
于 2013-09-17T12:52:37.840 回答