Element help

**NitroDev** · 11-16-2013, 09:20 AM

Okay but i cant find the example anymore

**traq** · 11-16-2013, 03:25 PM

...that's really weird. The links were working yesterday. I fixed them. Here's the correct URL: http://jsfiddle.net/traq/9my2g/4/

**NitroDev** · 11-16-2013, 05:51 PM

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>

**traq** · 11-16-2013, 11:15 PM

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].

**NitroDev** · 11-17-2013, 08:01 AM

No it wont go past the "start menu"

**traq** · 11-17-2013, 08:00 PM

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?

**NitroDev** · 11-18-2013, 05:44 AM

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

**traq** · 11-18-2013, 06:10 AM

Originally Posted by NitroDev

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.

**NitroDev** · 11-18-2013, 02:02 PM

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

**traq** · 11-19-2013, 03:12 AM

Originally Posted by NitroDev

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.

Originally Posted by NitroDev

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.