beginner javascript button

Question

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>

`document.getElementById("yes").click == true` will always fail. `.click` is a function, not a boolean. Look at [the event binding tutorial](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events). — Sebastian Simon, Mar 09 '21 at 01: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. — mac_raptor, Mar 09 '21 at 01: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". — mac_raptor, Mar 09 '21 at 01:49
Inline event handlers like `onclick` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Mar 09 '21 at 01:49
That is very good to know. Maybe some of the resources I have been using are outdated. — mac_raptor, Mar 09 '21 at 01:51
I was able to combine your advice with some other feedback to come up with code that does not use the onclick handeler in the html. Thank you! — mac_raptor, Mar 09 '21 at 17:07

score 1 · Accepted Answer · answered Mar 09 '21 at 01:59

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>

answered Mar 09 '21 at 01:59

Jonathan Hamel

1,393
13
18

1

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. – mac_raptor Mar 09 '21 at 02:09
1

Great. Glad it helped you. I suggest you look into scoped variables using `const` and `let` over `var` next. – Jonathan Hamel Mar 09 '21 at 02:12
I'm going to try to combine this with Sebatian's advice above to not use the onclick handler – mac_raptor Mar 09 '21 at 02:12

score 1 · Answer 2 · answered Mar 09 '21 at 02:00

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!

answered Mar 09 '21 at 02:00

mike_thecode

171
2
6

1

This is a cool solution. I like that you can solve a problem in multiple ways with Javascript. Thank you! – mac_raptor Mar 09 '21 at 02:09
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. – Abdul Aleem Khan Mar 09 '21 at 02:16

Abdul Aleem Khan · Answer 3 · 2021-03-09T02:18:58.057

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>

score 0 · Answer 4 · answered Mar 09 '21 at 02:22

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>

beginner javascript button

4 Answers4