Multiple Functions in Javascript

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="
/pics/frogger.PNG" height="100" width="100" /><br />Frogger</a>
        </div>
    </body>
</html>

Thanks for helping!

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

Share Improve this question edited Jun 3, 2012 at 6:57 Daedalus 7,7225 gold badges38 silver badges63 bronze badges asked Jun 3, 2012 at 1:04 user1433032 431 gold badge1 silver badge4 bronze badges

3 You can't put linebreaks in strings like that. – Pointy Commented Jun 3, 2012 at 1:07
1 Check your JS console to see the error. – Dave Newton Commented Jun 3, 2012 at 1:08
1 You're using the style attribute incorrectly. Instead of style="{height:100;}" do style="height:100;" – j08691 Commented Jun 3, 2012 at 1:11
1 also specify the units, 100%? 100px? – Christian Commented Jun 3, 2012 at 1:12
3 Another option would be to hide/show content rather than continually regenerate it. – Dave Newton Commented Jun 3, 2012 at 1:14

Add a comment |

5 Answers 5

Sorted by: Reset to default 6

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

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

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.";
}

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.

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

Multiple Functions in Javascript - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)