I have 3 buttons 'click me', 'disable', 'enable'. Basically when I click on 'click me' it triggers an alert but when I click on 'disable' it should disable the 'click me' button and change the button background colour and similarly, when i click 'enable it should enable 'click me' and change the background colour to original. It should be without using 'disabled' attribute
This GIF will give clear idea of what I want basically : https://gfycat.com/ickygloriousadouri
I tried using pointercancel but it didn't help.
function disableButton() {
var a = document.getElementById('clickme');
a.addEventListener("pointercancel", function() {})
}
function enableButton() {
var b = document.getElementById('clickme');
b.addEventListener("pointerover", function() {
b.style.backgroundColor = '#E2343F';
})
}
<div class="container">
<button id="clickme">Click Me</button>
<div class="">
<button onclick="disableButton()" class="disable">Disable Button</button>
<button onclick="enableButton()" class="enable">Enable Button</button>
</div>
</div>
And moreover if I can toggle the ID to change the css values.
It will be very helpful if someone can help me overcome this issue.
this should work:
.no-click {
pointer-events: none;
}
Just add this class to your UI:
<button class="no-click">
EDIT: If you want to toggle it instead of just disable it:
function disableButton() {
var a = document.getElementById('clickme');
a.css('pointer-events', 'none');
}
function enableButton() {
var b = document.getElementById('clickme');
a.css('pointer-events', '');
b.addEventListener("pointerover", function() {
b.style.backgroundColor = '#E2343F';
})
}
One way is by adding and removing event listeners.
const showAlert = () => alert('Hi');
const addListener = () => {
const btn = document.querySelector('#clickme');
clickListener = btn.addEventListener('click', showAlert);
btn.classList.remove('disabled');
};
document.addEventListener('DOMContentLoaded', () => {
addListener();
});
function disableButton() {
const btn = document.querySelector('#clickme');
document.querySelector('#clickme').removeEventListener('click', showAlert);
btn.classList.add('disabled');
}
function enableButton() {
addListener();
}
button {
cursor: pointer;
}
#clickme {
background-color: #E2343F;
}
#clickme.disabled {
cursor: auto;
background-color: grey;
}
<div class="container">
<button id="clickme">Click Me</button>
<div class="">
<button onclick="disableButton()" class="disable">Disable Button</button>
<button onclick="enableButton()" class="enable">Enable Button</button>
</div>
</div>
Try this...
function disableButton() {
document.getElementById('clickme').disabled = true;
}
function enableButton() {
document.getElementById('clickme').disabled = false;
}
<div class="container">
<button id="clickme">Click Me</button>
<div class="">
<button onclick="disableButton()" class="disable">Disable Button</button>
<button onclick="enableButton()" class="enable">Enable Button</button>
</div>
</div>
Related
my code is working fine, but I would like to make a change where I didn't find answers just by searching. I'm looking for dynamic data for the sections below, but when I don't have data to populate, I'd like to hide the button, is that possible?
<style>
.elementor-editor-active .hidden{
display:block;
}
.hidden{
display: none;
}
.shown{
display: block !important;
}
</style>
<script>
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var btn4 = document.getElementById("btn4");
btn1.onclick = function(event){
event.preventDefault();
toggleDivs("sect1");
};
btn2.onclick = function(event){
event.preventDefault();
toggleDivs("sect2");
};
btn3.onclick = function(event){
event.preventDefault();
toggleDivs("sect3");
};
btn4.onclick = function(event){
event.preventDefault();
toggleDivs("sect4");
};
function toggleDivs(s){
document.getElementById("sect1").classList.remove("shown");
document.getElementById("sect2").classList.remove("shown");
document.getElementById("sect3").classList.remove("shown");
document.getElementById("sect4").classList.remove("shown");
document.getElementById(s).classList.add("shown");
}
btn1.focus();
btn1.click();
</script>
Here is a snippet that will hide a button if the associated div is empty:
const divs=document.querySelectorAll("div"),
hideAll=()=>divs.forEach(d=>{ // hide all selected divs
if (d.innerHTML==="") // hide associated button too, if div is empty:
document.getElementById(d.id.replace("sect","btn")).style.display="none"
d.style.display="none"
});
document.onclick=ev=>{
if(ev.target.tagName==="BUTTON") {
if (ev.target.id){
hideAll();
document.getElementById(ev.target.id.replace("btn","sect")).style.display=""
} else {
divs[2].textContent="";
hideAll()
}
}}
hideAll();
div {background-color:#ddd; padding:10px; margin:6px; border: 1px solid grey}
<div id="sect1">This is section one</div>
<div id="sect2">This is section two</div>
<div id="sect3"><img src="https://picsum.photos/id/123/400/100"></div>
<div id="sect4">This is section four</div>
<button id="btn1">show one</button>
<button id="btn2">show two</button>
<button id="btn3">show three</button>
<button id="btn4">show four</button>
<br><br>
<button>empty div#sect3</button>
I dont see your HTML tree, so I can't really give an accurate answer. But you can use mutationObserver, so you can observe your target element. If there is no data you can run a function to hide buttons.
I want to show-hide the display of these layers with a button click. I can't figure out how to do it with 2 buttons, and 2 divs...
Html:
<div id="first">This is the FIRST div</div>
<div id="second">This is the SECOND div</div>
<button id="toggle">Show first div and hide second div</button>
<button id="toggletoo">Show second div and hide first div</button>
Css:
#first {
display: none;
}
#second {
display: none;
}
Js:
const targetDiv = document.getElementById("first");
const btn = document.getElementById("toggle");
btn.onclick = function () {
if (targetDiv.style.display !== "none") {
targetDiv.style.display = "block";
} else {
targetDiv.style.display = "none";
}
}
https://codepen.io/MaaikeNij/pen/YzrgbQw
Try with the following code:
#first{
display: block; /* <--- change */
}
#second {
display: none;
}
const firstDiv = document.getElementById("first");
const secondDiv = document.getElementById("second");
document.getElementById("toggle").onclick = function () {
if (firstDiv.style.display === "none") {
firstDiv.style.display = "block";
secondDiv.style.display = "none";
} else {
firstDiv.style.display = "none";
secondDiv.style.display = "block";
}
}
There's lots of ways to do this. One common way I've seen in various templates is to add and remove classes. Another way is to call the function from the button's onclick attribute. But my favorite is to write a function that requires no editing of the div HTML because I don't want to interfere with the HTML guy's work, I just want to put functioning code in there. (BTW, I am positive there is a more elegant way to write this, but here ya go!)
const firstDiv = document.querySelector("#first");
const secondDiv = document.querySelector("#second");
const firstButt = document.querySelector("#toggle");
const secondButt = document.querySelector("#toggletoo");
firstButt.addEventListener("click",toggleDivShowHide);
secondButt.addEventListener("click",toggleDivShowHide);
function toggleDivShowHide() {
if (firstDiv.style.display !== "none") {
firstDiv.style.display = "none";
secondDiv.style.display = "block";
} else {
firstDiv.style.display = "block";
secondDiv.style.display = "none";
}
}
You're saying "if the first div is set to none, then set it to block and set the second div to none. Otherwise, do the opposite."
I tried something different, this is working :)))
<div id="first" style="display:none;"> This is the FIRST div</div>
<div id="second" style="display:none;"> This is the SECONDdiv</div>
<input type="button" name="answer" value="Show first div and hide second div" onclick="showDivOne()" />
<input type="button" name="answer" value="Show second div and hide first div" onclick="showDivTwo()" />
function showDivOne() {
document.getElementById('first').style.display = "block";
document.getElementById('second').style.display = "none";
}
function showDivTwo() {
document.getElementById('second').style.display = "block";
document.getElementById('first').style.display = "none";
}
https://codepen.io/MaaikeNij/pen/vYeMGyN
Correction: you should add event Listener for both toggle & toggletoo.
Solution: solution with reusable code.
const Toggles = document.querySelectorAll('.toggle');
const Hides = document.querySelectorAll('.hide');
Toggles.forEach((el) => {
el.addEventListener("click", (e) => {
Hides.forEach((el) => {
el.parentElement.firstElementChild.classList.add('hide');
});
e.target.parentElement.firstElementChild.classList.toggle('hide');
});
})
.hide {
display: none;
}
<div>
<div class="hide">This is the FIRST div</div>
<button class="toggle">Show first div and hide first div</button>
</div>
<div>
<div class="hide">This is the SECOND div</div>
<button class="toggle">Show second div and hide first div</button>
</div>
<div>
<div class="hide">This is the Third div</div>
<button class="toggle">Show Third div and hide first div</button>
</div>
<div>
<div class="hide">This is the Fourth div</div>
<button class="toggle">Show Fourth div and hide first div</button>
</div>
For precisely such cases, javascript has the toggle function. I rewrite your code a little bit.
const btns = document.querySelectorAll(".toggleBtn");
btns.forEach(b => {
b.onclick = function (e) {
reset();
console.log(e.target.getAttribute('data-target'))
const target = e.target.getAttribute('data-target');
const t = document.querySelector('#' + target);
t.classList.toggle('hide');
}
});
function reset() {
const divs = document.querySelectorAll('.out');
divs.forEach(d => d.classList.add('hide'))
}
.hide {
display: none;
}
<div id="first" class="out hide">This is the FIRST div</div>
<div id="second" class="out hide">This is the SECOND div</div>
<button class="toggleBtn" data-target="first">Show first div and hide second div</button>
<button class="toggleBtn" data-target="second">Show second div and hide first div</button>
I mean I want to change CSS properties of only the button that I've clicked and at the same time set other buttons to previous color. Hope I explained my problem clear
for(let i = 0; i < categoryBtns.length; i++) {
categoryBtns[i].addEventListener('click', function() {
let attr = this.getAttribute('id');
if(categoryBtns[i - 1].id != attr || categoryBtns[i + 1].id != attr) {
log([i]);
console.log('works');
this.style.backgroundColor = '#000000';
} else {
log('no');
}
})
}
I have also code that shows only divs that have current category. Should I code buttons in the same time when divs are showing and hiding?
$(document).ready(function() {
$('.category-item').click(function() {
let category = $(this).attr('id');
if(category == 'all') {
$('.prod_item').addClass('hide');
setTimeout(function() {
$('.prod_item').removeClass('hide');
}, 300);
} else {
$('.prod_item').addClass('hide');
setTimeout(function() {
$('.' + category).removeClass('hide');
}, 300);
}
});
});
I hope that I understood what you want correctly
const btns = document.querySelectorAll('.btn')
btns.forEach(btn => {
btn.addEventListener('click', () => {
btns.forEach(b => {
(b.classList.contains("active"))?
b.classList.remove("active"):true
});
btn.classList.add("active")
});
})
.active {
background-color: blue;
}
<button class = "btn">Click Me</button>
<button class = "btn">Click Me</button>
<button class = "btn active">Click Me</button>
<button class = "btn">Click Me</button>
<button class = "btn">Click Me</button>
use Array.forEach() to loop through the buttons and add/remove a styled class:
const btns = document.querySelector(".buttons");
const arr = Array.prototype.slice.call(btns.children, 0);
arr.forEach((el) => {
el.addEventListener("click", () => {
arr.forEach((el2) => {
el2.classList -= "active";
});
el.classList.toggle("active");
});
});
button.active {
color: red;
}
<div class="buttons">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
You can add a class for the button clicked state, and a default color for all buttons inside divs with class category-item. One javascript function removes the clicked class from all buttons while the other adds it to a specific button.
$(document).ready(function() {
$('.category-item input[type="button"]').click(function() {
removeClickedClass();
addClickedClass(this.id);
});
function removeClickedClass() {
$('.category-item input[type="button"]').removeClass("btnColorClicked");
}
function addClickedClass(elemID) {
let id = "#" + elemID;
$(id).addClass("btnColorClicked");
}
});
.category-item input[type="button"] {
font-weight: bold;
background-color: #4CAF50;
cursor: pointer;
}
.btnColorClicked {
background-color: #0099ff !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="category-item">
<input type="button" class="" id="1" value="hi" />
</div>
<div class="category-item">
<input type="button" class="" id="2" value="there" />
</div>
<div class="category-item">
<input type="button" class="" id="3" value="hey" />
</div>
Here is an answer for your first block without jQuery, but you should get it.
function colorizeButtons(id) {
for (let i = 0; i < categoryBtns.length; i += 1) {
const buttonId = categoryBtns[i].getAttribute('id');
// Clicked button
if (buttonId === id) {
// Set the clicked color button
} else {
// Set other buttons color
}
}
}
for (let i = 0; i < categoryBtns.length; i++) {
categoryBtns[i].addEventListener('click', function() {
let attr = this.getAttribute('id');
colorizeButtons(attr)
});
}
here is an example with jquery btns are the list of buttons elements and when clicked they turn red if click again they turn white
$(btns).on("click",function(){
if(!this.clicked){
this.clicked = true;
$(this).css("background-color", "red");
}
else{
this.clicked = false;
$(this).css("background-color", "white");
}
});
how can I hide the text opened while clicking on a button by clicking on the same button ? In other words, the same button should show or hide a text when you click on it.
Here's my code that shows a text :
<h3>
<button class="button" onclick="myFunction()" ><img src="infoicon.png" height="30"></button>
<p id="infos"></p>
<script>
function myFunction() {
document.getElementById("infos").innerHTML = "blablabla";
}
</script>
</h3>
Define a variable to save the button state
var clicked = 0;
function myFunction() {
if(clicked == 0 ) {
document.getElementById("infos").innerHTML = "blablabla";
clicked = 1;
} else {
document.getElementById("infos").innerHTML = "";
clicked = 0;
}
}
<h3>
<button class="button" onclick="myFunction()" ><img src="infoicon.png" height="30"></button>
<p id="infos"></p>
</h3>
Try this out, it worked for me:
function showHide() {
var demo = document.getElementById('demo');
if (demo.innerHTML === "") {
demo.innerHTML = "bla";
} else {
demo.innerHTML = "";
}
}
<p id="demo"></p>
<button onclick="showHide()">Show Hide</button>
Quite simple, using jQuery—
$( "#button" ).click(function() {
$('#text-to-toggle').toggle(200);
});
I am trying to make two buttons stand side by side
when clicked on one should say "im right" and the other says "no im right!"
<button id="right" type="button">Click Me!</button>
<button id="wrong" type="button">Click Me!</button>
This is my Html.
I am new to Javascript so I am having some trouble putting this together in a function.
document.getElementById("right").addEventListener("click", function(){
alert("I am Right!");
});
document.getElementById("wrong").addEventListener("click", function(){
alert("No,I'm Right!");
});
rather than have an alert I want to have the button's change to that text when clicked on.
<script>
function myFunction(isRight) {
if(isRight) {
alert('It is right button');
} else {
alert('It is left button');
}
}
</script>
<button class="left" onclick="myFunction(false)">Left</button>
<button class="right" onclick="myFunction(true)">Right</button>
You could use something like that for the sample.
But I recommend look to addEventLister and Event Object it will looks good.
function swapText(buttonClicked){
var button1 = document.getElementById('button1');
var btn1Output = document.getElementById('btn1Output');
var btn2Output = document.getElementById('btn2Output');
if (buttonClicked == button1){
btn1Output.innerHTML = "I'm right.";
btn2Output.innerHTML = "No, I'm right.";
} else {
btn1Output.innerHTML = "No, I'm right.";
btn2Output.innerHTML = "I'm right.";
}
}
button, div {
display: inline-block;
width: 45%;
height: 50px;
}
<button onclick="swapText(this)" id="button1">Click</button>
<div id="btn1Output"></div>
<button onclick="swapText(this)" id="button2">Click</button>
<div id="btn2Output"></div>