0

I'm really struggling with a basic javascript problem and I can't find the right way to Google help. I've been practicing Javascript, but thus far I've mainly been just following prompts, not coding my own ideas. I genuinely tried to solve this problem on my own for several hours. This is my very first attempt at generating my own javaScript from scratch.

Basically, I'm just trying to do something like a choose your own adventure story. The idea is the p element in the html changes with yes and no responses. For some reason, my javascript code skips over my if and goes to my else, meaning that the first condition was not met. For the life of me, I cannot figure out how to meet that first if condition when the user clicks "yes". Any advice?

function beginWalk() {
  var start = "You go outside. It's a beautiful day!";
  var stay = "You stay inside and snuggle up in your bed.";

  {
    if (document.getElementById("yes").click == true) {
      document.getElementById("change").innerHTML = start;
    } else {
      document.getElementById("change").innerHTML = stay;
    }
  }
}
<button onclick="beginWalk()" value="true" id="yes">Yes</button>
<button onclick="beginWalk()" value="false" id="no">No</button>
<p id="change">
  change
</p>

Improve this question
6
  • document.getElementById("yes").click == true will always fail. .click is a function, not a boolean. Look at the event binding tutorial. Commented Mar 9, 2021 at 1:42
  • Thank you for explaining the problem. I actually really wanted to know why it wasn't working rather than to just be told a solution. It's the only way to get better. I will look at the resource you provided here. Commented Mar 9, 2021 at 1:48
  • The thing is I tried it before without .click and it didn't work, which didn't make sense to me because I set the value of "yes" to "true". Commented Mar 9, 2021 at 1:49
  • Inline event handlers like onclick are not recommended. They are an obsolete, hard-to-maintain and unintuitive way of registering events. Always use addEventListener instead. Commented Mar 9, 2021 at 1:49
  • That is very good to know. Maybe some of the resources I have been using are outdated. Commented Mar 9, 2021 at 1:51

4 Answers 4

Reset to default
1

Easy solution would be to pass the arguments you need in your button click event and base your conditions on it.

function beginWalk(walk) {
  const start = "You go outside. It's a beautiful day!";
  const stay = "You stay inside and snuggle up in your bed.";

  if (walk === true) {
    document.getElementById("change").innerText = start;
  } else {
    document.getElementById("change").innerText = stay;
  }
}
<button onclick="beginWalk(true)" value="true" id="yes">Yes</button>
<button onclick="beginWalk(false)" value="false" id="no">No</button>
<p id="change">
  change
</p>

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

What you did here is exactly what I was trying and failing to do. I think my mistakes were that I didn't understand the right way to pass the argument and that I positioned some of my brakets in the wrong way. As for the .click, I was just getting lost and googling things that I thought might work because I thought maybe there was something I needed that I didn't already know. I appriciate this. I'm going to really look at this code and try to learn from it.
Great. Glad it helped you. I suggest you look into scoped variables using const and let over var next.
I'm going to try to combine this with Sebatian's advice above to not use the onclick handler
1

It Doesn't use the if Statement but It works this way!

function beginWalk() {
   var start = "You go outside. It's a beautiful day!";
   var stay = "You stay inside and snuggle up in your bed.";

    document.getElementById("yes").addEventListener("click", () => {

    document.getElementById("change").innerHTML = start}); 

    document.getElementById("no").addEventListener("click", () => {    

    document.getElementById("change").innerHTML = stay});
    }

Cheers!

Improve this answer

2 Comments

This is a cool solution. I like that you can solve a problem in multiple ways with Javascript. Thank you!
A good practice is to register the click events before hand. You are registering the events inside the function which is executed on the click.
1

Your current code has logical error. Your if condition will always return false and the code in else will be executed because the following line does not make sense.

if (document.getElementById("yes").click == true)

However you can make a few adjustments like given below. Here I am passing default value of status as false which means if nothing will be passed in the function, then status will be considered false. And if true will be passed to the function then the if condition will be executed. It makes code more cleaner.

function beginWalk(status=false) {
  var text = "You stay inside and snuggle up in your bed.";
  if(status===true){
     text = "You go outside. It's a beautiful day!";
  }
  document.getElementById("change").innerText = text;
}

And your html can be something like given below

<button onclick="beginWalk(true)" value="true" id="yes">Yes</button>
<button onclick="beginWalk()" value="false" id="no">No</button>
<p id="change">
  change
</p>
Improve this answer

Comments

0 

function beginWalk() {
  var start = "You go outside. It's a beautiful day!";
  var stay = "You stay inside and snuggle up in your bed.";

  {
    if (event.target.value === 'true') {
      document.getElementById("change").innerHTML = start;
    } else {
      document.getElementById("change").innerHTML = stay;
    }
  }
}
<button onclick="beginWalk()" value="true" id="yes">Yes</button>
<button onclick="beginWalk()" value="false" id="no">No</button>
<p id="change">
  change
</p>

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.