1

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.

Kimmax
  • 1,658
  • 21
  • 34
Ankur
  • 171
  • 3
  • 13

2 Answers2

3

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);
    }
Kevin Bowersox
  • 93,289
  • 19
  • 159
  • 189
  • 1
    Or just move the script to the end of the doc. – j08691 Jan 04 '14 at 22:46
  • 2
    It's worth noting that `element.event` such as `window.onload` etc is outdated and it's preferable to use `element.addEventListener`. You have really high rep and I don't mean any offense, but I think it would be good for your answers to recommend best practices. With a rep like yours, your advice carries a lot of weight. – m59 Jan 06 '14 at 18:32
  • Good read on the subject: http://stackoverflow.com/questions/6902033/element-onload-vs-element-addeventlistenerload-callbak-false – m59 Jan 06 '14 at 19:00
  • m59 Thanks for your suggestions, I have updated the answer. I don't take offense to your comment, but I will say that it is impossible for everyone to know everything regarding a topic. I work across a wide array of technologies so keeping up with the latest and greatest is hard. That is one reason I answer questions on StackOverflow. I appreciate the downvotes(with explanations) and comments (such as yours) more than the upvotes, since I learn so much more from them. Thank you for your suggestion, I will utilize this approach in the future. – Kevin Bowersox Jan 07 '14 at 01:18
  • @KevinBowersox Nice, man! That's a great attitude. +1 for both :) – m59 Jan 09 '14 at 07:16
2

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!" );
});
m59
  • 43,214
  • 14
  • 119
  • 136