Develop Reference

change properties of two divs with one onclick and querySelectorAll()

I have multiple elements that are seperatet in two divs. The first div contains a Text and the second div a color.
When I click on one element the text and color should change and if I click it again it should change back.
The problem is that no matter which one I click, its always the last one which changes.
The HTML part:
<style>
.colorGreen {
background-color: green;
}
.colorRed {
background-color: red;
}
</style>
<div class="box2">Text1</div>
<div class="box1 colorGreen">O</div>
<div class="box2">Text1</div>
<div class="box1 colorGreen">O</div>
<div class="box2">Text1</div>
<div class="box1 colorGreen">O</div>
The JavaScript part:
<script type='text/javascript'>
var box1Temp = document.querySelectorAll(".box1");
var box2Temp = document.querySelectorAll(".box2");
for (var i = 0; i < box1Temp.length; i++) {
var box1 = box1Temp[i];
var box2 = box2Temp[i];
box2.onclick = box1.onclick = function() {
if (box1.classList.contains("colorGreen")) {
box1.classList.add("colorRed");
box1.classList.remove("colorGreen");
box2.innerHTML = "Text2";
} else {
box1.classList.add("colorGreen");
box1.classList.remove("colorRed");
box2.innerHTML = "Text1";
}
}
}
</script>
It works, when I use only one div.
Then I can use 'this', instead of the 'box1' variable, to addres the right element.
But if I replace 'box1' with 'this' its still the text div that changes.
(I know it's obvious that this is happening, but I'm lost)

With a few small tweaks, this can be written a lot more cleanly:
// Capture click event for parent container, .toggle-set
for (const ele of document.querySelectorAll(".toggle-set")) {
ele.addEventListener("click", function() {
// Grab text and color elements
const textToggle = ele.querySelector(".toggle-text");
const colorToggle = ele.querySelector(".toggle-color");
// Toggle text
// NOTE: This could use further refinement with regex or something similar to strip whitespace before comparison
textToggle.textContent = textToggle.textContent == "Text1" ? "Text2" : "Text1";
// Toggle css classes
colorToggle.classList.toggle("colorGreen");
colorToggle.classList.toggle("colorRed");
});
}
.colorGreen { background-color: green; }
.colorRed { background-color: red; }
<div class="toggle-set">
<div class="toggle-text">Text1</div>
<div class="toggle-color colorGreen">
O
</div>
</div>
<div class="toggle-set">
<div class="toggle-text">Text1</div>
<div class="toggle-color colorGreen">
O
</div>
</div>

Your code is so confused
You were right for the this option.
you can do with simple onclick function :
function change(el){
box1 = el.querySelector('.box1');
box2 = el.querySelector('.box2');
if (box1.classList.contains("colorGreen")) {
box1.classList.add("colorRed");
box1.classList.remove("colorGreen");
box2.innerHTML = "Text2";
} else {
box1.classList.add("colorGreen");
box1.classList.remove("colorRed");
box2.innerHTML = "Text1";
}
}
<style>
.colorGreen {
background-color: green;
}
.colorRed {
background-color: red;
}
</style>
<div onclick="change(this)">
<div class="box2">Text1</div>
<div class="box1 colorGreen">O</div>
</div>
<div onclick="change(this)">
<div class="box2">Text1</div>
<div class="box1 colorGreen">O</div>
</div>
<div onclick="change(this)">
<div class="box2">Text1</div>
<div class="box1 colorGreen">O</div>
</div>

I think following code snippet would help you to get your desired result
let box1 = document.querySelectorAll(".box1");
let box2 = document.querySelectorAll(".box2");
box1.forEach((b1,i) => {
b1.addEventListener("click",(ev) => {
ev.target.classList.toggle("colorGreen");
ev.target.classList.toggle("colorRed");
console.log(box2[i]);
if(ev.target.classList.contains("colorGreen")){
box2[i].textContent = "Text1";
}else{
box2[i].textContent = "Text2"
}
})
})

Javascript, Open/Close function

