Problem to execute DOM from if statement in Javascript

Question

So I try to run simple function that generates a winner based on number randomly generated. So far so good but when I want not only return the "winner" but return change innerHTML it does not give say ".innerHTML is not a function".

**I tried return also as a return than the document.innerHTML... Also, I try to make it in var and return the var but the same problem always.

function runNum() {
  // randomize of number between 1-6
  var a = Math.floor(Math.random() * 6 + 1);
  var b = Math.floor(Math.random() * 6 + 1);
  console.log(a, b);
  if (a > b) {
    document.querySelector(".winnerclick").innerHTML("winner1");
    console.log("a");
  }
  if (b > a) {
    return document.querySelector(".winnerclick").innerHTML("winner2");
    console.log("b");
  }
  if (a === b) {
    document.querySelector(".winnerclick").innerTEXT("Draw - no winner");
  }
}

<h1 class="winnerclick">
  Click on the button to play!
</h1>
<button onclick="runNum()">
Click to start
</button>

I try found answers but nothing solved this problem. Why it's not returned?

Have you taken a look at the innerHTML documentation? It's defined as a property, not a function. — esqew
– esqew, Commented May 20, 2020 at 18:10

SMAKSS · Accepted Answer · 2020-05-20 18:13:28Z

1

Actually, the error you are facing is correct since the innerHTML is not a function so you can't invoke it with parentheses either. You just can set its value by assigning the values to it.

So your final code should be something like this:

function runNum() {
  // randomize of number between 1-6
  var a = Math.floor(Math.random() * 6 + 1);
  var b = Math.floor(Math.random() * 6 + 1);
  console.log(a, b);
  if (a > b) {
    document.querySelector(".winnerclick").innerHTML = "winner1";
    console.log("a");
  }
  if (b > a) {
    return document.querySelector(".winnerclick").innerHTML = "winner2";
    console.log("b");
  }
  if (a === b) {
    document.querySelector(".winnerclick").innerTEXT = "Draw - no winner";
  }
}

<h1 class="winnerclick">
  Click on the button to play!
</h1>
<button onclick="runNum()">
Click to start
</button>

answered May 20, 2020 at 18:13

SMAKSS

10.6k3 gold badges26 silver badges38 bronze badges

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

1 Comment

alexg Over a year ago

OMG how do i missed it? i spend at least 2 hours to figure what going on it's all looks great but = instead of (). Thank you so much guys!

Alex Basinski · Accepted Answer · 2020-05-20 18:11:38Z

1

Pointy is correct, but I feel like their answer may need to be a little clarified. When you want to change the value of .innerHTML, you don't use .innerHTML("new value"); you use .innerHTML = "new value";

answered May 20, 2020 at 18:11

Alex Basinski

111 bronze badge

1 Comment

alexg Over a year ago

Thank you so much i don't get how i missed it after two hours. Just the syntax and it's after i saw documentations and other questions. Thank you!

Collectives™ on Stack Overflow

Problem to execute DOM from if statement in Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related