Revise a button using JavaScript

Question

Revise a button using JavaScript

Hey there, I could really use some assistance. Currently, I am learning Javascript as a part of a project I am working on and I seem to have run into a bit of an issue with updating the display status of a button on my webpage.

I am trying to set up a condition where a button appears or disappears based on whether a certain condition is met.

I have two buttons that should each be clicked a specific number of times (let's say 12 and 13). I have managed to create a condition where if button1 == 12 && button2 == 13, then change the button status to block instead of hidden. However, once this condition is met, if I click either button again, the button that should appear after the condition stays visible even though the condition is no longer true.

//var clickNeeded = 12;
var clicks = 0;
var clicks1 = 0;


function countDown() {
    clicks += 1;
    document.getElementById("test").innerHTML = clicks;
    if (clicks == 12 && clicks1 == 13){
        document.getElementById("step1").style.display = 'block';
    }
};
function countDown1() {
    clicks1 += 1;
    document.getElementById("test1").innerHTML = clicks1;
    if (clicks == 12 && clicks1 == 13){
        document.getElementById("step1").style.display = 'block';
    }
};

if (clicks != 12 && clicks1 != 13){
    document.getElementById("step1").style.display = 'hidden';
}



function messageAfficher() {
    document.getElementById("enigme").style.display = 'block';
}

body{
    background-color: black; 
    
}

@font-face{
    font-family: 'hacked';
    src: url(font/Hacked-KerX.ttf);
    font-style: normal;
}

.header{
    text-align: center;
    margin: 50px 100px;
    font-family: hacked;
}

.header h1{
    color: purple;
    font-size: 80px;
    margin: 50px    
}

.header p{
    color: purple;
    font-size: 20px;
    text-align: justify;
    padding-right: 100px;
    padding-left: 100px; 
}

.enigme {
    color: aliceblue;
    text-align: center;
    font-family: hacked;
}

.step {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}

<!DOCTYPE html>
<html>  
    <head>
        <meta charset="utf-8">
        <script src="fonction.js"></script> 
        <title>Escape Game</title>
        <link rel="stylesheet" href="main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
<!--===========================================================================================================================-->
    <body>
        
        <div class="header">
            <h1>Welcome to this adventure!</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt...
            </p>
        </div>
        
        <div class="step">
            <button id="test" onclick="countDown()">0</button>
        </div>
        <div class="step">
            <button id="test1" onclick="countDown1()">0</button>
        </div>
        <div class="step">
            <button id="step1" onclick="messageAfficher()" style="display:none">Where am I?</button>
        </div>
        <div class="enigme">
            <p id="enigme" style="display:none">Coordinates</p>
        </div>
        
    </body>
<!--===========================================================================================================================--> 
</html>

I've tried adding an If condition after my function, but it doesn't seem to work, which makes sense, given that it's not quite logical. So, I'm a bit stuck here ^^'
Thanks in advance! :D

javascript html css

Answer 1

Answer №1

Make sure to set the display property to none instead of using hidden.

If you are using hidden, it should be combined with visibility.

Additionally, remember to include an else condition to hide the step1 element properly. Currently, it is placed outside and may not work as expected when clicking the buttons.


function countDown() {
    clicks += 1;
    document.getElementById("test").innerHTML = clicks;
    if (clicks === 12 && clicks1 === 13){
        document.getElementById("step1").style.display = 'block';
    } else {
        document.getElementById("step1").style.display = 'none';
    }
}

function countDown1() {
    clicks1 += 1;
    document.getElementById("test1").innerHTML = clicks1;
    if (clicks === 12 && clicks1 === 13){
        document.getElementById("step1").style.display = 'block';
    } else {
        document.getElementById("step1").style.display = 'none';
    }
}

Consider abstracting the repeated code into a separate function for reusability. Use strict comparison === instead of loose comparison ==.


function countDown() {
    clicks += 1;
    document.getElementById("test").innerHTML = clicks;
    hiddenOrVisible(clicks, clicks1);
}

function countDown1() {
    clicks1 += 1;
    document.getElementById("test1").innerHTML = clicks1;
    hiddenOrVisible(clicks, clicks1);
}

function hiddenOrVisible(clicks, clicks1) {
    if (clicks === 12 && clicks1 === 13) {
        document.getElementById("step1").style.display = 'block';
    } else {
        document.getElementById("step1").style.display = 'none';
    }
}

Answer 2

Make sure to set the display property to none instead of using hidden.

If you are using hidden, it should be combined with visibility.

Additionally, remember to include an else condition to hide the step1 element properly. Currently, it is placed outside and may not work as expected when clicking the buttons.


function countDown() {
    clicks += 1;
    document.getElementById("test").innerHTML = clicks;
    if (clicks === 12 && clicks1 === 13){
        document.getElementById("step1").style.display = 'block';
    } else {
        document.getElementById("step1").style.display = 'none';
    }
}

function countDown1() {
    clicks1 += 1;
    document.getElementById("test1").innerHTML = clicks1;
    if (clicks === 12 && clicks1 === 13){
        document.getElementById("step1").style.display = 'block';
    } else {
        document.getElementById("step1").style.display = 'none';
    }
}

Consider abstracting the repeated code into a separate function for reusability. Use strict comparison === instead of loose comparison ==.


function countDown() {
    clicks += 1;
    document.getElementById("test").innerHTML = clicks;
    hiddenOrVisible(clicks, clicks1);
}

function countDown1() {
    clicks1 += 1;
    document.getElementById("test1").innerHTML = clicks1;
    hiddenOrVisible(clicks, clicks1);
}

function hiddenOrVisible(clicks, clicks1) {
    if (clicks === 12 && clicks1 === 13) {
        document.getElementById("step1").style.display = 'block';
    } else {
        document.getElementById("step1").style.display = 'none';
    }
}

Answer 3

Answer №2

To simplify your code, you can move the logic for hiding the button into the click handling function.

//var clickNeeded = 12;
let clicksOne = 0;
let clicksTwo = 0;


function countDown(id) {
    const buttonClicks = id === 'test1' ? ++clicksOne : ++clicksTwo;
    document.getElementById(id).innerHTML = buttonClicks;
    if (clicksOne == 12 && clicksTwo == 13){
        document.getElementById("step1").style.display = 'block';
    } else {
      document.getElementById("step1").style.display = 'none';
    }
};

function messageAfficher() {
    document.getElementById("enigme").style.display = 'block';
}

body{
    background-color: black; 
    
}

@font-face{
    font-family: 'hacked';
    src: url(font/Hacked-KerX.ttf);
    font-style: normal;
}

.header{
    text-align: center;
    margin: 50px 100px;
    font-family: hacked;
}

.header h1{
    color: purple;
    font-size: 80px;
    margin: 50px    
}

.header p{
    color: purple;
    font-size: 20px;
    text-align: justify;
    padding-right: 100px;
    padding-left: 100px; 
}

.enigme {
	color: aliceblue;
	text-align: center;
	font-family: hacked;
}

.step {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
}

<!DOCTYPE html>
<html>  
    <head>
        <meta charset="utf-8">
        <script src="fonction.js"></script> 
        <title>Escape Game</title>
        <link rel="stylesheet" href="main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
<!--===========================================================================================================================-->
    <body>
        
        <div class="header">
            <h1>Welcome to this adventure!</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        
        <div class="step">
            <button id="test1" onclick="countDown(this.id)">0</button>
        </div>
        <div class="step">
            <button id="test2" onclick="countDown(this.id)">0</button>
        </div>
        <div class="step">
            <button id="step1" onclick="messageAfficher()" style="display:none">Where am I?</button>
        </div>
        <div class="enigme">
            <p id="enigme" style="display:none">Coordinates</p>
        </div>
        
    </body>
<!--===========================================================================================================================--> 
</html>

Answer 4

To simplify your code, you can move the logic for hiding the button into the click handling function.

//var clickNeeded = 12;
let clicksOne = 0;
let clicksTwo = 0;


function countDown(id) {
    const buttonClicks = id === 'test1' ? ++clicksOne : ++clicksTwo;
    document.getElementById(id).innerHTML = buttonClicks;
    if (clicksOne == 12 && clicksTwo == 13){
        document.getElementById("step1").style.display = 'block';
    } else {
      document.getElementById("step1").style.display = 'none';
    }
};

function messageAfficher() {
    document.getElementById("enigme").style.display = 'block';
}

body{
    background-color: black; 
    
}

@font-face{
    font-family: 'hacked';
    src: url(font/Hacked-KerX.ttf);
    font-style: normal;
}

.header{
    text-align: center;
    margin: 50px 100px;
    font-family: hacked;
}

.header h1{
    color: purple;
    font-size: 80px;
    margin: 50px    
}

.header p{
    color: purple;
    font-size: 20px;
    text-align: justify;
    padding-right: 100px;
    padding-left: 100px; 
}

.enigme {
	color: aliceblue;
	text-align: center;
	font-family: hacked;
}

.step {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 50px;
}

<!DOCTYPE html>
<html>  
    <head>
        <meta charset="utf-8">
        <script src="fonction.js"></script> 
        <title>Escape Game</title>
        <link rel="stylesheet" href="main.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
<!--===========================================================================================================================-->
    <body>
        
        <div class="header">
            <h1>Welcome to this adventure!</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </div>
        
        <div class="step">
            <button id="test1" onclick="countDown(this.id)">0</button>
        </div>
        <div class="step">
            <button id="test2" onclick="countDown(this.id)">0</button>
        </div>
        <div class="step">
            <button id="step1" onclick="messageAfficher()" style="display:none">Where am I?</button>
        </div>
        <div class="enigme">
            <p id="enigme" style="display:none">Coordinates</p>
        </div>
        
    </body>
<!--===========================================================================================================================--> 
</html>

Answer 5

Answer №3

Here are a couple of important things to note:

Remember to verify the count condition each time you click on a button.
The value hidden is not valid for the display property; make sure to use none instead.

I recommend avoiding repetitive code in multiple locations. These are the necessary changes that should be made:

//var clickNeeded = 12;
var clicks = 0;
var clicks1 = 0;

function checkCondition(){
   if (clicks != 12 && clicks1 != 13){
     document.getElementById("step1").style.display = 'none';
   }
   else if (clicks == 12 && clicks1 == 13){
     document.getElementById("step1").style.display = 'block';
   }
}

function countDown() {
    clicks += 1;
    document.getElementById("test").innerHTML = clicks;
    checkCondition();
}

function countDown1() {
    clicks1 += 1;
    document.getElementById("test1").innerHTML = clicks1;
    checkCondition();
};

function messageAfficher() {
    document.getElementById("enigme").style.display = 'block';
}

Answer 6

Here are a couple of important things to note:

Remember to verify the count condition each time you click on a button.
The value hidden is not valid for the display property; make sure to use none instead.

I recommend avoiding repetitive code in multiple locations. These are the necessary changes that should be made:

//var clickNeeded = 12;
var clicks = 0;
var clicks1 = 0;

function checkCondition(){
   if (clicks != 12 && clicks1 != 13){
     document.getElementById("step1").style.display = 'none';
   }
   else if (clicks == 12 && clicks1 == 13){
     document.getElementById("step1").style.display = 'block';
   }
}

function countDown() {
    clicks += 1;
    document.getElementById("test").innerHTML = clicks;
    checkCondition();
}

function countDown1() {
    clicks1 += 1;
    document.getElementById("test1").innerHTML = clicks1;
    checkCondition();
};

function messageAfficher() {
    document.getElementById("enigme").style.display = 'block';
}

Answer 7

Answer №4

Streamlined your code and adjusted the click count to 5, while ensuring it still functions as intended: Users can click on both buttons up to a specified amount of times before revealing a hidden button with an additional click.

const btns=[...document.querySelectorAll('[id^=test]')];
function showElement(id){document.querySelector('#'+id).style.display='block'}
var maxClicks=5;
document.querySelector('.buttons').addEventListener('click',function(ev){
  var b=ev.target;
  if (b.id)
    if (b.id.substr(0,4)=='test') {
      if (b.textContent<maxClicks) b.textContent=+b.textContent+1
      else if(btns.reduce((s,v)=>+v.textContent+s,0)==2*maxClicks)
        showElement('step1')
    } else if (b.id=="step1") showElement('enigme')
})

#step1, #enigme {display:none}

<div class="header">
  <h1>Welcome to this adventure!</h1>
  <p>Some brief irrelevant text.</p>
</div>
<div class="buttons">
<div class="step"><button id="test">0</button></div>
<div class="step"><button id="test1">0</button></div>
<div class="step"><button id="step1">Where am I?</button></div>
<div class="enigme">
  <p id="enigme">Coordinates</p>
</div>
</div>

Answer 8

Streamlined your code and adjusted the click count to 5, while ensuring it still functions as intended: Users can click on both buttons up to a specified amount of times before revealing a hidden button with an additional click.

const btns=[...document.querySelectorAll('[id^=test]')];
function showElement(id){document.querySelector('#'+id).style.display='block'}
var maxClicks=5;
document.querySelector('.buttons').addEventListener('click',function(ev){
  var b=ev.target;
  if (b.id)
    if (b.id.substr(0,4)=='test') {
      if (b.textContent<maxClicks) b.textContent=+b.textContent+1
      else if(btns.reduce((s,v)=>+v.textContent+s,0)==2*maxClicks)
        showElement('step1')
    } else if (b.id=="step1") showElement('enigme')
})

#step1, #enigme {display:none}

<div class="header">
  <h1>Welcome to this adventure!</h1>
  <p>Some brief irrelevant text.</p>
</div>
<div class="buttons">
<div class="step"><button id="test">0</button></div>
<div class="step"><button id="test1">0</button></div>
<div class="step"><button id="step1">Where am I?</button></div>
<div class="enigme">
  <p id="enigme">Coordinates</p>
</div>
</div>

Revise a button using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

encountering a problem while trying to run `npm install react-native-modal-datetime-picker` in the terminal

Having trouble bringing a 3D object into ThreeJS?

Learn how to incorporate a HTML page into a DIV by selecting an Li element within a menu using the command 'include('menu.html')'

Unable to set maximum width for images in Firefox browser

Creating a many-to-many relationship in Sequelize using a join table to insert data

How can AJAX be utilized with both file and text inputs?

Tips for adjusting the border color of a MUI Select field

Guide to Monitoring Object Property in a Vue Extension

Decide whether Variable Name is equal to the String

Jest's expect.any(Object) function is not able to match CancelToken

nw.js sending a multipart/form-data request

Sending arguments enclosed in double quotation marks

Save JavaScript console output to a log file using Firefox

The document.write function causes the page to break

Exploring deep nested writes within Prisma

Extracting all href links from the webpage source code utilizing Selenium WebDriver in Java

search for the compose function in the material table within a react component

The interaction between a JavaScript function call and C# is not functioning properly

"All my online spaces are chaotic and cluttered beyond belief, overflowing with content in high-definition

What's causing margin-top to be reversed while margin-bottom remains stationary?