0

私は今、私の会社のウェブサイトに追加するプロジェクトを持っています.私たちはクライアントに私たちの電気自動車を購入することでどれだけガスを節約できるかを示したいと思っています.私はそれを実現する責任があります. JavaScript を使用してこれにアプローチする方法を教えてください。私たちのマーケティング担当者は、このウェブサイトからアイデアを得ました。

1番目-クライアントは結果を表示するために送信を押す必要はありません。最後のフィールドに入力すると、計算された部分が自動的に入力されます。これは、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. 空の場合は値を追加する必要はなく、getElementById を使用する場合は名前を追加する必要はありません
  5. 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>
于 2013-09-17T10:43:57.380 に答える