I'm very new to using Javascript and i'm struggling how I can achieve what I am after. I've created 4 buttons using;
<input type="button" name="answer" value="Brave" onclick="showDiv()">
My goal is that if you click on the button, it changes state and the div appears (got that far). If I click another button, i'd like the content to hide the previous div selected and show the one they had just clicked.
Any help/guidance would really be appreciated.
function showDiv() {
document.getElementById('BraveDiv').style.display = "block";
}
function showDiv1() {
document.getElementById('DeterminedDiv').style.display = "block";
}
function showDiv2() {
document.getElementById('CompassionateDiv').style.display = "block";
}
function showDiv3() {
document.getElementById('ConsiderateDiv').style.display = "block";
}
My aim is that if you was to click

function showDiv()
{
document.getElementById('new1').style.display = "block";
document.getElementById('Div1').style.display = "none";
document.getElementById('Div2').style.display = "none";
}
function showDiv1()
{
document.getElementById('Div1').style.display = "block";
document.getElementById('new1').style.display = "none";
document.getElementById('Div2').style.display = "none";
}
function showDiv2()
{
document.getElementById('Div2').style.display = "block";
document.getElementById('new1').style.display = "none";
document.getElementById('Div1').style.display = "none";
}

Your code attached won't achieve any of the results you're looking for, however, it's obvious what you're looking for.
You buttons should look like the following :
<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
Here, the role prevents the default behaviour of submit. The onclick tells the button what to do when you click it, and the "BraveDiv" is the parameter we will pass to the function, telling it which div to display.
The DIV associated with the above button, should look as follows :
<div id="BraveDiv" style="display: none;"> SOME CONTENT HERE </div>
Here you'll notice the ID is equal to the parameter we mentioned above.
And your JavaScript should work as follows :
<script>
function showDiv(elem){
document.getElementById(elem).style.display = "block";
}
</script>
I've attached a working snipped example as below, just click "Run code snippet" to view the snippet and test the code.
function showDiv(elem) {
document.getElementById(elem).style.display = "block";
}
<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
<button role="button" onclick="showDiv('CompassionateDiv')">Compassionate</button>
<div id="BraveDiv" style="display: none;"> SOME BRAVE CONTENT HERE </div>
<div id="CompassionateDiv" style="display: none;"> SOME COMPASSIONATE CONTENT HERE </div>
The above, however, will only SHOW YOUR DIVS.
The full jQuery solution to this (hide/show as per the tag) would be :
<script>
function showDiv(elem) { // When the button is pressed
$("div").each(function() { // For each Div
if ($(this).attr('id') != elem) { // If the Div's id is not equal to the parameter
$(this).css("display", "none");
} // HIDE IT
else {
$(this).css("display", "block"); // SHow It
});
</script>
If you are unfamiliar with jQuery and would prefer a JavaScript only solution, then :
<script>
function showDiv(elem){
var divsToCheck = ["BraveDiv", "CompassionateDiv"]; // Add to here to check more divs
for(let i = 0; i < divsToCheck.length; i++){
if(divsToCheck[i] == elem){
document.getElementById(divsToCheck[i]).style.display = "block";
}
else{
document.getElementById(divsToCheck[i]).style.display = "none";
}
}
</script>
Again I've attached a snippet below.
function showDiv(elem) {
var divsToCheck = ["BraveDiv", "CompassionateDiv"]; // Add to here to check more divs
for (var i = 0; i < divsToCheck.length; i++) {
if (divsToCheck[i] == elem) {
document.getElementById(divsToCheck[i]).style.display = "block";
} else {
document.getElementById(divsToCheck[i]).style.display = "none";
}
}
}
<button role="button" onclick="showDiv('BraveDiv')">Brave</button>
<button role="button" onclick="showDiv('CompassionateDiv')">Compassionate</button>
<div id="BraveDiv" style="display: none;"> SOME BRAVE CONTENT HERE </div>
<div id="CompassionateDiv" style="display: none;"> SOME COMPASSIONATE CONTENT HERE </div>

function showDiv() {
document.getElementById('BraveDiv').style.display = "block";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv1() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "block";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv2() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "block";
document.getElementById('ConsiderateDiv').style.display = "none";
}
function showDiv3() {
document.getElementById('BraveDiv').style.display = "none";
document.getElementById('DeterminedDiv').style.display = "none";
document.getElementById('CompassionateDiv').style.display = "none";
document.getElementById('ConsiderateDiv').style.display = "block";
}
This might not be the sleekest way of doing it, but will get you the results you want. As each button is pressed, all others will close.

You just need to set the display style of the remaining <div>s back to none. The simplest way to do this is to first set all of them to none, then the one you want visible to block:
Note: I’ve used a function which takes the id of the target <div> as a parameter to reduce the amount of code written, but you could easily copy-paste out to separate functions if you require.
function showDiv(divName) {
// First hide all the divs
document.getElementById('BraveDiv').style.display = 'none';
document.getElementById('DeterminedDiv').style.display = 'none';
document.getElementById('CompassionateDiv').style.display = 'none';
document.getElementById('ConsiderateDiv').style.display = 'none';
// Then show the div corresponding to the button clicked
document.getElementById(divName).style.display = 'block';
}
<input type="button" value="Brave" onclick="showDiv('BraveDiv')">
<input type="button" value="Determined" onclick="showDiv('DeterminedDiv')">
<input type="button" value="Compassionate" onclick="showDiv('CompassionateDiv')">
<input type="button" value="Considerate" onclick="showDiv('ConsiderateDiv')">
<div id="BraveDiv" style="display: none">BraveDiv</div>
<div id="DeterminedDiv" style="display: none">DeterminedDiv</div>
<div id="CompassionateDiv" style="display: none">CompassionateDiv</div>
<div id="ConsiderateDiv" style="display: none">ConsiderateDiv</div>
There are alternative ways of doing this which require less code, such as this method using a little CSS and document.querySelectorAll():
function showDiv(divName) {
// First remove the selected class from all divs in output-divs
document.querySelectorAll('#output-divs > .selected').forEach(element => {
element.classList.remove('selected');
});
// Then add it to the div corresponding to the button clicked
document.getElementById(divName).classList.add('selected');
}
.output-div:not(.selected) {
display: none;
}
<input type="button" value="Brave" onclick="showDiv('brave')">
<input type="button" value="Determined" onclick="showDiv('determined')">
<input type="button" value="Compassionate" onclick="showDiv('compassionate')">
<input type="button" value="Considerate" onclick="showDiv('considerate')">
<div id="output-divs">
<div class="output-div selected" id="brave">Brave</div>
<div class="output-div" id="determined">Determined</div>
<div class="output-div" id="compassionate">Compassionate</div>
<div class="output-div" id="considerate">Considerate</div>
</div>

$(document).ready(function() {
$("#btn1").click(function(){
showDiv('div1');
});
$("#btn2").click(function(){
showDiv('div2');
});
$("#btn3").click(function(){
showDiv('div3');
});
$("#btn4").click(function(){
showDiv('div4');
});
});
function showDiv(_divId){
$(".div-class").each(function() {
if(!$(this).hasClass('div-hide'))
$(this).addClass('div-hide');
});
$('#' + _divId).removeClass('div-hide');
}
.div-class {
min-height: 50px;
border: 1px solid #eee;
margin: 10px;
padding: 10px;
width: 100%;
}
.div-hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
<button id="btn4">Button 4</button>
<div id="div1" class='div-class div-hide'><h3>Div1 Content </h3></div>
<div id="div2" class='div-class div-hide'><h3>Div2 Content </h3></div>
<div id="div3" class='div-class div-hide'><h3>Div3 Content </h3></div>
<div id="div4" class='div-class div-hide'><h3>Div4 Content </h3></div>

What will I add to my code so that when I click the other buttons, the opened element automatically closes?

My code works but I have to double click the button I clicked just to close it. I would like that when I click the other button, the opened element automatically closes.
<div class="col- menu">
<ul>
<li>Picture</li>
<li>About</li>
<li>Size</li>
</ul>
</div>
<div class="content">
<p><span id="pic1"><img src="1.jpg"></span></p>
<p><span id="description" style="display: none;">Cool!</span></p>
<p><span id="size" style="display: none;"><img src="2.jpg"></span></p>
</div>
<script type="text/javascript">
function toggleStuff(id) {
if (document.getElementById(id).style.display == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>

You Can try this:
var stuffArr = ['pic1', 'description', 'size'];
function toggleStuff(id) {
stuffArr.forEach(function(currentId) {
if(currentId === id) {
document.getElementById(id).style.display = 'block';
} else {
document.getElementById(id).style.display = 'none';
}
});
}

You need to loop through all the id''s
Please note this is just demo code to give you an idea
function toggleStuff (id){
//get list of ids
var pic1 = document.getElementById ("pic1");
var size = document.getElementById ("size");
var idSize = 2;
var idArray = Array ("pic1","size");
for (var i = 0; i < idSize; i++){
if (idArray.indexOf (i) == id){
//display id
}else {
//hide id
}
}
}

One out of millions of possible solutions:
function toggleStuff(id) {
var el = document.getElementById(id)
el.classList.toggle('visible');
document.querySelectorAll('.togglable:not(#'+id+')').forEach(function(item) {
item.classList.remove('visible');
})
}
.togglable {
display: none;
}
.visible {
display: block;
}
<div class="col- menu">
<ul>
<li>Picture</li>
<li>About</li>
<li>Size</li>
</ul>
</div>
<div class="content">
<p><span id="pic1" class="togglable">PIC1</span></p>
<p><span id="description" class="togglable">DESCRIPTION</span></p>
<p><span id="size" class="togglable">SIZE</span></p>
</div>

Javascript only addEventListener to parent style both parent and child differently

Currently have a div that controls the width of an element as well as the background color. That div has a child div which has the content which is semi-transparent. Which is why I need the first div. So the background is solid.
Now, I added an event listener to the parent which expands the width of one and decreases the width of the other 2 so they all fit. However, when I click on the parent div I would like the child of that specific div to add a class and remove a class from the other 2. Which I can't seem to figure out. Here's the code. Sorry if my formatting is poor, first time posting on stack overflow and I've googled and searched everything for an answer and can't seem to find one.
var purchaseStepCont = document.querySelectorAll(".step-container");
var purchaseStep = document.querySelectorAll(".step");
for (var i = 0; i < purchaseStepCont.length; i++) {
purchaseStepCont[i].addEventListener("click", function() {
for (var i = 0; i < purchaseStepCont.length; i++) {
purchaseStepCont[i].classList.remove("stepContActive");
purchaseStepCont[i].classList.add("stepContDeactive");
this.classList.add("stepContActive");
this.classList.remove("stepContDeactive");
}
});
}
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>

You're very close. But if you want to add the class to the .step, you need this.firstElementChild.classList.add(...) rather than this.classList.add(...) (since this will be the .step-container, not the .step; but the .step is its first element child). Or for more markup flexibility, you could use this.querySelector(".step").
You can also use just a single event handler function rather than recreating it in the loop:
var purchaseStepCont = document.querySelectorAll(".step-container");
var purchaseStep = document.querySelectorAll(".step");
function clickHandler() {
var thisStep = this.firstElementChild; // Or this.querySelector(".step") would be more flexible
for (var i = 0; i < purchaseStep.length; i++) {
if (purchaseStep[i] === thisStep) {
purchaseStep[i].classList.add("stepContActive");
purchaseStep[i].classList.remove("stepContDeactive");
} else {
purchaseStep[i].classList.remove("stepContActive");
purchaseStep[i].classList.add("stepContDeactive");
}
}
}
for (var i = 0; i < purchaseStepCont.length; i++) {
purchaseStepCont[i].addEventListener("click", clickHandler);
}
.stepContActive {
color: blue;
}
.stepContDeactive {
color: #ddd;
}
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>
<div class="step-container">
<div class="step">
<h1>01.</h1>
<h3>words</h3>
<p>wods</p>
</div>
</div>
clickHandler could be a bit shorter if you don't need to support IE11:
function clickHandler() {
var thisStep = this.firstElementChild; // Or this.querySelector(".step") would be more flexible
for (var i = 0; i < purchaseStep.length; i++) {
purchaseStep[i].classList.toggle("stepContActive", purchaseStep[i] === thisStep);
purchaseStep[i].classList.toggle("stepContDeactive", purchaseStep[i] !== thisStep);
}
}
But IE11 doesn't support the second argument to classList.toggle.

How can i make an image set a class to display:none and then set a specific id to display:inline

I'm trying to create a function that hides a class of divs then shows one of those divs by it's id. Here is what I have but I'm not sure if this is the right way to do it. If there is a better way I'm open to it, or if someone can identify an error in this code. What I would like is for the page to load with none of the bio classes visible, then when an image is clicked the bio with the corresponding id appears in its place. Searching only gave me this answer which did not help me. The code below has the bio class divs invisible when the page loads, the image can be clicked but the div does not appear on click. Hopefully this all makes sense.
.bio {
display: none;
}
#id1 {
display: none;
}
#id2 {
display: none;
}
<script language="JavaScript">
function setVisibility(name, id) {
document.getElementByClassName(name).style.display = "none";
document.getElementById(id).style.display = "inline";
}
</script>
<input type="image" src="name1_staff.jpg" onclick="setVisibility('bio', 'id1');" ;>
<input type="image" src="name2_staff.jpg" onclick="setVisibility('bio', 'id2');" ;>
<div class="bio" id="id1">
<h3>text</h3>
<p>more</p>
</div>
<div class="bio" id="id2">
<h3>text</h3>
<p>more</p>

It's wrong way I think. Let's do so:
function removeHidden(className)
{
var classes = className.split(' ');
var newClasses = [];
while (classes.length > 0) {
var name = classes.shift();
if (name != 'hidden' && newClasses.indexOf(name) < 0) {
newClasses.push(name);
}
}
return newClasses.join(' ');
}
function addHidden(className)
{
return removeHidden(className) + ' hidden';
}
function setVisibility(name, id)
{
var x = document.getElementsByClassName(name);
var i;
for (i = 0; i < x.length; i++) {
if (x[i].id == id) {
x[i].className = removeHidden(x[i].className);
} else {
x[i].className = addHidden(x[i].className);
}
}
}
setVisibility('bio', 'id1');
.bio {
/* don't put here display: none */
/* you can delete it if you have no other styles */
}
.hidden {
display: none;
}
<input type="image" src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png" onclick="setVisibility('bio', 'id1');" ;>
<input type="image" src="http://www.hanselman.com/blog/content/binary/WindowsLiveWriter/Hans.NETMVCJeffAtwoodandhistechnicalteam_1349C/stackoverflow-logo-250_3.png" onclick="setVisibility('bio', 'id2');" ;>
<div class="bio" id="id1">
<h3>FIRST DESCRIPTION</h3>
<p>description description description description description</p>
</div>
<div class="bio" id="id2">
<h3>SECOND DESCRIPTION</h3>
<p>description description description description description</p>
</div>

Try this
<script type="text/javascript">
function setVisibility(name, id) {
var x = document.getElementsByClassName(name);
var i;
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(id).style.display = "inline";
}
</script>
<input type="image" src="name1_staff.jpg" onclick="setVisibility('bio', 'id1');">
<input type="image" src="name2_staff.jpg" onclick="setVisibility('bio', 'id2');">
<div class="bio" id="id1">
<h3>text</h3>
<p>more</p>
</div>
<div class="bio" id="id2">
<h3>text</h3>
<p>more</p>
</div>

Try using the visibility property. In this case, you won't have to deal with your .bio container. You can simply focus on showing and hiding your content. See here.
Keep in mind: With your solution you're setting your containers are always visible. You may also attach a visible property to your container to not get a blank space (if you trigger your 2nd button first).