How to change a javascript boolean from a html button?

Question

I have a button onClick in the HTML side. I'm using a javascript function to do some actions. I need to change the value of a boolean using the HTML button. I have been looking at the forum but so far I didn't find something. Somebody can guide me here?

Thanks.

code:

JS

var buttonClicked = false;

  window.addEventListener('load',function(){
  console.log(buttonClicked);
  document.getElementById('BtnGotit').addEventListener('onclick',function(){
    buttonClicked = true;
    console.log(buttonClicked);
  });
  });


 function desktopMove(e){

if(buttonClicked == true){
            var wH = $(window).height();
            var wW = $(window).width();
            var x = e.clientX;
            var y = e.clientY;
            if(x <= 20){
                //Left
                $pageTrigger = $('.pt-page-current').find('.right');
                    if($pageTrigger.length)
                        Animate($pageTrigger);
            }else if(x >= (wW - 50)){
                //Right
                $pageTrigger = $('.pt-page-current').find('.left');
                    if($pageTrigger.length)
                        Animate($pageTrigger);
            }else if(y <= 50){
                //Top
                $pageTrigger = $('.pt-page-current').find('.back');
                    if($pageTrigger.length)
                        Animate($pageTrigger);
            }else if(y >= (wH - 50)){
                //Bottom
                $pageTrigger = $('.pt-page-current').find('.next');
                    if($pageTrigger.length)
                        Animate($pageTrigger);
            }

        }
        }

HTML

> <button2 onclick="function()" class = "BtnGotit" >Ok, GOT IT.</button2><br>

They're going to down-vote you if you don't add some code fast. And they won't be back to up-vote when you fix. Please write your html code and your javascript code in your post. (You write it where your question goes, but you just indent a few times, so that it will format it as code). — Maiya
– Maiya, Commented Sep 27, 2019 at 0:09

www139 · Accepted Answer · 2019-09-27 00:08:05Z

1

It's always a good idea to include your source code in the question because it helps us answer. You can add a code snippet with a demo of your code.

When the page loads, the button will be monitored for clicks. When clicked, the buttonClicked variable is set to true. buttonClicked value is initially false.

var buttonClicked = false;

window.addEventListener('load',function(){
  console.log(buttonClicked);
  document.getElementById('randoButton').addEventListener('click',function(){
    buttonClicked = true;
    console.log(buttonClicked);
  });
});

<input type="button" id="randoButton" value="Set the variable value">

answered Sep 27, 2019 at 0:08

www139

5,2373 gold badges39 silver badges65 bronze badges

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

4 Comments

full rusian Over a year ago

Forgot the code. I edit the post above, I'm getting a error in the java code, in this line: document.getElementById('randoButton').addEventListener('click',function(){ Uncaught TypeError: Cannot read property 'addEventListener' of

www139 Over a year ago

@fullrusian is it properly nested in an onload event? If it runs prematurely, it won't work.

full rusian Over a year ago

i not nested in an onload event, how can i make it work? Thanks.

www139 Over a year ago

Change the "class" attribute on the button to "id". It should work. Also, remove the "onclick" attribute on the button. Since there is an event listener, you no longer need it.

Shaya Ulman · Accepted Answer · 2019-09-27 00:11:14Z

1

Here is a simple example how to approach it:

let bool = true

const changeValue = () => {
    bool = !bool
    console.log(bool)
}

<button onclick="changeValue()">Click Me!</button>

answered Sep 27, 2019 at 0:11

Shaya Ulman

1,7111 gold badge18 silver badges31 bronze badges

Comments

NVRM · Accepted Answer · 2019-09-27 03:40:53Z

0

On the simplest manner, this is a good start to toggle with one button.

<input id="Z" value="0" type="range" max="1">
<button onclick="(Z.value<1)?Z.value++:Z.value--">Switch</button>

Note that it is inline javascript, this isn't the best to do for complex programs, see instead the usage of EventListeners!

edited Sep 27, 2019 at 3:40

answered Sep 27, 2019 at 0:12

NVRM

13.5k2 gold badges102 silver badges102 bronze badges

Collectives™ on Stack Overflow

How to change a javascript boolean from a html button?

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related