I have this HTML:
<div>
<button type="button" id="a"></button>
</div>
<div>
<button type="button" id="b"></button>
</div>
<div>
<button type="button" id="c"></button>
</div>
<div class="hidden" id="a1">
<p>text1</p>
</div>
<div class="hidden" id="b1">
<p>text2</p>
</div>
<div class="hidden" id="c1">
<p>text3</p>
</div>
<div class="hidden" id ="content">
<p>text4</p>
</div>
and CSS:
.hidden {
display: none}
.shows {
display: block}
I want that if I press "a" shows "a1" and "content", b shows "b1" and "content"...
const a = document.getElementById("a")
const b = document.getElementById("b")
const c = document.getElementById("c")
const a1 = document.getElementById("a1")
const b1 = document.getElementById("b1")
const c1 = document.getElementById("c1")
const content = document.getElementById("content")
a.addEventListener('click', function (event) {
if (content.className === "hidden") {
content.className += " shows";
}
if (a1.className === "hidden") {
a1.className += " shows";
} else {
a1.className = "hidden";
}
b.addEventListener('click', function (event) {
if (content.className === "hidden") {
content.className += " shows";
}
if (b1.className === "hidden") {
b1.className += " shows";
} else {
b1.className = "hidden";
}
c.addEventListener('click', function (event) {
if (content.className === "hidden") {
content.className += " shows";
}
if (c1.className === "hidden") {
c1.className += " shows";
} else {
c1.className = "hidden";
}
but i want that when i press one button and all buttons are hidden "content" is hidden too, i know a way to make this is adding this code of each "click"
if (a1.className === "hidden" && b1.className === "hidden" && c1.className === "hidden") {
content.classList.remove("shows");
}
Nut I need another way to make it because I have to add a button each x days... may be adding an array with all buttons
const d1 = [a1, b1, c1]
and add a for in each "click" but I don't know how to do it.
Your question isn't completely clear. Do you mean something like this?
[...document.querySelectorAll("button")].forEach(function(button) {
button.addEventListener("click", function(evt) {
var element = document.getElementById(event.target.id + "1")
if (element.style.display == "block") {
element.style.display = "none";
} else {
element.style.display = "block";
document.getElementById("content").style.display = "block";
}
if (document.getElementById("a1").style.display == "none" && document.getElementById("b1").style.display == "none" && document.getElementById("c1").style.display == "none") {
document.getElementById("content").style.display = "none"
}
})
})
<div>
<button type="button" id="a">a</button>
</div>
<div>
<button type="button" id="b">b</button>
</div>
<div>
<button type="button" id="c">c</button>
</div>
<div id="a1" style="display:none;">
<p>text1</p>
</div>
<div id="b1" style="display:none;">
<p>text2</p>
</div>
<div id="c1" style="display:none;">
<p>text3</p>
</div>
<div id="content" style="display:none;">
<p>text4</p>
</div>
Related
I want my function(dropFunction(), which makes the div #dropdownList appear) to run on the first click of my button(#drop-btn), however, I must click it twice for the function to run, but only the first time. After this first double click, it runs as it should. How do I make it so it runs on the first click, rather than the second this first time?
CSS:
function dropFunction() {
var x = document.getElementById("dropdownList")
if (x.style.display === "none") {
x.style.display = "block"
} else {
x.style.display = "none"
}
}
#dropdownList {
display:none;
}
<div class="dropdown">
<button onclick = "dropFunction()" class="drop-btn">Menu</button>
<div id="dropdownList">
Link 1
Link 2
Link 3
</div>
</div>
You have to use window.getComputedStyle(x) to get the value from the CSS
function dropFunction() {
var x = document.getElementById("dropdownList")
if (window.getComputedStyle(x).display === "none") {
x.style.display = "block"
} else {
x.style.display = "none"
}
}
#dropdownList {
display:none;
}
<div class="dropdown">
<button onclick = "dropFunction()" class="drop-btn">Menu</button>
<div id="dropdownList">
Link 1
Link 2
Link 3
</div>
</div>
You can use 2 solutions.
1.
if(x.style.display === "none")
=>
if(window.getComputedStyle(x).display === "none")
or
2.
<div id="dropdownList">
=>
<div id="dropdownList" style="display: none;">
function dropFunction() {
var x = document.getElementById("dropdownList")
if (window.getComputedStyle(x).display === "none") {
x.style.display = "block"
} else {
x.style.display = "none"
}
}
#dropdownList {
display:none;
}
<div class="dropdown">
<button onclick = "dropFunction()" class="drop-btn">Menu</button>
<div id="dropdownList">
Link 1
Link 2
Link 3
</div>
</div>
function dropFunction() {
var x = document.getElementById("dropdownList")
if (x.style.display === "none") {
x.style.display = "block"
} else {
x.style.display = "none"
}
}
#dropdownList {
display:none;
}
<div class="dropdown">
<button onclick = "dropFunction()" class="drop-btn">Menu</button>
<div id="dropdownList" style="display:none;">
Link 1
Link 2
Link 3
</div>
</div>
I want to hide prev btn and the other words
But I want to show them and prev btn one by one when I press next button and display finish btn i am on the latest word.
The buttons, prev, next and finish do the things which are not the same when I have finish button I want to post the words.
I tried many time but not worked. Here is my code that I've tried:
function nextBtn() {
var itemOne = document.getElementById("step-1");
var itemTwo = document.getElementById("step-2");
var itemThree = document.getElementById("step-3");
var itemFour = document.getElementById("step-4");
var prevBtn = document.getElementById("prevBtn");
var nextBtn = document.getElementById("nextBtn");
if (itemOne.style.display == "block" && itemTwo.style.display == "none" && prevBtn.style.display == "none") {
itemOne.style.display = "none";
itemTwo.style.display = "block";
prevBtn.style.display = "block";
}
else {
console.log('Xatolik ishlamayapti');
}
}
#step-1 {
display: block;
}
#step-2 {
display: none;
}
#step-3 {
display: none;
}
#step-4 {
display: none;
}
#prevBtn {
display: none;
}
#nextBtn {
display: block;
}
<div class="step-container">
<div id="step-1">Hello</div>
<div id="step-2">Hi</div>
<div id="step-3">Salom</div>
<div id="step-4">Molas</div>
<button id="prevBtn" #click="prevBtn()">back</button>
<button id="nextBtn" #click="nextBtn()">next</button>
</div>
What's wrong at above link.
Thank you in advance.
The main problem with your approach is that itemOne.style.display == "block" will not evaluate to true because it doesn't consider that the node has some css set externally.
It would make more sense to use html classes for your step divs so that you can select them all at once with querySelectorAll().
The logic would be easier to manage if you use a variable to track which number step is the current step.
Then you can just increase and decrease the variable each time you click on either the previous or next buttons.
const allSteps = document.querySelectorAll('.step')
const totalSteps = allSteps.length
const prevButton = document.querySelector('#prevBtn')
const nextButton = document.querySelector('#nextBtn')
const finishButton = document.querySelector('#finishBtn')
// Hide everything except for #step-1
document
.querySelectorAll(".step:not(#step-1)")
.forEach(step => (step.style.display = "none"))
// Hide the prev button
prevButton.style.display = 'none'
// Hide the finish button
finishButton.style.display = 'none'
let currentStep = 1
function nextBtn() {
currentStep++;
refreshDisplay()
}
function prevBtn() {
currentStep--;
refreshDisplay()
}
function refreshDisplay() {
// hide every step
allSteps.forEach(step => (step.style.display = "none"))
// show only the currentStep
document.querySelector(`#step-${currentStep}`).style.display = 'block'
// hide or show the prevButton
if (currentStep === 1) {
prevButton.style.display = 'none'
} else {
prevButton.style.display = 'inline-block'
}
// hide or show nextButton & finish button
if (currentStep === totalSteps) {
nextButton.style.display = 'none'
finishButton.style.display = 'inline-block'
} else {
nextButton.style.display = 'inline-block'
finishButton.style.display = 'none'
}
}
function finish() {
console.log('you are finished')
}
<div class="step-container">
<div class="step" id="step-1">Hello</div>
<div class="step" id="step-2">Hi</div>
<div class="step" id="step-3">Salom</div>
<div class="step" id="step-4">Molas</div>
<button id="prevBtn" onclick="prevBtn()">back</button>
<button id="nextBtn" onclick="nextBtn()">next</button>
<button id="finishBtn" onclick="finish()">finish</button>
</div>
Something like this?
var activeButton = 0;
function next() {
document.getElementById(activeButton).classList.remove('active');
activeButton++;
document.getElementById(activeButton).classList.add('active');
}
function previous() {
document.getElementById(activeButton).classList.remove('active');
activeButton--;
document.getElementById(activeButton).classList.add('active');
}
.step {
display: none;
}
.active {
display: inline;
}
<button id="0" class="active step">First</button>
<button id="1" class="step">Second</button>
<button id="2" class="step">Third</button>
<button id="3" class="step">Fourth</button>
<button id="4" class="step">Fifth</button>
<button id="5" class="step">Sixth</button>
<button id="6" class="step">Seventh</button>
<hr>
<button id="next" onclick="next()">Next</button>
<button id="next" onclick="previous()">Previous</button>
I have come up with this not very nice solution for having 7 buttons and information appearing in a div. However I would like the open div to close when a new button is clicked. also my solution is very repetition.
javascript code ...lengthy solution for accessing each div with each button...working separately
function myRoot() {
var x = document.getElementById("root");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function mySacral() {
var x = document.getElementById("sacral");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function mySolar() {
var x = document.getElementById("solar");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myHeart() {
var x = document.getElementById("heart");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myThroat() {
var x = document.getElementById("throat");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myBrow() {
var x = document.getElementById("brow");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function myCrown() {
var x = document.getElementById("crown");
if (x.style.display !== "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<script src="Myscript.js"></script>
<div class="chakra">
<button class="chbtn" onclick="myRoot()"><img src="Images/root.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="mySacral()"><img src="Images/sacral.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="mySolar()"><img src="Images/solar.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="myHeart()"><img src="Images/heart.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="myThroat()"><img src="Images/throat.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="myBrow()"><img src="Images/brow.png"></button>
</div>
<div class="chakra">
<button class="chbtn" onclick="myCrown()"><img src="Images/crown.png"></button>
</div>
</div>
<div class="pic-holder">
<h3>Chakra information</h3>
<div class="info" id="root"><img src="Images/root.png"> The root Chakra</br>
<p>Lorem </p>
<p>Lorem ipsum, dolor sit </p>
</div>
<div class="info" id="sacral"><img src="Images/sacral.png"> The sacral Chakra</br>
<p>Lorem blah blahipsum blah blah</p>
</div>
so.. here is a simple code to show how to proceed, with a small css part
var
Elm_Id_Block = '',
elms_xx = document.querySelectorAll('#elmsGroup > div')
;
// init
elms_xx[0].style.display = "block";
Elm_Id_Block = elms_xx[0].id;
document.querySelector("#buttonsGroup").onclick = function (e) {
if (!e.target.matches('button')) return;
e.stopPropagation();
let ref = e.target.dataset.ref;
if (ref != Elm_Id_Block) {
document.getElementById(ref).style.display = "block";
document.getElementById(Elm_Id_Block).style.display = "none";
Elm_Id_Block = ref;
}
}
#elmsGroup>div {
display: none;
width: 300px;
height: 30px;
padding: 5px;
border: 1px solid lightblue;
margin: 5px;
}
<div id="buttonsGroup">
<button data-ref="elm-A">A</button>
<button data-ref="elm-B">B</button>
<button data-ref="elm-C">C</button>
<button data-ref="elm-D">D</button>
<button data-ref="elm-E">E</button>
</div>
<div id="elmsGroup">
<div id="elm-A"> elm-A </div>
<div id="elm-B"> elm-B </div>
<div id="elm-C"> elm-C </div>
<div id="elm-D"> elm-D </div>
<div id="elm-E"> elm-E </div>
</div>
Here is my function. I want to switch from one div to another. I am getting this to happen but only for a quick second then it returns back to the first div.
function NextDiv()
{
var div = document.querySelectorAll("#div0>div");
for (var i = 0; i < div.length; i++)
{
if (div[i].style.display != "none")
{
div[i].style.display = "none";
if (i == div.length - 1)
{
div[0].style.display = "block";
}
else
{
div[i + 1].style.display = "block";
}
return false;
}
}
}
here is a testable fiddle: https://jsfiddle.net/pnumtc35/5/
at the line where you do div[i+1] the new div gets shown. but on the next iteration of your for-loop it get immediately hidden again. Thats why i added a break to stop the loop.
function NextDiv()
{
console.log('click');
var div = document.querySelectorAll("#div0>div");
for (var i = 0; i < div.length; i++)
{
if (div[i].style.display != "none")
{
div[i].style.display = "none";
if (i == div.length - 1)
{
div[0].style.display = "block";
}
else
{
div[i + 1].style.display = "block";
break; // ADDED
}
}
}
}
<div id="div0">
<div class="column" id="div1" >
<h2>Customer Information </h2>
<button runat="server" id="nextbutton" onclick="NextDiv()" >Next </button>
</div>
<div class="column" id="div2" style="display: none;">
<h2>Payment Information</h2>
<button runat="server" id="Button1" onclick="NextDiv()">Next </button>
</div>
<div class="column" id="div3" style="display: none;">
<h2>Shipment Information</h2>
<Button ID="btn1" runat="server" Text="Save" onclick="SaveInfo"/>
</div>
</div>
I'm trying to hide/show a div based on the click of a button but I can't get it to work.
Below is my code. I can get the alert to see that I'm getting the right ID from the DOM, but I can't show/hide the div content.
function toggleContent(id) {
var e = document.getElementById(id);
//if(e.style.display == null || e.style.display == "none")
if (e.style.visibility == null || e.style.visibility == "hidden") {
//e.style.display = "block";
e.style.visibility: "visible";
} else {
//e.style.display = "none";
e.style.visibility: "hidden";
}
}
<form>
<button onclick="alertData();">Get Alerts</button>
<button onclick="toggleContent('chart');">Chart</button>
<hr>
<div id="chart" style="visibility: hidden;">
my chart
</div>
</form>
You need to set e.style.visibility using =, not : as you would in a CSS file.
In addition, note that the value null is equivalent to visible, not hidden.
function toggleContent(id) {
var e = document.getElementById(id);
if (e.style.visibility == "hidden") {
e.style.visibility = "visible";
} else {
e.style.visibility = "hidden";
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<button onclick="alertData();">Get Alerts</button>
<button onclick="toggleContent('chart');">Chart</button>
<hr>
<div id="chart" style="visibility: hidden;">
my chart
</div>
</form>
function toggleContent(id) {
event.preventDefault();
var e = document.getElementById(id);
e.style.visibility=="hidden" || e.style.visibility=="" ? e.style.visibility="visible": e.style.visibility="hidden";
}
#chart{visibility:hidden;}
<form>
<button onclick="toggleContent('chart');">Chart</button>
<hr>
<div id="chart">
my chart
</div></form>