function not working with internet explorer, html javasript Options

[loswollos]

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>