www.webdeveloper.com
Results 1 to 4 of 4

Thread: functions with variables?

  1. #1
    Join Date
    Mar 2004
    Posts
    7

    Angry functions with variables?

    Hello, newish to JS variables; wracking my brain trying to understand how to assign a variable to the following function.

    For this example, I am setting up a simple input button to call markup into a Div box.

    JS Portion:
    Code:
    <script language="JavaScript">
    function changeContent() {
    document.getElementById('output_div').innerHTML="<b>called data</b>";
    }
    </script>
    HTML Portion:
    Code:
    <input type="button" value="Call Data" onClick="changeContent()">
    
    <div id="output_div">output div area</div>
    so far, so good. But lets say I want TWO buttons for separate markup strings into the same div... id have to use variables.

    This is where things go south, please help me understand where I went wrong , and what I should correct in the following code:

    -JS:
    Code:
    <script language="JavaScript">
    var cats = function() {
    document.getElementById('output_div').innerHTML="<i>meow.</i>";
    }
    var dogs = function() {
    document.getElementById('output_div').innerHTML="<b>WOOF!</b>";
    }
    </script>
    -HTML:
    Code:
    <input type="button" value="Mice!" onClick="changeContent('cats')">
    <br>
    <input type="button" value="Bones!" onClick="changeContent('dogs')">
    
    <div id="output_div">output div</div>
    Doesnt work, not at all, not even with one button.

    Where did I mess up? ..and what should this code look like instead?

    Thanks yall!

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,129
    Try this:

    Code:
    function changeContent(x) {
        var content = '';
        switch (x) {
            case 'cats' :
                content = '<i>meow.</i>';
                break;
            case 'dogs' :
                content = '<b>WOOF!</b>'
                break;
        }
        document.getElementById('output_div').innerHTML = content;
        
    }
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Mar 2004
    Posts
    7
    thanks so much. you rock.

  4. #4
    Join Date
    Mar 2004
    Posts
    7
    in the next phase of my project now that we got that figured, is the called upon markup.

    Lets say instead of WOOF and meow, I wanted to source in a preformatted divspan (set to hidden by default) designed to fit the blue box.
    what would be the best way to go about this>?

    -use JS to call on the div? (an change display to visable)

    -hard code the div into the script

    -use an echo


    I was leaning toward the 2nd option, what do you think?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles