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>
Related
I have this code:
<script>
radius.style.setproperty('display');
</script>
<style>
.radius{
display: none;
}
</style>
<body>
<p id="radius"> Enter the radius</p>
</body>
What I intend to do here is that, by default, the paragraph has display=none. I want to display this paragraph through JS when some specific condition is met. But the problem is that using above code, I am not able to accomplish what I want. Please suggest what should have been done instead?
at the first you should get dom, after that change style attr. like this
for example:
<html>
<body>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color = "blue";
</script>
</body>
</html>
Try
<html>
<body>
<p id="radius"> Enter the radius</p>
<script>
let radius = document.getElementById("radius");
if(condition == true){
radius.style.display = "block";
}else{
radius.style.display = "none";
}
</script>
</body>
</html>
You can set element style in javascript
element.style.cssPropertyInCamelCase = 'value'
Example
const element = document.getElementById('id')
element.style.display = 'none'
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>
I need help with making a hint button that hides then shows. Here is my code so far but it shows then hides. I can not figure out how to make it hide then show
<!DOCTYPE html>
<body>
<button onclick="myFunction()">HINT</button>
<div id="Hint">
<p>The hint</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("Hint");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
Just hide the div first :) .
<div id="Hint" style="display: none;">
<p>The hint</p>
</div>
<!DOCTYPE html>
<html lang="en">
<body>
<button onclick="myFunction()">HINT</button>
<div id="Hint" style="display: none;">
<p>The hint</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("Hint");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
I created this code so my page would be hidden until it finishes loading. But my code doesn't work as I expected. I expected this to hide the BODY until the OnLoad event was triggered.
However, instead, it just stays hidden.
Any help would be appreciated, if there is maybe another, better method of hiding the BODY until it finishes loading, or what's wrong with this one.
Here's what I've tried so far:
function unveil() {
var thebod = document.getElementById("testbody");
thebod.STYLE = "display: block;"
}
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY ID="testbody" ONLOAD="unveil();" STYLE="display: none;">
<div align="CENTER">
HELLO WORLD!
</div>
</BODY>
</HTML>
The DOMContentLoaded event of the window object can do this. But, don't hide the body, hide a wrapper instead. And, when you set the style, make sure to set the style of a CSS property, not the style object itself.
window.addEventListener("DOMContentLoaded", function(){
document.getElementById("wrapper").style.display = "block";
});
#wrapper { text-align:center; background:#e0e0e0; display:none;}
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY>
<div id="wrapper">
HELLO WORLD!
<!-- The following is only added to create a delay in the
parsing of the document -->
<script>
for(var i = 0; i < 100000000; ++i){ var x = i / 3.14; }
</script>
</div>
</BODY>
</HTML>
You're not setting the elements 'style' correctly:
You can either do:
element.style.display = "block";
Or
element.setAttribute('style', "display: block");
Here is a working example:
function unveil() {
var thebod = document.getElementById("testbody");
thebod.style.display = "block";
}
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY ID="testbody" ONLOAD="unveil();" STYLE="display: none;">
<div align="CENTER">
HELLO WORLD!
</div>
</BODY>
</HTML>
Your issue is here:
thebod.STYLE = "display: block;"
which should read:
thebod.style.display = 'block';
Here is the complete approach (using unobtrusive javascript):
var body = document.getElementsByTagName('body')[0];
function unveil() {
body.style.display = 'block';
}
window.addEventListener('load', unveil, false);
body {
display: none;
}
div {
text-align: center;
}
<div>HELLO WORLD!</div>
<HTML>
<HEAD>
<TITLE>HELLO</TITLE>
</HEAD>
<BODY ID="testbody" onload="testbody.style.display = '';" style="display: none;">
<div align="CENTER">
HELLO WORLD!
</div>
</BODY>
</HTML>
How would you write a toggle which toggles the display property of an element onmouseover/onmouseout from display:none to display:block;, or regardless, any css property which jquery's toggle can operate on- how exactly would you write a toggle function without jquery?
And why can't you take a javascript css property as a boolean in the following code?
<html>
<head>
<style type="text/css">
a {
display:none;
}
</style>
<script type="text/javascript">
function ab(a)
{
if(document.getElementById(a).style.display=='none')
{
document.getElementById(a).style.display="block";
}
else if(document.getElementById(a).style.display=="block")
{
document.getElementById(a).style.display="none";
}
}
</script>
</head>
<body>
<div class="fg">
<div style="width:100px;height:100px;border:2px solid blue;" onmouseover="ab('g');"
onmouseout="ab('g');">
<a id="g" href="http://www.dfadsafafa.com">lajflke</a></div></div>
</body>
</html>
The solution you mentioned seems fine, but can make it more concise.
function toggle(id){
var div1 = document.getElementById(id);
if (div1.style.display == 'none') {
div1.style.display = 'block'
} else {
div1.style.display = 'none'
}
}