0

Im a beginning in JavaScript, practicing/improving my JavaScript skill by doing simple projects I found online.

This is basically a text location game with four buttons. North, South, East, and West. Im trying to add 5 points each time the player goes to a new location once.

How can I make it so, it doesn't add points once a button has been clicked?

<script type="text/javascript">

var score = 0;

function north(){
    var message = 'You are now in the kitchen';
    alert(message);
    document.getElementById("score").innerHTML = score + 5;
}

function west(){
    var message='You are now the bathroom';
    alert(message);
    document.getElementById("score").innerHTML = score + 10;
}

function east(){
    var message='You are now your bedroom ';
    alert(message);
}

function south(){
    var message='You are now in the living room';
    alert(message);
}


if(document.getElementById('north').clicked == true)
{
    document.getElementById('score') = score + 5;
}

else if(document.getElementById('west').clicked == true){
    document.getElementById('score') = score + 5;
}
</script>

</head>
<body>

<div id='wrap' />

    <header>
        <h1> Exploring New Apartment </h1>
    </header>

    <section>

        <article id='textarea'>
            <textarea  cols='30' rows='5' placeholder='You are currently the living room'></textarea>
            <br />
            <strong> Score: </strong> <p id='score' style="display:inline">0</p>
        </article>

        <article>
            <div>
            <input type='button' value="north" onclick='north()' id='north'/>
            <br />
            <input type='button' value='west' onclick='west()' />
            <input type="button" value='east' onclick='east()'/>
            <br />
            <input type='button' value='south' onclick='south()'/>
        </article>

    </section>

    <footer>
        <p> <a href="mailto:tenkdarko@gmail.com"> Contact Us Via Email </a>
    </footer>


</div>

</body>
</html>
AstroCB
  • 12,337
  • 20
  • 57
  • 73
Iamwhoiam
  • 159
  • 3
  • 12

2 Answers2

0

I think it might be because you did not declare the score variable outside the functions, so they might be stored locally but Im not sure

0

I've started a more in-depth project like this for fun, so I kinda know what's going on here.

First of all, you're calling the score wrong. It's a javascript variable, so instead of calling it like an HTML element, call it as a javascript variable.

Change this:

document.getElementById("score").innerHTML = score + 5;

To this:

score = score + 5;

Much simpler. However, you need to add a function to change #score to change as the score variable changes. Sorry, but my knowledge is too limited to help you with this one.

Now, in order to only add points if a place has not been visited, you need to add a variable that states if a place has been visited, and add an if-statement for the score. Like this (for north):

var score = 0;
var beenNorth = false;

function north(){
    var message = 'You are now in the kitchen';
    alert(message);
    if (beenNorth == false) {    //If you have not been north, do this:
        score = score + 5;
        }
    beenNorth = true;    //Yes, I have been north
}

Obviously, you'd have to add a variable for every room (N, S, E, and W).

But a game like this with only four rooms is kinda boring. I'd recommend using a coordinate-based system, having a variable start out as:

location = [0,0]

And having if-statements to add or subtract to either location[0] or location[1], simulating a coordinate plane.

hiith
  • 76
  • 2