Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    OM2
    OM2 is offline
    New Coder
    Join Date
    Apr 2012
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts

    How to dynamically change content

    *Complete* newbie question: how do I change content dynamically in my HTML using Javascript?

    Well... I thought I had the answer:

    Code:
    <!DOCTYPE html>
    
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>My Development Website</title>
    <script type="text/javascript">
    
    $("#my-name").html("Text is here");
    
    </script>
    
    </head>
    <body>
    <div id="my-name"></div>
    </body>
    </html>
    Surely, my DIV should change content?

    Where am I going wrong?

    Thanks


    OM

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    (1) You are using jQuery (or possibly other framework) syntax but you aren't loading the jQuery (or other framework) library.

    (2) You are referencing the <div> by id *BEFORE* it is created!

    Code:
    <!DOCTYPE html>
    
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>My Development Website</title>
    </head>
    <body>
    <div id="my-name"></div>
    
    <script type="text/javascript">
    // plain vanilla JavaScript
    document.getElementById("my-name").innerHTML = "Text is here";
    </script>
    </body>
    </html>
    Personally, I would recommend you learn straight JavaScript before you go trying to learn jQuery or some other framework(s).

    You'll be MUCH better off in the long run.

    HINT: Anytime you see code using $("...") notation it's 95% chance it is jQuery, 4% chance some other library, 1% ordinary JS.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    OM2 (07-12-2012)

  • #3
    OM2
    OM2 is offline
    New Coder
    Join Date
    Apr 2012
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    (2) You are referencing the <div> by id *BEFORE* it is created!
    doh. ok, that is put down to my inexperience

    Quote Originally Posted by Old Pedant View Post
    (1) You are using jQuery (or possibly other framework) syntax but you aren't loading the jQuery (or other framework) library.

    HINT: Anytime you see code using $("...") notation it's 95% chance it is jQuery, 4% chance some other library, 1% ordinary JS.
    erm yes. i didn't realise that was jquery specific! i was copying and reusing other code. for the simplicity of posting my problem here, i cut out a lot of the things that weren't required

    thanks for the tip about the $("...") - i had no idead - i just assumed it was all javascript

    Quote Originally Posted by Old Pedant View Post
    Personally, I would recommend you learn straight JavaScript before you go trying to learn jQuery or some other framework(s).

    You'll be MUCH better off in the long run.
    sounds like good advice. where would u suggest is the best starting point?
    i want to develop html5 apps for mobiles and make animations and other things - all of which i could do *easily* in flash
    i want to code real applications in javascript - so definitely want to get serious about learning

    thanks - it's great to learn from experienced coders like u

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,916
    Thanks
    15
    Thanked 227 Times in 227 Posts
    This is really what javascript is about, getting data from a webpage, changing the webpage, real basics. My advice is don't use a framework until you understand basic code. Not doing it is just like people who use "pagemaker" software of some kind before they learn basic HTML. They inevitably end up making some kind of mistakes that they have no clue about how to correct. And they have no real control over the end product. So, for your own sake, use w3schools or any of the other wonderful resources on the web to take at least a couple of javascript courses before you start using a framework.

  • #5
    OM2
    OM2 is offline
    New Coder
    Join Date
    Apr 2012
    Posts
    59
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    This is really what javascript is about, getting data from a webpage, changing the webpage, real basics. My advice is don't use a framework until you understand basic code. Not doing it is just like people who use "pagemaker" software of some kind before they learn basic HTML. They inevitably end up making some kind of mistakes that they have no clue about how to correct. And they have no real control over the end product. So, for your own sake, use w3schools or any of the other wonderful resources on the web to take at least a couple of javascript courses before you start using a framework.
    thanks for the advice
    i'm an experienced coder and not a beginner as such
    my mistake posted was just a lack of expereince
    but yes: i am missing the fundamentals of javascript
    w3schools is great, simple, but always a good start

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    As Felgall will tell you, the w3cschools stuff is (a) basic and (b) mostly outdated. So use it a as a start, but be ready to get beyond it pretty soon.

    You could do worse than following the links from Felgall's sig to some of his articles.

    I think sometimes he goes overboard: He just assumes that everyone will be creating JavaScript libraries that have to integrate with every other library in the world and will be used by 31,275 different sites every day. Whereas most of us are creating simple scripts for our own use only. But it can't hurt to use his concepts and often times helps.
    Last edited by Old Pedant; 07-13-2012 at 07:41 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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