Hoe ken je aan een invoerveld een waarde "getal" toe om er mee te kunnen rekenen?

[84nilsvdg]

Met wat jatwerk van de broncode van een bestaande site, ben ik begonnen een eigen calculator te programmeren in HTML.

Ik ben al een heel eind, maar loop vast omdat de waarde van mijn invoerveld niet door het javascript herkent wordt als een getal waardoor de berekening nooit plaats vind.

Hieronder een stukje van mijn HTML code, kan iemand een suggestie doen wat ik aan moet passen om de calculator werkend te krijgen?

<script language="JavaScript">
        function Calculate1 ( co21, km1 ) 
        {
        co2u1=Math.round(co21*km1*0.001)-(co21*km1*0.0005);
        document.co2calc.co2u1.value=co2u1;
        }
</script>

<form name="co2calc">

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="800" id="AutoNumber1">
      <tr>
        <td width="15%" height="30"><b><font size="2">Auto</font></b></td>
        <td width="15%" height="30"><b><font size="2">CO2 uitstoot (g/km) </font></b></td>
        <td width="15%" height="30"><b><font size="2">Kilometrage (km/jaar)</font></b></td>
        <td width="10%" height="30"><br>&nbsp;</td>
      </tr>
      <tr>
        <td width="15%" height="40">Uw Auto 1</td>
        <td width="15%" height="40"><input type="char" name="co21" size="20">g/km</td>
        <td width="15%" height="40"><input type="char" name="km1" size="20">km</td>
        <td width="10%" height="40">&nbsp; <input type="button" name="calc1" value="Calculate" onclick="Calculate1(document.co2calc.co2u1.value)"></td>
      </tr>
</table>
	
	
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="800" id="AutoNumber1">      
      <tr>
        <td width="800" height="30"><font size="2">&nbsp;</font></td>
      </tr>
      <tr>
        <td width="800" height="40"><font size="2">Uw auto 1 zal hiermee</font><b><font size="3"><input type="text" name="co2u1" size=13> kilo CO2</b></font></b><font size="2"> per jaar minder CO2 uitstoten.</font></td>
      </tr>
</table>

 

[ErikBooy007]

onclick="Calculate1(document.co2calc.co2u1.value)"

Je geeft aan de functie-aanroep slechts 1 argument mee, ipv 2.

Daarnaast kun je beter met ID's werken, en in plaats van input type="char" zou ik input type="text" gebruiken.

<script language="JavaScript">
  function Calculate1 () {
    var co21 = document.getElementById('co2input').value;
    var km1 = document.getElementById('kminput').value;
    var co2u1=Math.round(co21*km1*0.001)-(co21*km1*0.0005);
    document.getElementById('co2output').value = co2u1;
  }
</script>

<form name="co2calc">
  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="800" id="AutoNumber1">
    <tr>
      <td width="15%" height="30"><b><font size="2">Auto</font></b></td>
      <td width="15%" height="30"><b><font size="2">CO2 uitstoot (g/km) </font></b></td>
      <td width="15%" height="30"><b><font size="2">Kilometrage (km/jaar)</font></b></td>
      <td width="10%" height="30"><br>&nbsp;</td>
    </tr>
    <tr>
      <td width="15%" height="40">Uw Auto 1</td>
      <td width="15%" height="40"><input type="text" id="co2input" name="co21" size="20">g/km</td>
      <td width="15%" height="40"><input type="text" id="kminput" name="km1" size="20">km</td>
      <td width="10%" height="40">&nbsp; <input type="button" name="calc1" value="Calculate" onclick="Calculate1()"></td>
    </tr>
  </table>
  <table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="800" id="AutoNumber1">
    <tr>
      <td width="800" height="30"><font size="2">&nbsp;</font></td>
    </tr>
    <tr>
      <td width="800" height="40"><font size="2">Uw auto 1 zal hiermee</font><b><font size="3"><input type="text" id="co2output" name="co2u1" size=13> kilo CO2</b></font></b><font size="2"> per jaar minder CO2 uitstoten.</font></td>
    </tr>
  </table>
</form>

Ik denk dat het zo wel werkt.

 

[84nilsvdg]

Super bedankt hoor. Het werkt inderdaad. :thumb:

Weet iemand toevallig ook nog hoe ik de output kan laten afronden op hele getallen?

 

[ErikBooy007]

IPV:

var co2u1=Math.round(co21*km1*0.001)-(co21*km1*0.0005);

kun je beter:

#
var co2u1=Math.round((co21*km1*0.001)-(co21*km1*0.0005));

 

[84nilsvdg]

En weer bedankt! :thumb: