поэтому у меня есть проект сейчас, как дополнение к веб-сайту моей компании, мы хотим показать нашим клиентам, сколько они могут сэкономить на газе, купив один из наших электромобилей, я отвечаю за то, чтобы это произошло, я не знаю как подойти к этому с помощью javascript, можете ли вы, ребята, дать мне руку? наш маркетинговый парень получил идею с этого сайта, это в основном то, что мы хотим, но я надеялся, что смогу немного улучшить некоторые аспекты:
1 -й клиент не должен будет нажимать submit, чтобы увидеть результаты, так как они заполняют последнее поле, вычисленная часть заполняется автоматически, так как я возился с событием onChange, безуспешно, хотя xD
вот что я до сих пор, он не работает, по крайней мере, в режиме liveweaver в режиме реального времени, еще не тестировал его в сети, поскольку я надеялся развить все это в автономном режиме:
<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>
Обратите внимание, что, хотя у меня уже есть это, я бы не хотел этого делать вообще и использовать другое решение, даже если оно не использует формы, я просто показываю, что у меня уже есть, поэтому вы можете сказать мне, как я ошибаюсь и как Я могу лучше подходить к нему
в вашем коде есть много ошибок
''
calc
else, иначе он будет вызывать ошибку как объект, а не функцию.return false
в функции на кнопках внутри формы else, это может отправить форму и обновить страницу.<!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>
Использование полей формы 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="/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>