开发者

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 + second开发者_运维问答Variable;
    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?


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


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


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.


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>


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.


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