I have a set of 4 buttons, which are used to show/hide all images within the page -- which they do just fine. When an individual button is clicked, it changes the inner button text from "HIDE ALL" to "DISPLAY ALL".
However, all other buttons remain the same.
How can I have all other buttons change text as well?
So far I tried this, which works a one button at a time -- I would like to have all of them changed at once:
$('.HideDisplay').click(function() {
var $this = $(this);
$this.toggleClass('HideDisplay');
if ($this.hasClass('HideDisplay')) {
$this.text('HIDE ALL');
$(this).css('color', 'black');
$(this).css("background-color", "#f1f1f1");
$(this).hover(function() {
$(this).css("background-color", "#dedede");
}, function() {
$(this).css("background-color", "#f1f1f1");
});
} else {
$this.text('DISPLAY ALL');
$(this).css('color', 'white');
$(this).css("background-color", "#009E60");
$(this).hover(function() {
$(this).css("background-color", "#008000");
}, function() {
$(this).css("background-color", "#009E60");
});
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
</head>
<body>
<p><button id="button" class="HideDisplay">HIDE ALL</button></p>
<p><button id="button2" class="HideDisplay">HIDE ALL</button></p>
<p><button id="button3" class="HideDisplay">HIDE ALL </button></p>
<p><button id="button4" class="HideDisplay">HIDE ALL</button></p>
</pre>
</body>
</html>
In your case, you need to use the selector "button[id*='button']" to change all of your buttons because if you use the selector by class it gonna work the first time but then when you click the second time don't because the class gonna be removed by the toggleClass function. Also, you need to change the display text with the same selector and inside the if you can set a variable with the label that you want to use, check the code below:
$('.HideDisplay').click(function() {
var $this = $(this);
var textToDisplay = '';
if (!$this.hasClass('HideDisplay')) {
textToDisplay = 'HIDE ALL';
$this.css('color', 'black');
$this.css("background-color", "#f1f1f1");
$this.hover(function() {
$this.css("background-color", "#dedede");
}, function() {
$this.css("background-color", "#f1f1f1");
});
} else {
textToDisplay = 'DISPLAY ALL';
$this.css('color', 'white');
$this.css("background-color", "#009E60");
$this.hover(function() {
$(this).css("background-color", "#008000");
}, function() {
$(this).css("background-color", "#009E60");
});
}
$("button[id*='button']").toggleClass('HideDisplay');
$("button[id*='button']").text(textToDisplay);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
</head>
<body>
<p><button id="button" class="HideDisplay">HIDE ALL</button></p>
<p><button id="button2" class="HideDisplay">HIDE ALL</button></p>
<p><button id="button3" class="HideDisplay">HIDE ALL </button></p>
<p><button id="button4" class="HideDisplay">HIDE ALL</button></p>
</pre>
</body>
</html>
Instead of using id to select the elements and make changes separately there is an alternative way of doing this with a cleaner code using querySelectorAll() allowing you to select all elements with a specific class and then make all the desired changes to all the elements using a loop.
Consider the following with plain JavaScript
$('.HideDisplay').on('click', function(){
const btns = document.querySelectorAll('.HideDisplay');
for(btn of btns){
if(btn.innerText === 'HIDE ALL'){
btn.innerText = 'DISPLAY ALL';
btn.style.backgroundColor = 'green';
btn.style.color = 'white';
}
else{
btn.innerText = 'HIDE ALL';
btn.style = null;
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><button class="HideDisplay">HIDE ALL</button></p>
<p><button class="HideDisplay">HIDE ALL</button></p>
<p><button class="HideDisplay">HIDE ALL </button></p>
<p><button class="HideDisplay">HIDE ALL</button></p>
Related
The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.
If above is true, then why i am facing issues to get the paragraph back?
$("button").click(function() {
if ($("#paragraph").css("display") == "none") {
$("#paragraph").css("display") = "block";
$("#paragraph").css("opacity") = 1;
} else {
$("#paragraph").fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="paragraph">This is a paragraph</p>
<button>Click me</button>
The reason is your are using your css assignment syntax wrong. The console would have alerted you to this. Make your changes as follows.
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<body>
<p id="paragraph">This is a paragraph</p>
<button>Click me</button>
<script type="text/Javascript">
$("button").click(function(){
if ($("#paragraph").css("display") =="none"){
$("#paragraph").css("display", "block");
$("#paragraph").css("opacity", '1');
}
else{
$("#paragraph").fadeOut();
}
});
</script>
</body>
You can ignore how i included jquery. I only did that so to ensure its all runnable here.
Use the shortcut method show() instead of css() to make it simple
$("button").click(function() {
const $p = $("#paragraph");// cache element reference once for efficiency
if ($p.is(':hidden')) {
$p.show();
} else {
$p.fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="paragraph">This is a paragraph</p>
<button>Click me</button>
How can I optimize that style.display JavaScript, I don't wanna use "count" variable, it's just a w3school example and I wonder how to optimize it without using "count" variable?
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick=show()>Click Me!</button>
</body>
<script>
count = 0
function show() {
if (count%2==0) {
document.getElementById('demo').style.display='none'
} else {
document.getElementById('demo').style.display='block'
}
count++;
}
</script>
</html>
You can use classList.toggle
function show() {
document.getElementById('demo').classList.toggle('hide')
}
.hide {
display: none;
}
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick=show()>Click Me!</button>
You are basically toggling the div, so you can achieve that by writing in the following way.
function toggle() {
if (document.getElementById('demo').style.display === 'block') {
document.getElementById('demo').style.display='none'
} else {
document.getElementById('demo').style.display='block'
}
}
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick=toggle()>Click Me!</button>
</body>
</html>
use a boolean.
<script>
hide = false;
function show() {
hide = !hide
if (hide) {
document.getElementById('demo').style.display = 'none'
} else {
document.getElementById('demo').style.display = 'block'
}
}
</script>
If you don't want to use extra CSS and non-intrusive Javascript:
var btn = document.getElementById('btn');
var demo = document.getElementById('demo');
demo.style.display = 'block';
btn.addEventListener('click', function() {
demo.style.display = demo.style.display === 'block' ? 'none' : 'block';
});
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" id="btn">Click Me!</button>
Trying to do something super basic which doesn't seem to work:
HTML
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
<button style="margin: 10px; color:white; background-color: #4CAF50; font-size:40px;" type="button" id="aaa" > גבע</button>
</body>
JS
$("aaa").click(function () {
$(this).css('backgroundcolor', 'white');
});
The button color doesn't seem to change. What am I doing wrong?
Thanks!
Two changes required
Id selection need a # in jquery
change backgroundColor to backgroundColor or background-color
$("#aaa").click(function() {
$(this).css('backgroundColor', 'white');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="margin: 10px; color:white; background-color: #4CAF50; font-size:40px;" type="button" id="aaa"> גבע</button>
$('.thing').on('click', function() {
$(this).css('background', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='thing'>button</button>
$('#aaa')
You need to target the element by id in your case.
button is an id selector #aaa.
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
<body>
<button style="margin: 10px; color:white; background-color: #4CAF50; font-size:40px;" type="button" id="aaa" > גבע</button>
<script>
$("#aaa").click(function () {
$(this).css('background-color', 'white');
});
</script>
</body>
</html>
<script>
$("#aaa").click(function () {
$(this).css('background-color', 'white');
});
</script>
Two bugs are there
Put # before the id selector which is missing in your code.
The CSS(or DOM style) property should be background-color or backgroundColor
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="margin: 10px; color:white; background-color: #4CAF50; font-size:40px;" type="button" id="aaa" > גבע</button>
<script>
$("#aaa").click(function () {
$(this).css('background-color', 'white');
});
</script>
Replace your code with:
$("#aaa").click(function () {
$(this).css('backgroundColor', 'white');
});
There is a problem with your selector rule, you are missing "#"
For id use # for class use . in selector
$("#aaa").click(function () {
$(this).css({'background-color':'white'});
});
$(this).css("background-color", "yellow");
replace "backgroundcolor" attribute to "background-color"
Then it will work!
Good luck
1) Change $("aaa") To $("#aaa") :
For id selector must use # sign.
2)Change backgroundcolor To background-color
$("#aaa").click(function () {
$(this).css('background-color', 'white');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button style="margin: 10px; color:white;background-color: #4CAF50; font-size:40px;" type="button" id="aaa" > גבע</button>
for id use '#' and for 'backgroundcolor' use 'background-color'
$("#aaa").click(function () {
$(this).css('background-color', 'white');
});
What I want to do is, when I click on button then one div should disappear and another should appear and if i click on the same button one more time, then first one should appear and second one should disappear. This would go until I click on the button.
What I tried:
JavaScript:
function change_image(){
var flag = true;
if(flag){
document.getElementById('speaker_main_div_with_rounded_image').style.display="none";
document.getElementById('speaker_main_div_with_square_image').style.display="block";
flag = false;
} else {
document.getElementById('speaker_main_div_with_rounded_image').style.display="block";
document.getElementById('speaker_main_div_with_square_image').style.display="none";
flag = true;
}
}
HTML:
<input type="button" value="Click Here to get another image" onClick="change_image(this)">
Any help would be grateful.
Thank You.
Your flag variable is local, and its value is always the same when function is called. Initialize it with:
var flag = document.getElementById('speaker_main_div_with_rounded_image').style.display !== 'none';
This is my solution using jQuery Library .
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#div1").toggle();
$("#div2").toggle();
});
});
</script>
<style>
.hide{
display:none;
}
</style>
</head>
<body>
<button type="button" id="btn1">Toggle</button>
<div id ="div1">
I am div 1
</div>
<div id ="div2" class="hide">
I am div 2
</div>
</body>
</html>
How do I make HTML button disappear on click, then reappear after 2 seconds? I found some ways of doing this but I need it to work with the code I already have. How can I accomplish this?
<script language="JavaScript">
function enableTorch(milliSeconds) {
ipwajax('enabletorch');
window.setTimeout("ipwajax('disabletorch');",milliSeconds);
}
</script>
<input type="button" style="font: bold 20px Arial" onclick="enableTorch(1500);" value="LED ON">
<!--
$("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.
-->
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("button").hide();
$("button").show(2000);/*2 sec time*/
});
});
</script>
</head>
<body>
<button>Click me</button>
</body>
</html>
this one will hide the button and reshow in 2 sec
$(document).ready(function(){
$("button").click(function(){
$(this).hide().show(2000);
});
});
Check this
function enableTorch(milliSeconds) {
ipwajax('enabletorch');
document.getElementById('torch').style.display="none";
setTimeout(function(){ipwajax('disabletorch');document.getElementById('torch').style.display='inline'}, milliSeconds);
}
<input type="button" id = "torch" style="font: bold 20px Arial" onclick="enableTorch(1500);" value="LED ON">
Here you go http://jsfiddle.net/4eCrQ/
$('.first').on('click', function() {
$('.second').hide();
setTimeout(function() {
$('.second').show();
}, 2000);
});