CODEWITHSUNDEEP
javascripthtmldom
DW.
DW.

Reputation: 21

Getting JavaScript functions to work in HTML?

I am trying to code some simple function. As a test I have written the following: (sorry, I don't know how to format on this page)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Examples of Strings</title>

<script type="text/javascript">
//<![CDATA[
         <!-- hide me
         // get a name 


// declarations
var int firstVariable =  7;
var int firstVariable = 9;


// stop hiding me -->
//]]>
</script>
</head>
<body>
<h1>My First Function</h1>
<script type="text/javascript">
//<![CDATA[
         <!-- hide me


function name(firstVariable, secondVariable){

    int result = firstVariable + secondVariable;
    document.writeln(result);
    return result;
}




// show me -->
//]]>
</script>
</body>
</html>

The validator http://validator.w3.org/check says it's perfectly fine. HOWEVER, under no circumstances can I get the function to work. Am I doing something fundamentally wrong in relation to the Document Object Model?

Upvotes: 1

Views: 3750

Answers (6)

DW.
DW.

Reputation: 21

Thanks for the above replies.

I was, amoungst other things, forgetting that there are no main methods for HTML!

Functioning edited code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Examples of Strings</title>

<script type="text/javascript">
//<![CDATA[

         // get a name 


// declarations
var firstVariable =  7;
var secondVariable = 9;



//]]>
</script>
</head>
<body>
<h1>My First Function</h1>
<script type="text/javascript">
//<![CDATA[


function name(firstVariable, secondVariable){

    var result = firstVariable + secondVariable;
    alert(result);
    return result;
}

name(firstVariable, secondVariable);



//]]>
</script>
</body>
</html>

Upvotes: 0

gblazex
gblazex

Reputation: 50101

The validator says your markup ok, because your markup is ok indeed. The problem lies within the <script> tags (something the W3C validator can't test for you).

First of all remove the <!-- hide me --> comments as they are unnecessary and causing syntax error in Javascript.

Secondly if you're developing for browsers you should use ECMAScript 5th edition which doesn't have static types. You can't use int or var int.

Thirdly, you left out function invocation (at least in your example above).

Your code becomes: 

// declarations
var firstVariable = 7;
var secondVariable = 9;

function name(firstVariable, secondVariable){
    var result = firstVariable + secondVariable;
    alert(result);
    return result;
}

name(firstVariable, secondVariable); // call the function

Oh and by the way, please drop the tutorials that teach you to use document.write because it's a very bad coding practice. For testing and debug messages use console.log or alert.

Upvotes: 0

DrStrangeLove
DrStrangeLove

Reputation: 11557

you forgot to call the function?? (assign it to eventtype)

Upvotes: 2

Andrew Marshall
Andrew Marshall

Reputation: 96904

First, that validator does not check javascript, it only checks the HTML markup.

Second, when you have <!-- hide me you need to comment it out the same way you do the show me --> like so: // <!-- hide me. There's little need for these today, so you can safely omit them anyway.

Third, you're re-defining firstVariable, you probably meant to put secondVariable the second time.

Fourth, you're never calling the function, so you probably want to put name(7, 9); somewhere after the function declaration.

Finally, you don't need to return the result if you're not using it (which you're not in this case), and you shouldn't use document.write(), as it holds up the rendering of the page.

<script type="text/javascript">
// <!--
//<![CDATA[

var int firstVariable = 7;
var int secondVariable = 9;

function name(firstVariable, secondVariable){
    int result = firstVariable + secondVariable;
    document.writeln(result);
}

name(firstVariable, secondVariable);

//]]>
// -->
</script>

Upvotes: 0

JohnIdol
JohnIdol

Reputation: 50067

Is that all of your code?

If so, you're not calling the function at all!

If not, show us how the function is being called.

Also you are declaring variables as int, there's no int in js, just var is fine.

Upvotes: 0

limc
limc

Reputation: 40160

Well, the problem is you defined a function, but you didn't execute the function at all.

Try calling the function, like this:

<script>

    var  firstVariable =  7;
    var  secondVariable = 9; // you have a typo

    function name(firstVariable, secondVariable){

        var result = firstVariable + secondVariable;
        document.writeln(result);
        return result;
    }

    // making the function call
    name(firstVariable, secondVariable);

</script>

By the way remove both <!-- hide me first. If the browser supports javascript, then you have a malformed comment tag, if you want that hide me, then close it properly, like this <!-- hide me -->.

Upvotes: 0

Related Questions