Создайте «форму расчета» в javascript

Question

Создайте «форму расчета» в javascript

0

поэтому у меня есть проект сейчас, как дополнение к веб-сайту моей компании, мы хотим показать нашим клиентам, сколько они могут сэкономить на газе, купив один из наших электромобилей, я отвечаю за то, чтобы это произошло, я не знаю как подойти к этому с помощью 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>

Обратите внимание, что, хотя у меня уже есть это, я бы не хотел этого делать вообще и использовать другое решение, даже если оно не использует формы, я просто показываю, что у меня уже есть, поэтому вы можете сказать мне, как я ошибаюсь и как Я могу лучше подходить к нему

Antero Duarte 17 сен. 2013, в 12:38

Источник

Теги:

javascript

jquery

html

forms

calculator

2 ответа

1

Использование полей формы 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>

Steve 17 сен. 2013, в 10:04

Ещё вопросы

cocco · Accepted Answer · 2013-09-17T09-04-00.000Z

в вашем коде есть много ошибок

document.getElementById() нуждается в идентификаторе элемента в скобках ''
вы не можете создать элемент с тем же именем, id как функцию calc else, иначе он будет вызывать ошибку как объект, а не функцию.
вы выполняете функцию onload... но вы хотите, чтобы она выполнялась при нажатии кнопки & onchange.
вам не нужно добавлять значение, если пусто и имя, если вы используете getElementById
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>

Я сожалею обо всех этих ошибках, но это в основном вещи, которые я сделал правильно и изменил, когда я бегал как сумасшедший в поисках решения, ваше решение работает и дает мне базу для реализации всего, что я хочу, так что, Спасибо большое за вашу помощь :)