0

I'm learning a bit HMTL5 to prepare to the 70-480 exam. I'm trying to do some javascript code. It looks something like this:

function inchestometers(inches) {
    if (inches < 0)
        return -1;
    else {
        var meters = inches / 39.37;
        return meters;
    }
}

var inches = 12;
var meters = inchestometers(inches);
document.write("the value in meters is " + meters);


var hello = document.getElementById("hello");
hello.firstChild.nodeValue = "Hello World";

and I have such html code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Htnl 5 test</title>
    <script src="script/test.js"></script>

</head>

<body>

<p id="hello">Hello</p>

</body>
</html>

In my VS 2012 i have used the Asp.net Empty Web application project and added the Js file and also the html file. The problem is that The function runs properly without any exeptions. This function is taken from here: http://msdn.microsoft.com/en-us/library/cte3c772(v=vs.94).aspx

But whem I'm trying to run the code where I'm getting the document element it' crashint with the error like in the subject. What I've investigated is that the hello gets the null value. I've also tried the code thaken from here:

http://msdn.microsoft.com/en-us/library/yfc4b32c(v=vs.94).aspx - the example with the div. I have the same effect.

What is wrong? I know that there were simmilar subjects but I can't seem to find one matching to mine. Thank you kindly for your help.

Regards Rafal

Rafal_Koscinski
  • 317
  • 5
  • 22

1 Answers1

1

you are getting a problem because your javascript code is running before the element

<p id="hello">

is defined.

the simplest solution is to include your script at the end of the body section instead of in the head section but this would cause the document.write call to occur after the rest of the content.

another solution would be to place the code inside two functions like this

function do_conversion() {
    var inches = 12;
    var meters = inchestometers(inches);
    document.write("the value in meters is " + meters);
}
function say_hello() {
    var hello = document.getElementById("hello");
    hello.firstChild.nodeValue = "Hello World";
}

then change the body section like this

<body onload='say_hello()'>
    <script>
      do_conversion();
    </script>

    <p id="hello">Hello</p>

</body>
Noel Walters
  • 1,843
  • 1
  • 14
  • 20
  • ok but there were some tutorials that told, that we should place scirpts in the head section, in my company in asp.net the scripts are loaded before the dome, is it the reason that probably to loading of the sciprs is in the page_load event? – Rafal_Koscinski Apr 29 '13 at 18:17
  • Placing scripts either in the head or at the end of the body are both conventional practices. There are also times when it justifiable to invoke a script from within the body, either by adding it as an event handler or while the document is loading, to insert content with document.write(). some people advocate no script in the body at all and do all dom manipulations and inserting of dynamic ciontent in the onload event handler, but I think it depends on what you are doing and who the end user is – Noel Walters Apr 30 '13 at 10:17
  • also check out this question http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup – Noel Walters Apr 30 '13 at 10:17