Multiple Functions in Javascript

Question

I'm sorry if this is a really stupid question, I'm a little new to JavaScript. I am trying to make a webpage containing multiple functions, but only the first of the functions will be successful. I searched on google and I only got results for calling multiple functions at once, but that is not what I am looking for. Here is an example of what I am trying to do:

<html>
    <head>
        <script type="text/javascript">
            function frogger()
            {
                document.getElementById("descriptions").innerHTML="Frogger <br />Description: Get
                    the frog to the islands at the top of the screen without falling into the water or
                    getting hit by cars. <br />Controls: Up arrow key to move forward, down arrow key to
                    move backward, left arrow key to move left, and right arrow key to move right.";
            }
            function clear()
            {
                document.getElementById("descriptions").innerHTML=" ";
            }
        </script>
    </head>
    <body>
        <div id="descriptions" style="{height:100;}">
        </div>
        <div class="game" onmouseover="frogger()" onmouseout="clear()">
            <a href="/arcade/frogger.html"><img border="0" src="http://ggmedia.site50.net
/pics/frogger.PNG" height="100" width="100" /><br />Frogger</a>
        </div>
    </body>
</html>

Thanks for helping!

You're using the style attribute incorrectly. Instead of style="{height:100;}" do style="height:100;" — j08691
– j08691, Commented Jun 3, 2012 at 1:11
Another option would be to hide/show content rather than continually regenerate it. — Dave Newton
– Dave Newton, Commented Jun 3, 2012 at 1:14

Guffa · Accepted Answer · 2012-06-03 01:13:08Z

6

There is already a function named clear in the document object. Name your function something else.

answered Jun 3, 2012 at 1:13

Guffa

703k111 gold badges760 silver badges1k bronze badges

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

Comments

Musa · Accepted Answer · 2012-06-03 01:22:54Z

2

Your string has line breaks, you can remove them or add a \ to the end of each line

function frogger()
{
    document.getElementById("descriptions").innerHTML="Frogger <br />Description: Get\
the frog to the islands at the top of the screen without falling into the water or\
getting hit by cars. <br />Controls: Up arrow key to move forward, down arrow key to\
move backward, left arrow key to move left, and right arrow key to move right.";
}

Edit: If you change the name of the clear function to say clearx it works, weird.

Edit: Apparently there is a clear method in the document object

edited Jun 3, 2012 at 1:22

answered Jun 3, 2012 at 1:10

Musa

97.9k17 gold badges123 silver badges144 bronze badges

1 Comment

Kasun Siyambalapitiya Over a year ago

by adding ``what will happen, will the above sentence will be turn into a single sentence?

Andrew · Accepted Answer · 2016-09-06 15:15:53Z

2

function frogger() {
    document.getElementById("descriptions").innerHTML="Frogger <br />Description: Get the frog to the islands at the top of the screen without falling into the water or getting hit by cars. <br />Controls: Up arrow key to move forward, down arrow key to move backward, left arrow key to move left, and right arrow key to move right.";
}

edited Sep 6, 2016 at 15:15

answered Jun 3, 2012 at 1:12

Andrew

3,9991 gold badge37 silver badges40 bronze badges

4 Comments

Dave Newton Over a year ago

Well, I'd actually prefer to see line continuations or concats than a long-ass string, really.

Andrew Over a year ago

@sachleen I've never seen the backward slash method for strings like that. Thanks. Does that method have a name?

Fabrício Matté Over a year ago

I'll +1 anyway because strings with 5000+ characters per line are for the lords only to read.

Dave Newton Over a year ago

@AndrewAnthonyGerst Line continuations.

sachleen · Accepted Answer · 2012-06-03 01:13:54Z

0

Rename the clear() function to something else. I changed it to clearDesc() and it worked fine (after fixing the line break issue in the string). See here.

answered Jun 3, 2012 at 1:13

sachleen

31.2k8 gold badges81 silver badges75 bronze badges

Comments

Andrew · Accepted Answer · 2012-06-03 12:38:56Z

  <div class="game" onmouseover="frogger()" onmouseout="clearr()">mousee</div>
    <div id="descriptions"></div>
    <script type="text/javascript">
        var frogger = function () {
            this.innerHTML = ["Frogger <br />Description: Get}",
                    "the frog to the islands at the top of the screen without falling into the water or",
                    "getting hit by cars. <br />Controls: Up arrow key to move forward, down arrow key to",
                    "move backward, left arrow key to move left, and right arrow key to move right."].join('');
        }.bind(document.getElementById("descriptions"));
        //
        var clearr = function () {
            this.innerHTML = " ";
        }.bind(document.getElementById("descriptions"));

    </script>

Here is this code in a jsfiddle.net

http://jsfiddle.net/gerst20051/6Neqv/

Collectives™ on Stack Overflow

Multiple Functions in Javascript

5 Answers 5

Comments

1 Comment

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related