Code :
button = document.getElementById("btn")
label = document.getElementById("lbl")
button.addEventListener('dblclick', function(){
label.style.display = 'none';
})<button id="btn">Button</button>
<label id="lbl">lbl</label>Solution 1 :
Solution 2 :
You can use the onclick event of the button. Add JQuery and use the below code.
var cnt = 0;
$('#btn').on('click', function() {
cnt++;
if(cnt == 2)
$('#lbl').hide();
})
OR, in vanilla js you can use
var cnt = 0;
document.getElementById('btn').onclick = function() {
cnt++;
if(cnt == 2)
document.getElementById('lbl').style.display = 'none';
};
Solution 3 :
SOLUTION
Use Inbuilt JS event
There is event in JS ondblclick event which fires only on double clicked
check the snippet below
function hide() {
document.querySelector("label").style.display= "none";
}<button ondblclick="hide()" id="btn">Button</button>
<label id="lbl">Hide me after Double clicking on button</label>Solution 4 :
The code you provided not hide or dissappear
There is a chance of your’e code is being overwrited by other css.
Solution 5 :
It’s divided to 3 steps:
- Set the counter to count the clicks.
- Add the click listener on button and increment the counter by 1 on click.
- If the counter reaches 2, modify the CSS of label with
display: noneto make it disappear
Here’s the pure Javascript solution:
var lbl = document.getElementById('lbl');
var btn = document.getElementById('btn');
var clicks = 0;
btn.addEventListener('click', (e) => {
clicks++;
if (clicks === 2) lbl.style.display = 'none';
});<button id="btn">Button</button>
<label id="lbl">lbl</label>Solution 6 :
Try this.
let count = 0
const btn = document.getElementById("btn");
btn.onclick = function () {
count++;
if(count === 2){
document.querySelector("label").style.display= "none";
}
}<button id="btn">Button</button>
<label id="lbl">lbl</label>Solution 7 :
Keep a count of the number of times the button has been clicked and when it reaches 2 make the lbl display none.
This snippet adds an event listener to the label to achieve this.
let count = 0;
const btn = document.querySelector('#btn');
const lbl = document.querySelector('#lbl');
btn.addEventListener('click', function() {
count++;
if (count == 2) {
lbl.style.display = 'none';
}
});<button id="btn">Button</button>
<label id="lbl">lbl</label>Problem :
i have a button and label like this:
<button id="btn">Button</button>
<label id="lbl">lbl</label>When i click this button second time that label want to hide/dissappear
Comments
Comment posted by Sarvesh
no , if i click a button 2 times the label my to hide
Comment posted by Sachin Ananthakumar
I have added the solution, when you want an event to fire on double click, use
Comment posted by A Haworth
Hi, did you want it to disappear on a double click or on a second click (they aren’t the same thing).
Comment posted by A Haworth
Hi, I don’t understand why they need to start to learn jquery to do this simple thing.
Comment posted by Subhashis Pandey
@AHaworth added vanilla javascript code as well.