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>
Related
The function doesn't work, and does not hide the paragraph element. How to fix this?
<html>
<head>
</head>
<body>
<p id="paragraph">Toggle Text</p>
<button class="buttonChange" onclick="changeText()">Change Text</button>
<script>
function changeText(){
let text=document.getElementById('paragraph');
if (text.style.display == 'block'){
text.style.display = 'none';
}
if (text.style.display == 'none'){
text.style.display = 'block';
}
}
</script>
</body>
</html>
At Page Load the Display style is empty also you are immediately checking again with an if statement, use else if or simply else if there is nothing else to check
function changeText(){
let text=document.querySelector('#paragraph');
if (text.style.display === 'block' || text.style.display === ""){
text.style.display = 'none';
}
else if (text.style.display == 'none'){
text.style.display = 'block';
}
}
<p id="paragraph">Toggle Text</p>
<button class="buttonChange" onclick="changeText()">Change Text</button>
<html>
<head>
</head>
<body>
<p id="paragraph">Toggle Text</p>
<button onclick="changeText()">Change Text</button>
<script>
const text = document.getElementById('paragraph');
function changeText() {
if (text.style.display == 'block') {
text.style.display = 'none';
} else {
text.style.display = 'block';
}
}
</script>
</body>
</html>
Use if else to choose one condition only
Use below code. your code has 2 issues
1st - You need to check for text.style.display == ''.
2nd - The 2 if block make it always visible as 1st if will hide then 2nd if will check if hidden then it will show. Use else instead of 2nf if.
<html>
<head>
</head>
<body>
<p id="paragraph">Toggle Text</p>
<button class="buttonChange" onclick="changeText()">Change Text</button>
<script>
function changeText(){
let text=document.getElementById('paragraph');
if (text.style.display == 'block' || text.style.display == ''){
text.style.display = 'none';
}else{
text.style.display = 'block';
}
}
</script>
</body>
</html>
because you havent set the display of the p element
if you console.log the style of the p element, the display of the element is not block, it is blank ""
<p id="paragraph">Toggle Text</p>
<button class="buttonChange" onclick="changeText()">Change Text</button>
<script>
function changeText(){
let text = document.getElementById('paragraph');
console.log(text.style);
}
</script>
so you have to change it to if (text.style.display === '')
<html>
<head>
</head>
<body>
<p id="paragraph">Toggle Text</p>
<button class="buttonChange" onclick="changeText()">Change Text</button>
<script>
function changeText(){
let text = document.getElementById('paragraph');
if (text.style.display === '' || text.style.display === "block"){
text.style.display = 'none';
}else if (text.style.display === 'none'){
text.style.display = 'block';
}
}
</script>
</body>
</html>
According to the previous answers your code has 2 issues as mentioned.
Rather than using || text.style.display == "" condition as suggested, you can always create your paragraph tag with style like below.
<p style="display:block" id="paragraph">Toggle Text</p>
You can choose the solution as you wish either with the OR condition or with the style attribute in P tag.
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>
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
div
{
width:5em;
height:5em;
background-color:yellow;
}
</style>
</head>
<body>
<div id="div">
</div>
<script>
window.onload = function() {
var x;
x = document.getElementByID("div");
x.style.width = '9em' ;
x.style.backgroundColor = "green";
};
</script>
</body>
</html>
What im doing wrong ? I want to change div properties like width or background color with javascript but it's not working.
change getElementByID to getElementById
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
div
{
width:5em;
height:5em;
background-color:yellow;
}
</style>
</head>
<body>
<div id="div">
</div>
<script>
window.onload = function() {
var x;
x = document.getElementById("div");
x.style.width = '9em' ;
x.style.backgroundColor = "green";
};
</script>
</body>
</html>
You're using getElementByID. The correct method is getElementById.
Your script should look something like this:
window.onload = function() {
var x;
x = document.getElementById("div");
x.style.width = '9em';
x.style.backgroundColor = "green";
};
JavaScript Syntax Error ! Here is the update...........
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
/* div {
width: 5em;
height: 5em;
background-color: yellow;
} */
</style>
</head>
<body>
<div id="div">
</div>
<script>
var x = document.getElementById("div");
x.style.width = "9em";
x.style.height = "9em";
x.style.display = "block";
x.style.backgroundColor = "green";
</script>
</body>
</html>
Change getElementByID to getElementById.
window.onload = function() {
var x;
x = document.getElementById("div");
x.style.width = '9em';
x.style.backgroundColor = "green";
};
If you want to search by the tag name, you can directly use getElementsByTagName("div") instead of assigning an id of the value div. But bear in my mind that it will return all div elements; i.e. a collection of elements.
I just found this helpful JS Toggle..
Is it possible to modify this one? I just want to show the actual selected one and hide all others..
<script type="text/javascript">
function toggle(control){
var elem = document.getElementById(control);
if(elem.style.display == "none"){
elem.style.display = "block";
}else{
elem.style.display = "none";
}
}
</script>
link
<br /><div id="test" style="display: none">text</div>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<script>
function show(idToShow, classToHide) {
var classList = document.querySelectorAll('.'+classToHide);
var thisElem = document.getElementById(idToShow);
var wasShown = (thisElem.style.display == "block");
var i = -1;
while (node=classList[++i]) {
node.style.display ="none";
};
if(!wasShown){
thisElem.style.display = "block";
}
}
</script>
</head>
<body>
<div onclick="show('a','all');">A
<div class="all" id="a" style="display:none">The stuff to show</div>
</div>
<div onclick="show('b','all');">B
<div class="all" id="b" style="display:none">The stuff to show</div>
</div>
<div onclick="show('c','all');">C
<div class="all" id="c" style="display:none">The stuff to show</div>
</div>
</body>
</html>
It was a fight to get IE 8 support, document.getElementsByClassName was not supported in that version. It seems that document.querySelectorAll does work in IE 8, but not in quirks mode. Sample code fixed to use this and engage standard mode.
Note: My first quick hack of this used a for loop rather than the while:
for (var i=0;i<classList.length;i++) {
classList[i].style.display ="none";
};
Bonus points if you can spot when this will fail (hover mouse to see answer):
if there's an element in the list with the id length (in which case classList.length will refer to that element, not the length of the NodeList.)
I need show a DIV full of dimensions and weights in English measure, and have a link allowing the user to toggle to a hidden DIV that instead displays Metric. Trying the markup below, but it's not working. It refuses to toggle. I've tested with the first div given no style and with its style'"display: block;" and neither works. What am I missing?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
<!--
body {
color:#000000;
background-color:#FFFFFF;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
function toggle_visibility(eng, met) {
var e1 = document.getElementById(eng);
var e2 = document.getElementById(met);
if(e1.style.display == 'block')
e1.style.display = 'none';
e2.style.display = 'block';
else
e1.style.display = 'block';
e2.style.display = 'none';
}
</script>
</head>
<body>
<div id="eng" style="display: block;">
This is English<br />
Convert to Metric
</div>
<div id="met" style="display: none;">
This is Metric<br />
Convert to English
</div>
</body>
</html>
Try this if-statement:
if(e1.style.display == 'block') {
e1.style.display = 'none';
e2.style.display = 'block';
} else {
e1.style.display = 'block';
e2.style.display = 'none';
}
Got it working. I thought I'd post the solution:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
<!--
body {
color:#000000;
background-color:#FFFFFF;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
function toggle_visibility() {
var e1 = document.getElementById("eng");
var e2 = document.getElementById("met");
if(e1.style.display == 'block') {
e1.style.display = 'none';
e2.style.display = 'block';
}
else {
e1.style.display = 'block';
e2.style.display = 'none';
}
}
</script>
</head>
<body>
<div id="eng" style="display: block;">
This is English<br />
Convert to Metric
</div>
<div id="met" style="display: none;">
This is Metric<br />
Convert to English
</div>
</body>
</html>