My aim of the code which you'll find below is to make some kind of a filter. But for some reason it won't work.
As you can see when you try to hide the boxes when selecting the input box it won't work; but when you make var x, var x = document.getElementById("a"); it will work. Is there a way to hide all the different boxes?
function myFunction1() {
var x = [document.getElementById("a"), document.getElementById("b"), document.getElementById("c")];
if (x.style.display == 'block')
x.style.display = 'none';
else
x.style.display = 'block';
}
#a, #b, #c {
float: left;
width: 25%;
height: 200px;
background-color: #ffffff;
border: 1px solid #002261;
margin: -1px;
text-align: center;
display: block;
}
<input type="checkbox" onclick="myFunction1()">Try to hide all
<div id="a">item a</div>
<div id="b">item b</div>
<div id="c">item c</div>
As you can see you can't hide all the boxes simultaneously.
You are making a list([]) and then trying to style the list itself, not its contents.
JavaScript provides an easy list method for this, forEach():
function myFunction1() {
var x = [document.getElementById("a"), document.getElementById("b"), document.getElementById("c")];
x.forEach(function(item) {
if (window.getComputedStyle(item).display === 'block') item.style.display = 'none';
else item.style.display = 'block';
});
}
See this codepen demo
Note: your code had a minor bug in getting the style, item.style.display only gets inline styles, so the first time you call the function it will not hide the element. I fixed it in the above code and codepen with window.getComputedStyle(item).display.
Related
I'm new to coding, but looking at doing a bootcamp to help me learn some more, however, at the moment I am having some trouble getting some code to do what I need it to.
The following code is what I use on the website I'm working on:
<button class="zerobut" onclick="myFunction5()">Open</button>
<script>
function myFunction5() {
var x = document.getElementById("product5");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
What I need is an automatic hide once a different button is clicked. There are 5 different categories from which a customer must choose before the options are displayed, but at the moment it doesn't close the previous option unless you click on the button again.
Is anyone able to help me understand what I need to change to make this happen? (sorry if I'm explaining this poorly.)
Here's another section's code. So when this one opens, the first one should close automatically if possible.
`
<button class="healthbut" onclick="myFunction3()">Open2</button>
<script>
function myFunction3() {
var x = document.getElementById("product3");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
</script>
`
It doesn't work the first time because the style.display attribute is initially set to the empty string. If you add the style attribute it works.
function myFunction5() {
var x = document.getElementById("product5");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.products {
background-color:yellow;
border: 1px solid black;
padding:1rem;
}
<button class="zerobut" onclick="myFunction5()">Open/Close</button>
<div class = 'products' style='display:block' id='product5'>Product 5 panel</div>
A better option is to just check to see if your style.display attribute is not 'none' and change it otherwise as below
function myFunction5() {
var x = document.getElementById("product5");
if (x.style.display !== "none") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.products {
background-color: yellow;
border: 1px solid black;
padding: 1rem;
}
<button class="zerobut" onclick="myFunction5()">Open/Close</button>
<div class='products' id='product5'>Product 5 panel</div>
Finally, an even better way to do it is to create a 'hide' class and toggle the class element
function myFunction5() {
var x = document.getElementById("product5");
x.classList.toggle('hide');
}
.products {
background-color:yellow;
border: 1px solid black;
padding:1rem;
}
.products.hide {
display: none;
}
<button class="zerobut" onclick="myFunction5()">Open/Close</button>
<div class = 'products' id='product5'>Product 5 panel</div>
Finally, if you've got some panels you need to hide when you're displaying others, then this can be done as follows:
productNumber = 1;
totalNumberOfProducts = 5;
function myFunction5() {
//Select all elements with the class 'products'.
const elements = document.querySelectorAll(".products");
//choose the next element to display
productNumber++;
//If we get past the last element then go back to the one with id 'product1'
if (productNumber > totalNumberOfProducts) {
productNumber = 1;
}
//Loop through each element and hide all elements except the one that's got the id of
//"product"+productNumber;
elements.forEach((element) => {
const elementId = element.getAttribute('id');
if (elementId == 'product' + productNumber) {
element.classList.remove('hide');
} else {
element.classList.add('hide');
}
});
}
.products {
border: 1px solid black;
padding: 1rem;
}
#product1 {
background-color: brown;
}
#product2 {
background-color: salmon;
}
#product3 {
background-color: pink;
}
#product4 {
background-color: skyblue;
}
#product5 {
background-color: yellow;
}
.products.hide {
display: none;
}
<button class="zerobut" onclick="myFunction5()">Go to next panel</button>
<div class='products' id='product1'>Product 1 panel</div>
<div class='products hide' id='product2'>Product 2 panel</div>
<div class='products hide' id='product3'>Product 3 panel</div>
<div class='products hide' id='product4'>Product 4 panel</div>
<div class='products hide' id='product5'>Product 5 panel</div>
I created a simple function which shows or hides a div tag on clicking a button but how can i set it to initially be hiding and after clicking the button it is displayed?
Just set it's display style property to None.
element = document.getElementById('toggle');
button = document.getElementById('toggle-button');
function hideAndShow(){
if(element.style.display == 'none'|| element.style.display == '') // checks if the display property is set to none or not
{
element.style.display = 'Block'; // if set to none then set the display property to block
button.innerHTML = 'Hide'; // changes the button's text
}
else{
element.style.display = 'None'; // otherwise set it to none
button.innerHTML = 'Show';
}
}
#toggle{
width: 100%;
margin: auto;
height: 50px;
display: None; /*this set's the divison to a hidden state by default*/
background-color: rgba(248,25,34,0.8);
}
#toggle-button{
width: 100%;
margin: 5px;
height: 25px;
padding: 5px;
color: rgba(25,25,67,0.5);
}
<div id='toggle'></div>
<button id='toggle-button' onclick='hideAndShow()'>Show</button>
function myFunction() {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
};
function toggle() {
document.getElementById('test').style.display = 'block';
}
.hide {
display: none;
}
<div id="test" class="hide">Test</div>
<button onclick="toggle()">Toggle</button>
function btnClick(){
const divElement = document.getElementById('myDiv');
if (divElement.classList.contains("show")) {
divElement.classList.remove("show")
divElement.classList.add("hide")
} else {
divElement.classList.add("show")
divElement.classList.remove("hide")
}
}
.hide{
display: none
}
.show{
display: block
}
<div id="myDiv" class="hide">
Hello, I am Div HTML Content
</div>
<button onclick="btnClick()">Click Me!!</button>
I am trying to create a toggle function with JavaScript (not jQuery).
I have created an ID named box, and a class within the ID named box-open.
The width of the ID box is 100px.
The width of box-open is set to 1000px.
When I try to use my code I get this error, that displays “Cannot set property 'display' of undefined”.
I have tried writing the code a couple of different ways, but I always seem to get the same error in the console.
function toggle(open) {
box = document.getElementById('box').style.display = 'block';
if (open == true) {
box.style.display = 'none';
boxOpen = document.getElementsByClassName('box-open').style.display = 'block';
} else {
box.style.display = 'block';
boxOpen.style.display = 'none';
}
}
#box {
width: 100px;
height: 100px;
background: gold;
text-align: center;
display: block;
}
.box-open {
width: 50px;
height: 50px;
background: green;
display: none;
}
<div id="box" class="box-close"></div>
<button type="button" onClick="toggle()">click me</button>
This is a link to my codepen, where you can find the code
http://codepen.io/2bu/pen/YNYjjR
I am not sure but this line:
box = document.getElementById('box').style.display = 'block'
should be maybe
box = document.getElementById('box');
Your function is not very flexible because it can only toggle a specific box with ID "box". Instead you could pass in a selector for the element you want to toggle:
<div id="box" class="box-close"></div>
<button type="button" onClick="toggle('#box')">click me</button>
And then in your Javascript:
function toggle(selector) {
var box = document.querySelector(selector);
var isOpen = box.style.display === "block";
box.style.display = isOpen ? "none" : "block";
}
This way you can use the same toggle function to toggle any box you like.
Here is a simple jQuery implementation. Just change the .box-toggled class to be whatever you actually want. It also uses eventListener to keep your HTML cleaner.
https://jsfiddle.net/segbxnh3/3/
var box = document.querySelector('#box');
var toggleButton = document.querySelector('button');
toggleButton.addEventListener('click', function() {
$(box).toggleClass('box-toggled');
});
UPDATE:
Here is a vanilla JS implementation.
https://jsfiddle.net/segbxnh3/5/
var box = document.querySelector('#box');
var toggleButton = document.querySelector('button');
toggleButton.addEventListener('click', function() {
if (box.classList.contains('box-toggled')) {
box.classList.remove('box-toggled');
} else {
box.classList.add('box-toggled');
}
});
You can use like this.
function toggle(open, element){
box = document.getElementById('box');
boxOpen = document.getElementById('box-open');
if ( open == true) {
box.style.display = 'none';
boxOpen.style.display = 'block';
element.setAttribute('onclick', "toggle(false, this);");
}else{
box.style.display = 'block';
boxOpen.style.display = 'none';
element.setAttribute('onclick', "toggle(true, this);");
}
}
*{
margin:0px;
padding:0px;
font-family: 'Montserrat', sans-serif;
}
#box{
width:100px;
height: 100px;
background: gold;
text-align: center;
display:block;
}
#box-open{
width:50px;
height: 50px;
background: green;
display: none;
}
<div id="box"></div>
<div id="box-open"></div>
<button type="button" onClick="toggle(true, this);" >click me </button>
Also, check this solution
function expand(){
currentvalue = document.getElementById("test").value;
if(currentvalue == "off"){
document.getElementById("test").value="on";
document.getElementById("test").style.height="100px";
var div = document.getElementById("test");
var content = document.getElementById("test3");
div.innerHTML = div.innerHTML + content.innerHTML;
}
else{
document.getElementById("test").value="off";
document.getElementById("test").style.height="20px";
var div = document.getElementById("test").innerHTML = "<div id='test2'><b>Div</b></div>";
}
}
<!doctype html>
<html>
<head>
<style>
#test{
position: absolute;
border-radius: 4px;
background: #CCCC00;
height: 20px;
width: 300px;
border: 1px solid #000000;
}
#test2{
text-align: center;
font-size: 12pt;
}
</style>
</head>
<body>
<a href="#" onClick="javascript:expand()" value="on">
<div id="test">
<div id="test2"><b>Div</b></div>
<div id="test3" style="display: none;">I want this to show up in my div!</div>
</div>
</a>
</body>
</html>
I'm trying to make an expandable div container which will display some text inside of it
when opened and then hide it when closed. I managed to make the div expand and close but
I can't figure out how to make the text appear in the expanded box. I can do it by inserting the text in the javascript but I want it set as a variable so i can use the script for multiple pages with different text inside of the div.
I don't know if I've approached it the right way and would like some help, ty in advance.
To display your text just change the style of the div containing your text to display: block:
document.getElementById("test3").style.display = "block";
For your requirements, it would be something like this:
function expand() {
if (currentValue == "off") {
currentValue = "on";
document.getElementById("test").style.height = "100px";
document.getElementById("test3").style.display = "block";
}
else {
currentValue = "off";
document.getElementById("test").style.height= "20px";
document.getElementById("test3").style.display = "none";
}
}
Here you have a working fiddle.
I'm trying to create custom buttons for a media player. The tricky part is that I want the play button to become a "loading" button that will later become a pause button but anyways.
I'm using 4 divs - stop / play / loading / pause, the last two being hidden (display:none;). I want to display the loading div instead of the play div when you click on the latter (in addition to activating the player). Yet when I call lyricsPlay("B"),document.getElementById("lyrics" + el + "1") seems to be returning null.
The stop button closes the container div (a popup which will contain the player), and stops the player. This part works fine.
Being pretty much a newbie when it comes to javascript, I'm sure this is a stupid mistake on my part but I'm at a complete loss in finding where it is. I've read many posts about getElementById() returning null but none of the solutions seems to apply to my case.
Below is my HTML code, but you can fiddle with it here:
function lyricsToggle(div_id) {
var el = document.getElementById(div_id);
if (el.style.display == 'none') {
el.style.display = 'block';
} else {
el.style.display = 'none';
}
}
function lyricsStop(videoID, divID) {
lyricsToggle(divID);
//jQuery('#lyrics' + videoID).tubeplayer('stop');
}
function lyricsPlay(el) {
var play = document.getElementById("lyrics" + el + "1"); //returns null??
var load = document.getElementById("lyrics" + el + "2"); //returns null??
lyricsToggle(play);
lyricsToggle(load);
//jQuery(video).tubeplayer("play");
}
#container {
margin-top: 60px;
margin-right: 100px;
}
.lyricsPlay {
width: 30px;
height: 30px;
float: right;
background-color: green;
}
.lyricsStop {
width: 30px;
height: 30px;
float: right;
background-color: red;
}
.lyricsLoad {
width: 30px;
height: 30px;
float: right;
display: none;
background-color: blue;
}
.lyricsPause {
width: 30px;
height: 30px;
float: right;
display: none;
background-color: yellow;
}
<body>
<div id="container">
<div id="lyricsB0" class="lyricsStop" onClick="lyricsStop('B', 'container')">
stop
</div>
<div id="lyricsB1" class="lyricsPlay" onClick="lyricsPlay('B')">
play
</div>
<div id="lyricsB2" class="lyricsLoad" onClick="lyricsLoad('B')">
loading
</div>
<div id="lyricsB3" class="lyricsPause" onClick="lyricsPause('B')">
pause
</div>
</div>
</body>
You are passing a element as div_id already to lyricsToggle() with:
var play = document.getElementById("lyrics" + el + "1");// as div_id
lyricsToggle(play);
so no need to do this inside lyricsToggle(div_id):
var el = document.getElementById(div_id);
Try this:
function lyricsToggle(div_id) {
var el = div_id; // and not: var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
Fiddle