CODEWITHSUNDEEP
javascripthtml
JakeW
JakeW

Reputation: 103

If Statement check previous Function HTML and Javascript

I have a question, that I am sure it is an easy solution, but I don't know how to do it. So I have the code below, and I was wondering how I can get the "if" statement to check and see if what the player rolled is high enough to fight the troll.

<p id="pizza"></p>
<button onClick="yumpizza();"style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>

<script>
    function yumpizza() {
         document.getElementById("pizza").innerHTML = ("Strength:" + Math.floor(Math.random() * 20 + 1))
    }
</script>

<h3> A troll appears in front of you. What do you do? </h3>
<button onClick="troll">Fight him!</button>

<script id="troll">
     if(document.getElementById("pizza").innerHTML>= 19) {
          "Oh no! You have died."
     } else {
          "Nice, you showed him!"
     }
</script>

Upvotes: 0

Views: 57

Answers (3)

Steven Anderson
Steven Anderson

Reputation: 8498

Your button onclick should call a function. It should not refer to an id of an element. The function also needs to parse the value as an integer as you are comparing against an integer value (19). I have also added the responses to alerts so that the response is displayed on screen.

function fight(){
  if(parseInt(document.getElementById("pizza").innerHTML.substr(9)) >= 19) {
    alert("Oh no! You have died.");
  } else {
    alert("Nice, you showed him!");
  }
}

And your button:

<button onclick="fight();">Fight him!</button>

Upvotes: 1

Mike Horstmann
Mike Horstmann

Reputation: 588

    <p id="pizza"></p>
<button onClick="yumpizza();"style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>
<script>
    function yumpizza() {
      strength = ("Strength:" + Math.floor(Math.random() * 20 + 1));
      document.getElementById("pizza").innerHTML = strength;
      trollStrength = ("Strength:" + Math.floor(Math.random() * 20 + 1));
      if(strength < trollStrength ) {
        btnID = document.getElementById("btnText");
        btnID.innerHTML = "You died";
        console.log("Oh no! You have died!");
      } else {
        btnID.innerHTML = "Fight?";
        console.log("Fight the green beastie!");
      };
      btnID = btnID;
    };
  function troll(){
    console.log("troll strength: " + trollStrength);
    console.log("your strength: " + strength);
    if((btnID).innerHTML != "You died"){
      //insert some actions to take away life from troll
    prompt("Here's where your actions can happen as you fight to the death!");
    } else {
      //insert a "you missed" action and take away your own life      
    prompt("Alternatively, you could detail a gruesome death within!");
    };
  };
</script>
<h3> A troll appears in front of you. What do you do? </h3>
<button id="btnText" onClick="troll();">Fight him!</button>

Upvotes: 0

drneel
drneel

Reputation: 2907

So using what you have, all you need to do is add a variable to store the strength value.

You also had an error with your second button configuration. You had the onClick set to the id of the script tag; you should have had it set to a function that performed the action. You also didn't have any way of communicating the messages from the if/else, so I added an alert for that.

<p id="pizza"></p>
<button onClick="yumpizza();"style="position:absolute; TOP:120px; LEFT:350px">Roll for strength</button>

<h3> A troll appears in front of you. What do you do? </h3>
<button onClick="fight();">Fight him!</button>

<script>
    var strength = undefined;
    function yumpizza() {
         strength = Math.floor(Math.random() * 20 + 1);
         document.getElementById("pizza").innerHTML = ("Strength:" + strength)
    }

    function fight() {
     if(strength >= 19) {
          alert("Oh no! You have died.");
     } else {
          alert("Nice, you showed him!");
     }
    }
</script>

Here is a fiddle

Upvotes: 0

Related Questions