Question 258953 in Html Question posted in
Some basic documentation can be found here.

Html – Trying to make a hint button that once you have used twice it sets display to none

I’m making a hint button that once used twice it will set its display to none but finding it very hard to figure out a way on how to do so. I tried using var that once the var has hit 2 it will set display none but it has only set the var to 1 and then 1 not 1 then 2 I used

function clicked()
{
  var y = 0;
  let text;
  let hint = "are you sure you want to use a hint?";
 if (confirm(hint) == true) {
   document.getElementById("select").style.display = "block";
   document.getElementById("buttonenter").style.display = "block";
   y++;
   document.getElementById("counter").innerHTML = y;
  if (y = 2) {
document.getElementById("hint").style.display = "none";
}
   
 }

but that didn’t work
I tried setting up a counter but every info I found about it I didn’t understand how to tweak it to work for this.

function clicked()
{
  var y = 0;
  let text;
  let hint = "are you sure you want to use a hint?";
 if (confirm(hint) == true) {
   document.getElementById("select").style.display = "block";
   document.getElementById("buttonenter").style.display = "block";
   document.getElementById("counter").innerHTML = y +1;
   if (y = 1) {
     document.getElementById("hint").onclick = function Why()
   }
   
 }


function enter() {
  var x = document.getElementById("select").value;
  document.getElementById("demo").innerHTML = x;
  if (x == "4") {
  document.getElementById("demo").innerHTML = "c______l ____s";
       document.getElementById("select").style.display = "none";
   document.getElementById("buttonenter").style.display = "none";
  }
  else if (x == "6") {
  document.getElementById("demo").innerHTML = "pho__";
    document.getElementById("select").style.display = "none";
   document.getElementById("buttonenter").style.display = "none";
  }
  else if (x == "7") {
  document.getElementById("demo").innerHTML = "bottle, eyes";
    document.getElementById("select").style.display = "none";
   document.getElementById("buttonenter").style.display = "none";
  }
  else {
    document.getElementById("demo").innerHTML = "Thats not a level";
    document.getElementById("select").style.display = "none";
   document.getElementById("buttonenter").style.display = "none";
  }
}
.hide {
  display: none;
}

.buttonenter {
  display: none;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="script.js"></script>
</head>

    <hint><button id="hint" onclick="clicked()">Click me for a hint</button></hint>
    <input class="hide"id="select"type="text">
    <text id="demo"></text>
    <button class="buttonenter" id="buttonenter" onclick="enter()">Submit</button>
  </body>


</html>

for some reason snippet doesn’t work

Tags:

2

Answers


  1. 0

    You can store the counter variable outside of your function. Here is an example of a button that dissapers on the second click.

    var counter = 0
function buttonClicked() {
  counter++
  if(counter > 1)
  {
    document.getElementById("button").style.display = "none"
  }
}
    <button id="button" onClick="buttonClicked()">Click me</button>

    As an alternative, you can store the counter in an element. Here an example where the counter is visible. But you can also set the visibility of it to hidden.

    function buttonClicked() {
  var counterElement = document.getElementById("counter")
  var counterValue = Number(counterElement.innerHTML)
  
  counterValue++
  counterElement.innerHTML = counterValue
  if(counterValue > 1)
  {
    document.getElementById("button").style.display = "none"
  }
}
    <div>Given hints: <span id="counter">0</span></div>
<button id="button" onClick="buttonClicked()">Click me</button>
    Login or Signup to reply.
  2. 0

    Here is a possible solution.

    var y = 0;

function clicked() {
  if (y >= 2) {
    alert("You've already used the button twice, you can't use it again.");
  } else {
    document.getElementById("select").value = '';
    document.getElementById("demo").innerHTML = '';
    let text;
    let hint = "are you sure you want to use a hint?";
    
    if (confirm(hint) == true) {
      document.getElementById("select").style.display = "block";
      document.getElementById("buttonenter").style.display = "block";
      y += 1;
      document.getElementById("counter").innerHTML = y;
    }
  }
}

function enter() {
  var x = document.getElementById("select").value;
  document.getElementById("demo").innerHTML = x;
  
  if (x == "4") {
    document.getElementById("demo").innerHTML = "c______l ____s";
    document.getElementById("select").style.display = "none";
    document.getElementById("buttonenter").style.display = "none";
  } else if (x == "6") {
    document.getElementById("demo").innerHTML = "pho__";
    document.getElementById("select").style.display = "none";
    document.getElementById("buttonenter").style.display = "none";
  } else if (x == "7") {
    document.getElementById("demo").innerHTML = "bottle, eyes";
    document.getElementById("select").style.display = "none";
    document.getElementById("buttonenter").style.display = "none";
  } else {
    document.getElementById("demo").innerHTML = "Thats not a level";
    document.getElementById("select").style.display = "none";
    document.getElementById("buttonenter").style.display = "none";
  }
}
    <hint><button id="hint" onclick="clicked()">Click me for a hint</button></hint>
<input class="hide" id="select" type="text">
<text id="demo"></text>
<button class="buttonenter" id="buttonenter" onclick="enter()">Submit</button>
<p id="counter"></p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search