SitePoint Sponsor

User Tag List

Results 1 to 7 of 7

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Basic function question with passing parameters

    Ok, I'm still learning the basics of JS, and I'm stuck in passing parameters via a function.
    Why is this script not showing up the number 31 in the test div ?

    If I do alert(content); or alert(place); it alerts the right stuff, so it passes the value correctly.
    Perhaps the problem is by getting the element by ID. I already tried with different types of ''"", without '", with + with escape things\, but I obviously have no clue what the right approach would be for this.

    Code JavaScript:
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
     
    function doit(content,place){
    document.getElementById("place").innerHTML = content;
    }
     
    doit(31,'test');
     
    </script>
    </head>
    <body>
    <div id="test"></div>
    </body>
    </html>

  2. #2
    ********* Staff mattevans's Avatar
    Join Date
    Sep 2009
    Location
    Melbourne, Australia
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi bulevardi,

    Really close!
    In the example above, you need to call the function (doit()).

    For this example, how about we just call the function from the body tag.
    Code JavaScript:
    <body onload="doit(31, 'test')">

    Secondly, I would recommend trying to replicate the example using jQuery.

    Have a read up on jQuery and see if you can understand how it works.

    Below is an example to get you started.

    Code HTML4Strict:
    <html>
    <head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
            $("#test p").click(function () {
                var htmlStr = "This is my new content!"
                $(this).text(htmlStr);
            });
      });
    </script>
     
    </head>
    <body>
     
        <div id="test">
     
            <p>Click to change me!</p>
     
        </div>
     
    </body>
    </html>

    Let me know how you get on!

    Thanks,
    Matt Evans
    Sitepoint Developer
    tweet 2 me

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2007
    Location
    North Yorkshire, UK
    Posts
    483
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Get familiar with javascript before launching into jquery itself.

    Matt is right you need to call the doit function after the page has loaded otherwise there will not necessarily be the element you are trying to update.

    Your function has an argument place but in the getElementById function you have used "place" (a string). Losing the quotes gives you the argument.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by PhilipToop View Post
    Get familiar with javascript before launching into jquery itself.

    Matt is right you need to call the doit function after the page has loaded otherwise there will not necessarily be the element you are trying to update.

    Your function has an argument place but in the getElementById function you have used "place" (a string). Losing the quotes gives you the argument.
    Thanks too.
    Yes, I forgot that the page must be loaded first.

    And I'm not that familiar with jquery yet at the moment.

  5. #5
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mattevans View Post
    Hi bulevardi,
    Really close!
    In the example above, you need to call the function (doit()).
    How do you mean? To put the same function in a new function?
    Like this:

    Code JavaScript:
    function dothisfirst(){
     
    function doit(content,place){
    document.getElementById("place").innerHTML = content;
    }
     
    doit(31,'test');
     
    }
     
    dothisfirst;   // or dothisfirst();    
                     // both not working :s

  6. #6
    ********* Staff mattevans's Avatar
    Join Date
    Sep 2009
    Location
    Melbourne, Australia
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi bulevardi,

    Something along the lines of...

    Code HTML4Strict:
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
     
    function doit(content,place){
        document.getElementById(place).innerHTML = content;
    }
     
    </script>
    </head>
    <body onload="doit(31, 'test')">
     
    <div id="test"></div>
     
    </body>
    </html>

    As PhilipToop mentioned, you have quotes around the 'place' argument within the getElementById method. Don't forget to remove those quotes!

    Thanks,
    Matt Evans
    Sitepoint Developer
    tweet 2 me

  7. #7
    SitePoint Addict
    Join Date
    Dec 2008
    Location
    Brussels
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok ok, it works right now. Thanks!

    I did it like this now:

    (as I don't like it in the body onload because I 'm loading multiple functions at once in my total script)
    Code JavaScript:
     
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
     
    function doit(content,place){
    document.getElementById(place).innerHTML = content;
    }
     
     
    function dothisfirst(){
    doit(31,'test');
    }
     
    window.onload = dothisfirst; 
     
     
    </script>
    </head>
    <body>
    <div id="test"></div>
    </body>
    </html>


Bookmarks

Posting Permissions

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