Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ function not working with internet explorer

Posted by: loswollos Apr 6 2017, 10:47 AM

Hi,
I´m trying to write a code where I have several input-Boxes and a Checkbox. When entering a number or checking the box, an Output is displayed (a mathematical function, in this example: Sum of the 3 input-Boxes, the percentage (4th Input-box) of this sum. If the Box is checked, double that result).

The code is working fine, when I use Firefox, but when using the Explorer the Output doesn´t Change. Anyone has an idea, why this is Happening or what I´m doing wrong?

Thanks for your help, i appreciate it!

Here is my code so far:

CODE

  <form id="myForm" >
    <legend>Berechnung</legend>

    <label for="betrag1">First amount</label>
    <input type="number" min="0" id="betrag1" value="0" step="1" >
    <br/>
    <label for="betrag2">Second Amount</label>
    <input type="number" min="0" id="betrag2" value="0" step="1" >
    <br/>
    <label for="betrag3">Third amount</label>
    <input type="number" min="0" id="betrag3" value="0" >
    <br/>
    <br/>
    <label for="prozent">Percentage of These</label>
    <input type="number" min="0" id="prozent" value="100" > %</p>
    <br/>
    <input type="checkbox" name="multi" id="multi" value="1"> Double this result?

    <p><span>Total:</span> <output id="betrag" for="betrag1 betrag2 betrag3 multi prozent" style="text-align: right;">0</output> €</p>
</form>

  <script>
document.getElementById("myForm").addEventListener(, "input", calculateit);

function calculateit() {

var betrag1 = document.getElementById('betrag1'),
    betrag2 = document.getElementById('betrag2'),
    betrag3 = document.getElementById('betrag3'),
    prozent = document.getElementById('prozent'),
    multi = document.getElementById('multi');
var summe  = (betrag1.valueAsNumber + betrag2.valueAsNumber + betrag3.valueAsNumber) * prozent.valueAsNumber/100;

if (document.forms[0].multi.checked){summe = summe * 2}

    summe = summe.toFixed(1);
    document.getElementById('betrag').value = summe;
}
</script>

Posted by: CharlesEF Apr 6 2017, 11:38 AM

You need IE10 or above for valueAsNumber to work. If you need this code to work for IE versions before 10 then you should 'parseFloat' or 'parseInt'.

What version of Firefox did you use? I tried with v52.0.1 and it didn't work. Also didn't work with IE11. I see a couple of errors:

CODE

document.getElementById("myForm").addEventListener(, "input", calculateit);

Remove the ', ' before "input" and remove </p> since there is no opening <p>.

Posted by: loswollos Apr 7 2017, 04:23 AM

Hi,
first of all: thanks!

i´m using Internet Explorer 11 and Firefox 52.0.2 (32-Bit)

Code is working fine in ff, but not in Explorer. I edited the code above (corrected the 2 mistakes) and inserted the whole code, in case this is important).
Any idea what is wrong with the code?

Regards!

CODE

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
  <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />

  <style>

  form {
    border: thin solid #666;
    width: 40em;
    padding:0.5em;
  }

  legend {
    font-size: 1.5em;
    padding: 0 0.5em 0.5em;
  }

  input[type=number] {
    text-align: right;
}

  label, span  {
    display:inline-block;
    width: 10em;
  }

  form p {
    font-weight: bold;
  }

  output {
  width: 8em;
  text-align: right;
  }

</style>

  <title>Berechnungen mit output ausgeben</title>

</head>

<body>
  <h1>Berechnung einer Summe</h1>

<main>

  <form id="myForm" >
    <legend>Berechnung</legend>

    <label for="betrag1">First amount</label>
    <input type="number" min="0" id="betrag1" value="0" step="1" >
    <br/>
    <label for="betrag2">Second Amount</label>
    <input type="number" min="0" id="betrag2" value="0" step="1" >
    <br/>
    <label for="betrag3">Third amount</label>
    <input type="number" min="0" id="betrag3" value="0" >
    <br/>
    <br/>
    <label for="prozent">Percentage of These</label>
    <input type="number" min="0" id="prozent" value="100" > %</p>
    <br/>
    <input type="checkbox" name="multi" id="multi" value="1"> Double this result?

    <p><span>Total:</span> <output id="betrag" for="betrag1 betrag2 betrag3 multi prozent" style="text-align: right;">0</output> €</p>
</form>

  <script>
document.getElementById("myForm").addEventListener("input", calculateit);

function calculateit() {

var betrag1 = document.getElementById('betrag1'),
    betrag2 = document.getElementById('betrag2'),
    betrag3 = document.getElementById('betrag3'),
    prozent = document.getElementById('prozent'),
    multi = document.getElementById('multi');
var summe  = (betrag1.valueAsNumber + betrag2.valueAsNumber + betrag3.valueAsNumber) * prozent.valueAsNumber/100;

if (document.forms[0].multi.checked){summe = summe * 2}

    summe = summe.toFixed(1);
    document.getElementById('betrag').value = summe;
}
</script>

  </main>
</body>
</html>

Posted by: CharlesEF Apr 7 2017, 09:11 AM

I can't tell you why but I can say that 'valueAsNumber' returns 'NaN' in IE11. I was never able to get it to work. Also, seems IE11 doesn't display the controls like Firefox does. Example: <input type="number"> shows up in Firefox as a input with a spinner (up/down arrows to increase/decrease) to change the value. IE11 doesn't show the spinner.

I changed the event listener to use the 'change' event instead of the 'input' event. Instead of 'valueAsNumber' I used parseFloat but you could use parseInt if you always plan on using whole numbers. The <output> tag doesn't seem to support the 'value' property so I used 'innerHTML' instead.

And you have basic HTML errors in your markup. You should use a validator to check. You can use this https://validator.w3.org/nu/.

CODE

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Charles E. Finkenbiner - Creative Electronic Formulas, Inc.">
<meta name="generator" content="SynWrite 6.22.2280">
<title>Title</title>
</head>
<body>
  <form id="myForm">
    <legend>Berechnung</legend>

    <label for="betrag1">First amount</label>
    <input type="number" min="0" id="betrag1" value="0" step="1">
    <br/>
    <label for="betrag2">Second Amount</label>
    <input type="number" min="0" id="betrag2" value="0" step="1">
    <br/>
    <label for="betrag3">Third amount</label>
    <input type="number" min="0" id="betrag3" value="0">
    <br/>
    <br/>
    <label for="prozent">Percentage of These</label>
    <input type="number" min="0" id="prozent" value="100">%
    <br/>
    <input type="checkbox" name="multi" id="multi" value="1">Double this result?

    <p><span>Total:</span> <output id="betrag" for="betrag1 betrag2 betrag3 multi prozent" style="text-align: right;">0</output> €</p>
</form>
<script type="text/javascript">
document.getElementById("myForm").addEventListener("change", calculateit);

function calculateit() {
var betrag1 = document.getElementById('betrag1'),
    betrag2 = document.getElementById('betrag2'),
    betrag3 = document.getElementById('betrag3'),
    prozent = document.getElementById('prozent'),
    multi = document.getElementById('multi').checked;
var summe  = (parseFloat(betrag1.value, 10) + parseFloat(betrag2.value, 10) + parseFloat(betrag3.value, 10)) * parseFloat(prozent.value, 10)/100;
if (multi)
{
summe = summe * 2
}
summe = summe.toFixed(1);
document.getElementById('betrag').innerHTML = summe;
}
</script>
</body>
</html>

Posted by: loswollos Apr 7 2017, 09:51 AM

Hi,

the one mistake (</p>) I found myself

All the other stuff: Thanks a thousand times, you really helped me!
I'm new to html and trying to learn it by doing, so I couldn't do much without help.

Thanks also for the validator, this really helps (seems like the Legend-part was also wrong...)!

One Information: the up/down-arrows don´t aren't supported in ie11, another user told me (http://caniuse.com/#search=number)

Once again: Thanks a lot and have a nice Weekend!

Posted by: CharlesEF Apr 7 2017, 10:08 AM

I didn't know IE11 didn't support the number spinner yet, good to know, thanks. I think your problem with legend is that you didn't enclose it in a <fieldset>.

And, you're welcome.

Posted by: masonh928 Apr 9 2017, 10:02 PM

Yeah, a validator never seems necessary, until you have played for a bit. You will realize its usefulness! lol Very handy tool