The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> function not working with internet explorer, html javasript
loswollos
post Apr 6 2017, 10:47 AM
Post #1





Group: Members
Posts: 3
Joined: 6-April 17
Member No.: 26,369



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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Apr 6 2017, 11:38 AM
Post #2


This is My Life
*******

Group: Members
Posts: 1,372
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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>.

This post has been edited by CharlesEF: Apr 6 2017, 12:34 PM
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
loswollos
post Apr 7 2017, 04:23 AM
Post #3





Group: Members
Posts: 3
Joined: 6-April 17
Member No.: 26,369



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>


This post has been edited by loswollos: Apr 7 2017, 04:27 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Apr 7 2017, 09:11 AM
Post #4


This is My Life
*******

Group: Members
Posts: 1,372
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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 one.

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>
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
loswollos
post Apr 7 2017, 09:51 AM
Post #5





Group: Members
Posts: 3
Joined: 6-April 17
Member No.: 26,369



Hi,

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


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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
CharlesEF
post Apr 7 2017, 10:08 AM
Post #6


This is My Life
*******

Group: Members
Posts: 1,372
Joined: 27-April 13
From: Edinburg, Texas
Member No.: 19,088



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.
User is online!PM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
masonh928
post Apr 9 2017, 10:02 PM
Post #7


Serious Coder
*****

Group: Members
Posts: 250
Joined: 17-August 13
From: Indiana
Member No.: 19,570



Yeah, a validator never seems necessary, until you have played for a bit. You will realize its usefulness! lol Very handy tool
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th April 2017 - 08:19 AM