CODEWITHSUNDEEP
javascript
Ankur
Ankur

Reputation: 169

Javascript doesn't seems to be running

Ok, I have been trying to make it work past 30 minutes.

Everything works fine in this jsfiddle :- http://jsfiddle.net/6KT4R/1/

But when I run this on my local wamp server..nothing seems to happen!.

Code :-

<script src="js/jquery-1.8.2.min.js" type="text/javascript">
    </script>
<script type="text/javascript">
var inputLtc = document.getElementById('input-ltc'),
    inputBtc = document.getElementById('input-btc');

var constantNumber = 0.022632;

inputLtc.onkeyup = function () {
    var result = parseFloat(inputLtc.value) * constantNumber;
    inputBtc.value = !isNaN(result) ? result : '';
};
</script>

<input type="text" name="ltc" id="input-ltc">
<input type="text" name="btc" id="input-btc" readonly>

What is possibly wrong here? Thanks.

Upvotes: 1

Views: 124

Answers (2)

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

The script is executing before the DOM is loaded. Try:

window.onload = function(){
    var inputLtc = document.getElementById('input-ltc'),
    inputBtc = document.getElementById('input-btc');

    var constantNumber = 0.022632;

    inputLtc.onkeyup = function () {
        var result = parseFloat(inputLtc.value) * constantNumber;
        inputBtc.value = !isNaN(result) ? result : '';
    };
}

As m59 suggested there is an improved method of executing the event onload. The following code snippet is preferred:

   var funct = function(){
        var inputLtc = document.getElementById('input-ltc'),
        inputBtc = document.getElementById('input-btc');

        var constantNumber = 0.022632;

        inputLtc.onkeyup = function () {
            var result = parseFloat(inputLtc.value) * constantNumber;
            inputBtc.value = !isNaN(result) ? result : '';
        };
    }

    if (window.attachEvent){
       window.attachEvent('onload', funct);
    }else{
       element.addEventListener('load', funct, false);
    }

Upvotes: 3

m59
m59

Reputation: 43745

You're getting your element references before the elements exist on the page. In the jsfiddle, the javascript is executed after the html. You could reproduce this by moving your script tag below the related html. It is best practice to put all script tags just before the end of the body like this:

  <script></script>
</body>

Otherwise, you'll need to register an event listener to watch for page load and execute your javascript code then.

window.addEventListener('load', function() {
  console.log('loaded!');
});

with jQuery:

$(document).ready(function() {
  console.log('loaded!');
});

//this is the jQuery shorthand for the same function above
$(function() {
  console.log( "loaded!" );
});

Upvotes: 2

Related Questions