JS inputs live delen met elkaar

Status
Niet open voor verdere reacties.

pilootnour5

Terugkerende gebruiker
Lid geworden
22 nov 2008
Berichten
1.895
Hallo,

Ik probeer iets relatief simpels te maken, maar ik krijg het via internet niet gevonden omdat ik totaal niet weet waar ik moet zoeken.

Ik wil in principe twee HTML inputs, eentje waar een aantal kilometers komt te staan, de ander waar het aantal liters wordt ingevuld. Door middel van javascript wil ik live het verbruik kunnen echo'en op het scherm. Het moet dus dynamisch zijn. Als de input nog wordt gewijzigd, dan wijzigt de echo ook. Dit moet gebeuren zonder op een knop oid te hoeven drukken.

Wat ik tot nu toe heb is het volgende:
Code:
<div class='printchatbox' id='printchatbox'></div>

<input type='text' name='km'/>

<input type='text' name='liters' class='chatinput' onkeyUp="document.getElementById('printchatbox').innerHTML = this.value" />

Enige is dat de output dus eigenlijk de inhoud van input km gedeeld moet worden door input liters. Hoe kom ik verder?

Voor het gemak een JSFiddle: https://jsfiddle.net/2vaqL8uc/

De echo van de tweede output (liters) werkt, nu die andere nog erin verwerken...?

Alvast bedankt
 
Hi,

Ik heb iets voor je geprogrammeerd. Ik hoop dat dit is wat je zoekt! Probeer je het eens uit? Mochten er nog veranderingen moeten worden uitgevoerd, dan kunnen we dit samen even oplossen!

Code:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<html>
    <label>Kilometers: </label><input type='text' class='kilometers'>
    <label>Liters: </label><input type='text' class='liters'>
    <br><br>
    <code class='outputCalculation'></code>
</html>

<script>
    clearData();
    var kilometers;
    var liters;
    
    function clearData() {
        $('.kilometers, .liters').click(function () {
            $('.kilometers').val('');
            $('.liters').val('');
            getData();
        });
    }
    
    function getData() {
        $('.kilometers, .liters').keyup(function(){
            kilometers = $('.kilometers').val();
            liters = $('.liters').val();
            calculate(kilometers, liters);
        });
    }
    
    function calculate(kilometers, liters) {
        if (kilometers) {
            var litersCalculated = kilometers/12;
            $('.outputCalculation').html(litersCalculated + ' liter');
        } else {
            var kilometersCalculated = liters*12;
            $('.outputCalculation').html(kilometersCalculated + ' kilometers');
        } 
        return;
    }
</script>


Jasper
 
Laatst bewerkt:
Als alternatief zonder jQuery
Code:
<div class='printchatbox' id='printchatbox'></div>
km <input type='text' id='km' name='km' value='' />
liter <input type='text' id='lt' name='lt' value='' class='chatinput' />

<script>
// elementen
var inpKm = document.getElementById("km");
var inpLt = document.getElementById("lt");
var chBox = document.getElementById('printchatbox');
// event bij keyup
inpKm.addEventListener('keyup', verbruik);
inpLt.addEventListener('keyup', verbruik);
// functie bij event
function verbruik() {
    var km = Number(inpKm.value);
    var lt = Number(inpLt.value);
    // controleer op '', null, undefined, false, 0, NaN
    if (!km || !lt) {
        chBox.innerHTML = 'Geef in beide velden een getal';
    } else {
        chBox.innerHTML = '1 liter per ' + km / lt + ' km';
    }
}
</script>

Aanvulling. Als je veel cijfers achter de komma wilt afronden op max 2 cijfers dan is het
Code:
chBox.innerHTML = '1 liter per ' + Math.round(km / lt * 100) / 100 + ' km';
Suc6. Have fun.
 
Laatst bewerkt:
Hoi, bedankt voor jullie berichten. Werkt goed, ik vraag me bij beide alleen nog wel af hoe ik een komma als decimaal ook mag toestaan. Momenteel werkt alleen de punt als decimaal bij het invullen, maar ik zou graag willen dat dat met een komma ook zou mogen.
 
Wijzig met replace een , in een . (of omgedraaid)
Code:
    var km = Number(inpKm.value.[B]replace[/B](',','.'));
    var lt = Number(inpLt.value.[B]replace[/B](',','.'));
    // controleer op '', null, undefined, false, 0, NaN
    if (!km || !lt) {
        chBox.innerHTML = 'Geef in beide velden een getal';
    } else {
        chBox.innerHTML = ('1 liter per ' + Math.round(km / lt * 100) / 100 + ' km').[B]replace[/B]('.',',');
    }
 
This did the trick! Dank je wel! Hier kan ik mee verder :)
 
nour.nl: Het systeem is door mijzelf gemaakt ...
...en een heel klein beetje door mij :D Veel suc6 met je website!
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan