hiding a button in html-CodePudding

I want to hide a button on the click of another button. So i checked some questions on stack overflow . I used display property and assigned it to hidden. And now I want to unhide it on the click of another button.

I want to increment variable "a" on the click of button1. and when the variable a is greater or equal to three i want to unhide 'button' (The button which has id #again) which is hidden. That means after clicking in button1 twice i want to unhide the button. But It is not working. No mater how many times i click in the button1, it is not working.I used display property and made it to hidden in the html file.

Could anybody say what i want to do here in order to unhide the button when clicked on the button1 twice.

let a = 1;
let button = document.querySelector("#again");
let button1 = document.querySelector("#again1");
button1.onclick = () => {
  a  ;
}
if (a >= 3) {
  button.style.display = "block";
}

<button id="again" style="display:none;">click me</button>
<button id="again1">here</button>
<script src="practise.js"></script>

CodePudding user response：

Your if block is calculated just once in the beginning when the browser parses through the js file. Instead, you want to check it every time button1 is clicked. Move it inside the event listener.

let a = 1;
let button = document.querySelector("#again");
let button1 = document.querySelector("#again1");
button1.onclick = () => {
  a  
  if (a >= 3) {
    button.style.display = "block";
  }
}

<button id="again" style="display:none;">click me</button>
<button id="again1">here</button>

CodePudding user response：

spelling onclick
if needs to go inside the function

let a = 1;
let button = document.querySelector("#again");
let button1 = document.querySelector("#again1");
button1.onclick = () => {
  a  ;
  if (a >= 3) {
    button.style.display = "block";
  }
}

<button id="again" style="display:none;">click me</button>
<button id="again1">here</button>
<script src="practise.js"></script>

Alternative using eventListener and hidden

let a = 1;
let button = document.querySelector("#again");
let button1 = document.querySelector("#again1");
button1.addEventListener("click", () => {
  a  ;
  button.hidden = a < 3
})

<button id="again" hidden>click me</button>
<button id="again1">here</button>
<script src="practise.js"></script>

CodePudding user response：

Just put the if condition inside the onClick() function .

let a = 1;
let button = document.querySelector("#again");
let button1 = document.querySelector("#again1");
button1.onclick = () => {
  a  
  if (a > 2) {
    button.style.display = "block";
  }
}

<button id="again" style="display:none;">click me</button>
<button id="again1">here</button>

CodePudding user response：

Try this simple:

var button = document.getElementById("again1")
let button1 = document.querySelector("#again");
count = 0;
button.onclick = function() {
  count  = 1;
  if (count >= 3) {
    button1.style.display = "block";
  }
  button.innerHTML = "Click me: "   count;
};

<button id="again" style="display:none;">click me</button>
<button id="again1">here</button>

CodePudding user response：

Your post appears to contain code that is not properly formatted as code. Please indent all code by 4 spaces using the code toolbar button or the CTRL K keyboard shortcut. For more editing help, click the [?] toolbar icon.

CodePudding user response：

Thanks everyone. I understood my mistake. It was a silly mistake. The spelling of onclick was wrong.

CodePudding user response：

Here in the above responses 'display: hidden' means it will occupy the space in UI where as 'display: none' means it won't occupy the space. Now you can decide which one to use as well