My HTML
<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<button id="button">button</button>
My js
var button = document.querySelector('#button');
var chapter = document.querySelectorAll('.chapter');
for(var i = 0; i < chapter.length; i++){
button.addEventListener('click', function(){
for(var i = 0; i < chapter.length; i++) {
chapter[i].classList.add('active');
}
});
}
This adds the class of "active" on clicking the button.
But toggle doesn't work. Instead of
chapter[i].classList.add('active');
When I do,
chapter[i].classList.toggle('active');
the class of "active" does not toggle. console shows no error.
So I tried to check the class of "active" first & remove the class if the class exists. I know I was trying to reinvent the toggle function; as stated above, toggle wasn't working so I tried it anyway.
if (chapter[i].contains('active')){
chapter[i].classList.remove('active');
And I got a slew of error messages. This is as far as I got. I somehow felt that this wasn't going to work but just tried it anyway.
I am stumped.
Can anyone point out why classList.toggle isn't working in my code & how this can be fixed?
Thanks.
You have one too many loop. Remove the outer one:
var button = document.querySelector('#button');
var chapter = document.querySelectorAll('.chapter');
button.addEventListener('click', function(){
for(var i = 0; i < chapter.length; i++) {
chapter[i].classList.toggle('active');
}
});
.active{
color: red;
}
<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<button id="button">button</button>
var button = document.querySelector('#button');
var chapters = document.querySelectorAll('.chapter');
button.addEventListener('click', function(){
for(var index = 0; index < chapters.length; index++) {
if(chapters[index].classList.contains('active')){
chapters[index].classList.remove('active');
}else{
chapters[index].classList.add('active');
}
}
});
.active {
color: red;
}
<div class="chapter">text text text </div>
<div class="chapter">text text text </div>
<button id="button">Toggle Color</button>
Related
I got problem with my accordion script. I'm trying to create accordion looking like this in screen
var accordionItem = document.querySelectorAll('.accordion-item');
var accordionContent = document.querySelectorAll('.accordion-item_content');
var accordionButton = document.querySelectorAll('.accordion-btn');
for (i = 0; i < accordionButton.length; i++) {
accordionButton[i].addEventListener('click', () => {
accordionContent[i].classList.add('opnen')
})
}
<div class="accordion-item">
<div class="accordion-item_header">
<h3>Experience</h3>
<button class="accordion-btn">+</button>
</div>
<div class="accordion-item_content container">
</div>
</div>
After click on my button i got console error
I want to open my content box after clicking only button in accordion header div. How to do it?
Issue:
Your i variable is globallly scoped, therefore at the time you click it — its value already incremented to 1 - and there's no such accordionContent[1] element.
Solution:
Scope your variable using the let keyword: let i = 0;
var accordionItem = document.querySelectorAll('.accordion-item');
var accordionContent = document.querySelectorAll('.accordion-item_content');
var accordionButton = document.querySelectorAll('.accordion-btn');
for (let i = 0; i < accordionButton.length; i++) {
accordionButton[i].addEventListener('click', () => {
accordionContent[i].classList.add('open');
});
}
.accordion-item_content { display: none; }
.accordion-item_content.open { display: block; }
<div class="accordion-item">
<div class="accordion-item_header">
<h3>Experience</h3>
<button class="accordion-btn" type="button" aria-label="Toggle content">+</button>
</div>
<div class="accordion-item_content container">content here</div>
</div>
Anyways, I might suggest you another way to implement the desired, and that's by using data-* attribute selectors like in this related answer: Toggle elements on buttons click or Dropdown Menu Toggle
Or by using the Details element
<details>
<summary>Experience</summary>
content here
</details>
How do I change the text of all elements in a class
If the element is in a division do I need to do anything else?
P.S. I hardly know js so plz help.
enter image description here
You can use querySelectorAll and with a foreach set the new text:
const examples = document.querySelectorAll('.example');
examples.forEach(example => {
example.innerHTML = 'new text';
});
<div class="example">
text 1
</div>
<div class="example">
text 2
</div>
I hope these examples can help you
function myFunction()
{
x=document.getElementsByClassName("infoblock"); // Find the elements
for(var i = 0; i < x.length; i++){
x[i].innerText="text changed!"; // Change the content
}
}
function myFunction2()
{
x=document.getElementsByClassName("notationgrade"); // Find the first span elements
y=document.getElementsByClassName("percentgrade"); // Find the second span elements
for(var i = 0; i < x.length; i++){
x[i].innerText="text 1 changed!"; // Change the content
}
for(var i = 0; i < y.length; i++){
y[i].innerText="text 2 changed!"; // Change the content
}
}
<body>
<div class="class-stats fsClassStatsAverage">
<p><span class="infoblock notationgrade">old text 1 </span></p>
<p> <span class="infoblock percentgrade">old text 2</span></p>
</div>
<button type="button" onclick="myFunction()">Change All Spans</button>
<button type="button" onclick="myFunction2()">Change Each Span</button>
</body>
Here is the concept of my content being shown/hidden. It also works.
https://jsfiddle.net/mplungjan/a7Lfjsgh/
It works in the small html code above. However, it does not work when I apply it to my larger HTML code. Does someone know why?
My goal is to have many list items with spans attached to the reveal answers button.
HTML:
<nav class="Rightbox" id="RightFrench">
<div id="Stage1">
<h1>Stage 1</h1>
<h5> <span class="HighlightBlue">Exercise 1 - </span></h5>
<h5><button class="AnswerTitle" id="AnswersFrenchStage1Ex1">Reveal Answers</button></h5>
<p class="Task">
<span class="HighlightBlue">Translate the following</span>
</p>
<ul>
<li>
<p> the passeport <textarea></textarea>
<span class="FrenchStage1Ex1">la passeport</span>
</p>
</li>
<li>
<p>the passeport <textarea></textarea>
<span class="FrenchStage1Ex1">la passeport</span>
</p>
</li>
</div>
</nav>
Javascript:
window.onload = function() {
var buttons = document.querySelectorAll(".AnswerTitle");
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function() {
var id = this.id.replace(/reveal/, "FrenchStage");
var answers = document.querySelectorAll("." + id);
for (var i = 0; i < answers.length; i++) {
answers[i].style.display = answers[i].style.display == "inline" ? "none" : "inline";
}
}
}
}
CSS:
.Rightbox ul li p span {display:none;}
the problem turns out to be I changed the id of the button, thinking that the javascript was not using the button id. turns out the
var id = this.id.replace(/reveal/, "FrenchStage")
really wanted the button to have an ID containing "reveal"
This code is supposed to be looping and adding multiple divs, but it isn't working. When I click it, only one div appears. If I click again, nothing happens.
<body>
<div class="start" >
<div id = "coba">
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function () {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
Thanks for your help
Your code does not work because you did not do anything with the variable "i" in the for statement. If you look at the fiddles of user2181397 & meghan Armes you will see how they added a line in the script to put it to work.
I tested the below in my IDE and it works just fine:
<body>
<div class="start" style="margin-top:50px; color:black;">
<div id = "coba">
<p>Click Me</p>
</div>
<div id = "cobi">
</div>
</div>
<script>
var divs = document.getElementById("coba").addEventListener("click", function() {
for (var i = 1; i < 100; i++) {
var di = document.createElement('div');
di.innerHTML=i;
document.getElementById('coba').appendChild(di);
}
});
</script>
</body>
I have some links that will show a div when clicking it. When clicking another link, it should show the link's associated div and hide the previously shown div.
HTML
Text 1
Text 2
Text 3
<div id="text1" class="unhidden">
This will show up when the Text 1 link is pressed.
</div>
<div id="text2" class="hidden">
This will show up when the Text 2 link is pressed.
</div>
<div id="text3" class="hidden">
This will show up when the Text 3 link is pressed.
</div>
Javascript
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className='unhidden';
}
}
CSS
.hidden { display: none; }
.unhidden { display: block; }
How can I accomplish this?
Try with:
function unhide(divID) {
var unhidden = document.getElementsByClassName('unhidden');
for (var k in unhidden) {
unhidden[k].className='hidden';
}
var item = document.getElementById(divID);
if (item) {
item.className='unhidden';
}
}
You can do something like this :
function unhide(divID) {
var divs = document.getElementsByTagName('div');
foreach(var div in divs){
div.className = 'hidden';
if(div.id == divID)
div.className = 'unhidden';
}
}
Be careful with document.getElementsByTagName('div');, it will return you all divs on your document. You could adapt it using a wrapper.
For example :
HTML
<div id="wrapper">
<div id="text1" class="unhidden">
This will show up when the Text 1 link is pressed.
</div>
<div id="text2" class="hidden">
This will show up when the Text 2 link is pressed.
</div>
<div id="text3" class="hidden">
This will show up when the Text 3 link is pressed.
</div>
</div>
JS :
var divs = document.getElementById('wrapper').getElementsByTagName('div');
Try this http://jsfiddle.net/L79H7/1/:
function unhide(divID) {
var divIds = [ "text1", "text2", "text3" ];
for ( var i = 0, len = divIds.length; i < len; i++) {
var item = document.getElementById(divIds[i]);
if (item) {
item.className = divID == divIds[i] ? 'unhidden' : 'hidden';
}
}
}
You could also store in an array the names of the divs you want to hide and iterate over it when unhiding one:
var divs= new Array("text1", "text2", "text3");
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className='unhidden';
}
for (var i in divs){
if (divs[i] != divID){
item = document.getElementById(divs[i]);
if (item) {
item.className='hidden';
}
}
}
}
JSFiddle
You don't need exactly links for this, but if you insist change it to:
<a href="#" onclick='unhide("text3");'>Text 3</a>
Otherwise you can change it to:
<p onclick="unhide('text1')">Text 1</p>
<p onclick="unhide('text2')">Text 2</p>
<p onclick="unhide('text3')">Text 3</p>
<div id="text1" class="unhidden">
This will show up when the Text 1 link is pressed.
</div>
<div id="text2" class="hidden">
This will show up when the Text 2 link is pressed.
</div>
<div id="text3" class="hidden">
This will show up when the Text 3 link is pressed.
</div>
And your function should look like this to add or remove classes:
function unhide(id){
yourElement = document.getElementById(id);
if(yourElement.className == "unhidden"){
yourElement.className = "hidden";
}else{
yourElement.className = "unhidden";
}
}
demo
<div id="text1" class="hidden"> 1 </div>
<div id="text2" class="hidden"> 2 </div>
<div id="text3" class="hidden"> 3 </div>
.hidden{ display:none; }
#text1{ display: block; }
function show(id) {
var item = document.getElementById(id);
var all = document.getElementsByClassName('hidden');
for(var i=0; i<all.length; i++)all[i].style.display = 'none';
if(item)item.style.display = 'block';
}
you can use jquery try the code below and import the jquery library first
$('#text1').show();
$('#text2').hide();
it is the easiest way