Getting JavaScript functions to work in HTML?

Question

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?

Quite annoyingly the above code that I wrote just seems to have compiled - hiding the actual source code.. — DW.
– DW., Commented Feb 20, 2011 at 20:29

DrStrangeLove · Accepted Answer · 2011-02-20 20:32:59Z

2

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

answered Feb 20, 2011 at 20:32

DrStrangeLove

11.6k16 gold badges63 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

limc · Accepted Answer · 2011-02-20 20:31:20Z

0

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 .

answered Feb 20, 2011 at 20:31

limc

40.3k22 gold badges106 silver badges145 bronze badges

1 Comment

user1385191 Over a year ago

Of course, there are no integers in Javascript. var result needs to be used.

JohnIdol · Accepted Answer · 2011-02-20 20:32:25Z

0

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.

answered Feb 20, 2011 at 20:32

JohnIdol

50.4k62 gold badges162 silver badges244 bronze badges

2 Comments

DW. Over a year ago

How does JavaScript handle types if they are not defined? Are they, be default objects, and, if so, how can JavaScript perform basic maths with floats, ints, etc.?

JohnIdol Over a year ago

javascript is a dynamic language, if you assign a string its a string, if you assign an int it's an int. etc. have a look at this link for a detailed explanation --> blog.jeremymartin.name/2008/03/…

Andrew Marshall · Accepted Answer · 2011-02-20 20:32:47Z

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

Second, when you have  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>

gblazex · Accepted Answer · 2011-02-20 20:34:10Z

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  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.

DW. · Accepted Answer · 2011-02-20 20:52:28Z

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>

Collectives™ on Stack Overflow

Getting JavaScript functions to work in HTML?

6 Answers 6

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related