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.
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'
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>
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 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'm new to this site. I've googled for almost 6 days now for javascript to use in making a dropdown menu as seen on Google and Facebook. FB uses it on Account link. When you click on Account in Facebook, a dropdown menu comes out.
This is what I'd like:
When we click anywhere else on the page, it disappears, but it's still displayed when we click on this menu itself e.g. we can logout from the page, but if we click somewhere else, it disappears like some onblur event has occured.
I've written the code like the following:
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function dropdown() {
var ele = document.getElementById("hide");
if(ele.style.display == "block") {
ele.style.display = "none";
} else {
ele.style.display = "block";
}
}
</script>
</head>
<body>
Hello Mohd
<div id="hide" style="display:none">
<p>Hii All<p></p>Hw r u</p>
<p>Sign Out</p>
</div>
</body>
</html>
In the above code, it works well when I click the link. A dropdown menu appears with all my details and disappears when I click it again. I want it to disappear when we click anywhere else on the page, which I'm unable to do.
If I use onblur then the dropdown menu disappears even when I click on it i. e. I can't use it.
Here you go:
http://jsfiddle.net/Paulpro/vty5s/
Code:
<html>
<head>
<title>Javascript Dropdown Example</title>
<style type="text/css">
#hide{
display: none;
background-color: #68D;
border: 1px solid #000;
width: 80px;
}
</style>
<script type="text/javascript">
function showDropDown(e){
document.getElementById('test').onclick = function(){};
if(e.stopPropagation)
e.stopPropagation(); // W3C model
else
e.cancelBubble = true; // IE model
document.getElementById("hide").style.display = "block";
document.onclick = function(e){
var ele = document.elementFromPoint(e.clientX, e.clientY);
if(ele == document.getElementById("test")){
hideDropDown();
return;
}
do{
if(ele == document.getElementById("hide"))
return;
}while(ele = ele.parentNode);
hideDropDown();
};
}
function hideDropDown(){
document.onclick = function(){};
document.getElementById("hide").style.display = "none";
document.getElementById('test').onclick = showDropDown;
}
</script>
</head>
<body>
Hello Mohd
<div id="hide">
<p>Hii All<p></p>Hw r u</p>
<p>Sign Out</p>
</div>
</body>
<script type="text/javascript">
document.getElementById('test').onclick = showDropDown;
</script>
</html>