Jump to content


Photo

JavaScript not working in IE11


Best Answer Psycho, 16 May 2018 - 02:28 PM

To my knowledge, <output> tags do not have a "value" attribute.

 

In your form there are fields like this:

<output class="loan-amount" name="principal" id="principal" onChange="calculate();"></output>

Then, in the calculate function  there is logic like this:

var principal = document.getElementById("principal").value;

Typically I see IE making 'assumptions' in how it interprets code, but this seems to be one instance where IE is doing the right thing and not assuming the field has a property which it does not.

 

I would write all of that much differently, but to make it work correctly move the name/id parameters from the <output> tags to the corresponding <input> tags. That way the code is referencing the value of the input fields.

Go to the full post


  • Please log in to reply
2 replies to this topic

#1 jarvis

jarvis
  • Members
  • PipPipPip
  • Advanced Member
  • 427 posts

Posted 16 May 2018 - 11:16 AM

Hi All,

 

I've the following script which serves as a loan calculator. I've changed some of the inputs to use range sliders.

 

It works fine in Chrome, FF and Edge, however, it simply won't play ball in IE11. The few errors it was throwing up I've since addressed yet it still won't work

 

I'm perplexed (and JavaScript is not my language of choice)

 

 

Any help would be much appreciated

 

Thanks in advanced



#2 jarvis

jarvis
  • Members
  • PipPipPip
  • Advanced Member
  • 427 posts

Posted 16 May 2018 - 11:17 AM

<form name="loandata">
  <table class="loancalc">
    <tr>
      <td class="smaller-width">Amount of the loan:</td>
      <td>
        <input type="range" min="2500" max="25000" step="500" data-rangeslider onChange="calculate();"> 
        <output class="loan-amount" name="principal" id="principal" onChange="calculate();"></output>        
    </td>
    </tr>
  <!--
    <tr>
      <td>Annual percentage rate of interest:</td>
      <td><input type="text" name="interest" onChange="calculate();" value="6"></td>
    </tr>
  -->
    <tr>
      <td class="smaller-width">Repayment period in years:</td>
      <td>
        <input type="range" min="1" max="5" data-rangeslider onChange="calculate();"> 
        <output class="loan-years" name="years" id="years" onChange="calculate();"></output>    
    </td>
    </tr>

    <tr>
      <td>Your monthly payment:</td>
      <td class="calc-result">&pound;<span class="result" id="payment"></span></td>
    </tr>
    <tr>
      <td>Your total payment:</td>
      <td class="calc-result">&pound;<span class="result" id="total"></span></td>
    </tr>
    <tr>
      <td>Your total interest payments:</td>
      <td class="calc-result">&pound;<span class="result" id="totalinterest"></span></td>
    </tr>
  </table>
</form>


<script language="JavaScript">

function calculate() {
    // Get the user's input from the form. Assume it is all valid.
    // Convert interest from a percentage to a decimal, and convert from
    // an annual rate to a monthly rate. Convert payment period in years
    // to the number of monthly payments.
    //var principal = document.loandata.principal.value;
    var principal = document.getElementById("principal").value;
    var interest = 6 / 100 / 12;
    //var payments = document.loandata.years.value * 12;
    var payments = document.getElementById("years").value * 12;

    // Now compute the monthly payment figure, using esoteric math.
    var x = Math.pow(1 + interest, payments);
    var monthly = (principal*x*interest)/(x-1);

    // Get named <span> elements from the form.
    var payment = document.getElementById("payment");
    var total = document.getElementById("total");
    var totalinterest = document.getElementById("totalinterest");

    // Check that the result is a finite number. If so, display the
    // results by setting the HTML content of each <span> element.
    if (isFinite(monthly)) {
        payment.innerHTML = monthly.toFixed(2);
        total.innerHTML = (monthly * payments).toFixed(2);
        totalinterest.innerHTML = ((monthly*payments)-principal).toFixed(2);
    }
    // Otherwise, the user's input was probably invalid, so display nothing.
    else {
        payment.innerHTML = "";
        total.innerHTML = ""
        totalinterest.innerHTML = "";
    }
}
</script>
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

    <script>
    $(function() {

        var $document = $(document);
        var selector = '[data-rangeslider]';
        var $element = $(selector);

        // For ie8 support
        var textContent = ('textContent' in document) ? 'textContent' : 'innerText';

        // Example functionality to demonstrate a value feedback
        function valueOutput(element) {
            var value = element.value;
            var output = element.parentNode.getElementsByTagName('output')[0] || element.parentNode.parentNode.getElementsByTagName('output')[0];
            output[textContent] = value;
        }

        $document.on('input', 'input[type="range"], ' + selector, function(e) {
            valueOutput(e.target);
        });



        // Basic rangeslider initialization
        $element.rangeslider({

            // Deactivate the feature detection
            polyfill: false,

            // Callback function
            onInit: function() {
                valueOutput(this.$element[0]);
            },

            // Callback function
            onSlide: function(position, value) {
                console.log('onSlide');
                console.log('position: ' + position, 'value: ' + value);
            },

            // Callback function
            onSlideEnd: function(position, value) {
                console.log('onSlideEnd');
                console.log('position: ' + position, 'value: ' + value);
            }
        });

    });

$(document).ready(function() {
  calculate();
});
    </script>


#3 Psycho

Psycho
  • Moderators
  • Move along, nothing to see here
  • 11,937 posts
  • LocationCanada

Posted 16 May 2018 - 02:28 PM   Best Answer

To my knowledge, <output> tags do not have a "value" attribute.

 

In your form there are fields like this:

<output class="loan-amount" name="principal" id="principal" onChange="calculate();"></output>

Then, in the calculate function  there is logic like this:

var principal = document.getElementById("principal").value;

Typically I see IE making 'assumptions' in how it interprets code, but this seems to be one instance where IE is doing the right thing and not assuming the field has a property which it does not.

 

I would write all of that much differently, but to make it work correctly move the name/id parameters from the <output> tags to the corresponding <input> tags. That way the code is referencing the value of the input fields.


Edited by Psycho, 16 May 2018 - 02:29 PM.

The quality of the responses received is directly proportional to the quality of the question asked.

I do not always test the code I provide, so there may be some syntax errors. In 99% of all cases I found the solution to your problem here: http://www.php.net




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users