Advanced Search

Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 24

Thread: Element help

  1. #11
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Okay but i cant find the example anymore

  2. #12
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,624
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    ...that's really weird. The links were working yesterday. I fixed them. Here's the correct URL: http://jsfiddle.net/traq/9my2g/4/
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  3. #13
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    okay i worked it out now but anyway heres the code so far:

    Code:
    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>&nbsp;</title>
    
    <script>
    var b = document.getElementById( 'b' );
    var p = document.getElementById( 'p' );
    
    b.addEventListener( 'click',function(){ 
        characterProfile();
    });
    
    function getGenderFromRadio(){
        var radio_gender = document.getElementsByName( 'gender' );
        for( var i=0; i<radio_gender.length; i++ ){
            if( radio_gender[i].checked ){
                return radio_gender[i].value;
            }
        }
        return 'unknown';
    }
    function characterProfile()
        p.innerHTML="<pre><h2>Character Profile<\/h2><\/pre>"
            + "<pre><p>Gender: " 
            + getGenderFromRadio() 
            + "<\/p><\/pre>";
    }
    
    function credit()
    {
    document.body.innerHTML+="<pre><h3>These people helped me alot:<\/h3><br><br><a href='http://www.dynamicdrive.com/forums/'>Dynamic Drive<\/a><\/pre>"
    }
    function craft()
    {
    document.body.innerHTML="<pre><p>What do you want to craft?<\/p><button onClick='newWorld()'>Back<\/button><\/pre>"
    }
    function explore()
    {
    document.body.innerHTML="<pre><h1>Where do you want to explore?<\/h1><button onClick='newWorld()'>Back<\/button><br><button onClick='exploreNorth()'>North<\/button><\/pre>"
    }
    
    <!--Below are the explore() functions
    function exploreNorth()
    {
    var found='a branch'
    document.body.innerHTML="<pre><h4>You walk towards north and find "+found+"<\/h4><br><button onClick='explore()'>Back<\/button><\/pre>"
    }
    function myInventory1()
    {
    document.body.innerHTML="<pre>You came from first inventory item <button onClick='newWorld()'>Back<\/button><\/pre>"
    }
    
    function myInventory2()
    {
    document.body.innerHTML="<pre>You came from second inventory item <button onClick='newWorld()'>Back<\/button><\/pre>"
    }
    
    function myInventory3()
    {
    document.body.innerHTML="<pre>You came from third inventory item <button onClick='newWorld()'>Back<\/button><\/pre>"
    }
    
    function showInventory()
    {
    document.getElementById('inventory').style.display='block';
    document.getElementById('hide_list').style.display='inline'
    }
    
    function hideInventory()
    {
    document.getElementById('inventory').style.display='none';
    document.getElementById('hide_list').style.display='none'
    }
    
    
    function newWorld()
    {
    document.body.innerHTML="<pre><h1>Hello and welcome to World of My Core!<\/h1>What would you like to do?<br><button style='width:145px' onClick='window.location.reload()'>Exit<\/button><br><button onClick='showInventory()' style='display: inline; width: 145px'>Show Inventory Items<\/button>&nbsp;<button id='hide_list' style='display: none' onclick='hideInventory()'>Hide Inventory<\/button><ul id='inventory' style='margin-top: 10px; margin-bottom: 0px; display: none'><li onclick='myInventory1()'>first item<\/li><li onclick='myInventory2()'>second item<\/li><li onclick='myInventory3()'>third item<\/li><\/ul><br><button onClick='craft()' style='width:145px'>Craft<\/button><br><button onClick='explore()' style='width:145px'>Explore<\/button><br><button style='width:145px' onClick='characterProfile()'>Profile<\/button><\/pre>"
    }
    function charCreate()
    {
    document.body.innerHTML="<pre><h3>Start by choosing your name!<\/h3><br><br><input type='text' name='name'><br><br><input type='radio' name='gender' value='Male'>Male<br><input type='radio' name='gender' value='Female'>Female<br><br><button onClick='newWorld()'>New World<\/button><pre>"
    }
    </script>
    
    <style>
    pre{font-family: verdana; font-size: 12px}
    button {font-family: arial; font-size: 13px}
    button,li{cursor: pointer}
    </style>
    </head>
    
    <h1 style="color:brown">MY CORE</h1>
    
    
    <button onClick="charCreate()">Play</button><br>
    <button onClick="credit()">Credits</button>
    
    </body>
    </html>
    Last edited by NitroDev; 11-17-2013 at 07:00 AM.

  4. #14
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,624
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    cool. Is it working the way you want?

    If your question has been answered, please mark your thread "resolved":
    • On your original post (post #1), click [edit], then click [go advanced].
    • In the "thread prefix" box, select "Resolved".
    • Click [save changes].
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  5. #15
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    No it wont go past the "start menu"

  6. #16
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,624
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Are you testing your code? I would highly recommend using a console like Firebug or Chrome's Dev Tools. This makes it easy to find simple problems - the console will literally tell you what, and where, the problem is. In this case, there's an uncaught syntax error in your script, which causes it to stop execution (which is why nothing seems to happen). When you wrote the characterProfile function, you left out the opening curly brace:
    Code:
    function characterProfile()
        p.innerHTML="<pre><h2>Character Profile<\/h2><\/pre>"
        //  . . .
    
    --- should be ---
    
    function characterProfile(){
        p.innerHTML="<pre><h2>Character Profile<\/h2><\/pre>"
        //  . . .
    There are code editors that do the same things—syntax highlighting, error checking, autocompletion, code reference, and much much more.
    Komodo Edit, for example (my favorite), supports quite a few different languages, works on Linux, Mac, or Windows, and is free (as in beer).

    After you fix that error, your script seems to work, up to the point where you click on the [Profile] button. Look at the console, and you see this:
    Uncaught TypeError: Cannot set property 'innerHTML' of null
    Think about this:

    [1] When you click the [Profile] button, it is supposed to run the characterProfile function.

    [2] The characterProfile function does try to use the innerHTML property.

    [3] Let's assume, for the moment, that this is where the problem is. If so, that means that p must be null.

    [4] We defined p up at the top of the script: var p = document.getElementById( 'p' );.
    If p is null, that means that getElementById couldn't find an element on the page with id=p (and so returned null instead).

    [5] Is there an element on the page with an id of "p"? Nope. There's our problem.
    In the example I showed you, I had a paragraph with id=p that I was using to hold the result of the function, but you have no such paragraph in your markup.

    There's another problem, after this: can you figure out what it is?
    Last edited by traq; 11-17-2013 at 07:15 PM.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  7. #17
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Okay thanks alot now i have been using the JavaScript console and this keeps coming up

    Uncaught TypeError: Cannot set property 'innerHTML' of null TestMyCore.html:25
    characterProfile TestMyCore.html:25
    onclick
    I have looked all around the script and now i have added the id for p but i dont understand where i should add the id for b

  8. #18
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,624
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by NitroDev View Post
    Okay thanks alot now i have been using the JavaScript console and this keeps coming up
    Uncaught TypeError: Cannot set property 'innerHTML' of null TestMyCore.html:25
    I have looked all around the script and now i have added the id for p but i dont understand where i should add the id for b
    As you can see, adding an element with the id of "p" won't actually solve this — the problem I alluded to above is that, even if you add an element with the proper id (e.g., <p id=p></p>), it would be gone by the time you reach the point you need it because your previous functions overwrite the entire document body. You're erasing and replacing all of the page content on each button click. One possible solution (not the best, though, as you'll see below) would be to take the same approach as your other functions. Instead of trying to do p.innerHTML, do document.body.innerHTML again.

    As far as b goes, that will require a little more planning. Any "#b" element you put on the page will also be overwritten by the time you call this function.

    However, it's harder to say what to do because your "male" and "female" buttons are shown on the step before you call createProfile. You show the "Start by choosing your name!" screen, along with the M / F radios and a button that says [New World]. This button doesn't call the createProfile function, though, it calls the newWorld function. The newWorld function calls createProfile, but the radio buttons are already overwritten at this point, so there is no way to get their value: they're gone.

    I would suggest taking a step back and re-thinking your program flow: go back to your design stage and plan out which screens need to come in which order, what resources/information each step will need from the previous steps, and how you plan to pass those resources between "screens."

    How familiar are you with javascript? For example, do you know how to pass arguments to your functions? do you know how to create objects with methods? do you know what a controller is?

    Your current approach of rewriting the entire body for each new screen will quickly become very difficult to manage as your program becomes more complex.
    Last edited by traq; 11-18-2013 at 05:17 AM.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

  9. #19
    Join Date
    Oct 2013
    Location
    Finland
    Posts
    52
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Okay i really dont know what to say to that traq because molendjk "teached" on one post the
    HTML Code:
    document.body.innerHTML
    so im not familiar with anything else and i have no idea what "pass arguments to your functions" means so im a complete noob at JavaScript

  10. #20
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,624
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by NitroDev View Post
    Okay i really dont know what to say to that traq because molendjk "teached" on one post the
    HTML Code:
    document.body.innerHTML
    That's fine - the problem isn't that you're using the innerHTML property, it's just that you're getting into a situation where you have to carefully plan what you replace and when.

    Quote Originally Posted by NitroDev View Post
    i have no idea what "pass arguments to your functions" means so im a complete noob at JavaScript
    I would suggest some basic javascript tutorials, then.

    Functions can accept arguments when you call them. For example, with this function:
    Code:
    var hello = function( name ){
        var greeting = "Hello, " + name + "!"
        return greeting;
    }
    name is an argument. I can call the function, and pass whatever value I like as that argument, and the function will use it (internally) with the name name:
    Code:
    var helloWorld = hello( 'World' );
    Now, the function runs, using the value "World" for the name variable, and returns the new greeting to me. Not all functions have arguments, but most do, and it can make them a a lot more useful.

    For now, I would highly recommend that you sit down with some notecards and do some design work:
    • outline each "screen" your program will need.
    • go back through them and decide what information each screen will need to work properly.
    • figure out where that information needs to come from.
    • figure out how you're going to get it.
    We Only Torture the Folks We Don't Like (You're Probably Gonna Be Okay)
    It's a Party in the CIA

Similar Threads

  1. Resolved Ajax loaded element not recognized in ajax post send(element)?
    By crobinson42 in forum JavaScript
    Replies: 6
    Last Post: 04-10-2012, 07:48 PM
  2. <a> element
    By d-machine in forum CSS
    Replies: 1
    Last Post: 10-06-2009, 03:10 PM
  3. Replies: 5
    Last Post: 11-19-2008, 03:02 AM
  4. Replies: 0
    Last Post: 01-13-2008, 04:24 PM
  5. Changing the first TR element to THEAD element
    By codeexploiter in forum JavaScript
    Replies: 3
    Last Post: 03-23-2007, 10:02 AM

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
  •