I have a problem to toggle between 4 color classes.
I trying to change color everytime this function is used.
function changeBackground() {
var all = getSelected();
var blue = document.getElementsByClassName("blue");
for (var i = 0; i < all.length; i++) {
all[i].classList.add("green");
all[i].classList.remove("blue");
}
var red = document.getElementsByClassName("red");
for (var i = 0; i < red.length; i++) {
all[i].classList.add("blue");
all[i].classList.remove("red");
}
var yellow = document.getElementsByClassName("yellow");
for (var i = 0; i < yellow.length; i++) {
all[i].classList.add("red");
all[i].classList.remove("yellow");
}
for (var i = 0; i < all.length; i++) {
all[i].classList.add("yellow");
all[i].classList.remove("green");
}
}
getSelected returns document.getElementsByClassName("selected");
and make sure only divs who are selected do change background.
Html looks like this: <div id="box1" class="box center green size200"></div>
Works well untill it comes to blue->green and the classes won't be removed.
How do i solve this?
Please check this https://jsfiddle.net/maflorezp/1u3xjxaq/1/
You have some errors walking the elements and you need validate class before change
function changeBackground() {
var all = getSelected();
for (var i = 0; i < all.length; i++) {
var color = all[i].classList;
if(color.contains("blue")){
all[i].classList.add("green");
all[i].classList.remove("blue");
} else if(color.contains("red")){
all[i].classList.add("blue");
all[i].classList.remove("red");
} else if(color.contains("yellow")){
all[i].classList.add("red");
all[i].classList.remove("yellow");
} else if(color.contains("green")){
all[i].classList.add("yellow");
all[i].classList.remove("green");
}
}
}
I see a few issues with your code:
1- You loop on all of the boxes for each color. You should replace
for (var i = 0; i < blue.length; i++) {
all[i].classList.add("green");
all[i].classList.remove("blue");
}
by
for (var i = 0; i < blue.length; i++) {
blue[i].classList.add("green");
blue[i].classList.remove("blue");
}
2- You should select all your divs before making any modification, to make sure you only select the one that were that color before starting the function.
var blue = document.getElementsByClassName("blue");
var red = document.getElementsByClassName("red");
var yellow = document.getElementsByClassName("yellow");
var green = document.getElementsByClassName("green");
3- You currently use getSelected to get all the selected divs but then you run the code on every element of the document.
I think instead of using 4 loops, you should only create one and check the class for each elemnts of all, it would resolve a lot of you issues. Something like:
function changeBackground() {
var all = getSelected();
for (var i = 0; i < all.length; i++) {
var colorBlue = all[i].classList.contains("blue")
var colorRed = all[i].classList.contains("red")
var colorGreen = all[i].classList.contains("greed")
var colorYellow = all[i].classList.contains("yellow")
if(colorBlue){
all[i].classList.add("green");
all[i].classList.remove("blue");
}
//check other colors here the same way
}
}
Related
i want to write a short code i have multi contenteditable divs and i use a function to put the value of the div to a textarea please check with me
var myContentArr = ["myContent1", "myContent2", "myContent3", "myContent4", "myContent5", "myContent6"];
var hiddenArr = ["hidden1", "hidden2", "hidden3", "hidden4", "hidden5", "hidden6"];
function myFunction(){
for (var i = 0; i < hiddenArr.length; i++) {
document.getElementById(hiddenArr[i]).value =
for (var i = 0; i < myContentArr.length; i++) {
document.getElementById(myContentArr[i]).innerHTML
}
}
return true;
}
I wanted to make a specific form show and the other forms disappear when I click on one of four dropdown buttons. When I tested the code, no from is showing when I clicked on a button.
Here is my javascript code:
function showClass(className)
{
var allItems = document.getElementsByClassName('change-form');
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
It shows the form if I remove the top for loop.
Edit: Sorry guys I made a typo
Your code is going in and hiding all the items and then showing them right away. What you want to do is split the hide and show into different functions to trigger them at different times.
function showClass(className)
{
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
function hideClass(className){
var allItems = document.getElementsByClassName(className);
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
}
If you want to be able to swap them with one function you could use this:
function swapHide(className){
var firstItem = document.getElementsByClassName(className)[0];
var isDisplayed = firstItem.style.display == "block"
if(isDisplayed){
hideClass(className);
}else{
showClass(className)
}
}
How to rewrite this code from jQuery to vanilla JavaScript? I need to see how many checkboxes are checked. The problem is I do not know how to remove unchecked checkboxes from the total score.
$(function () {
var countChecked = function () {
var n = $("input:checked").length;
$(".output").text(n);
};
countChecked();
$("input[type=checkbox]").on("click", countChecked);
});
What should I do next?
var box = document.querySelectorAll('form input');
var par = document.querySelector('.output');
var great = 0;
for (var i = 0; i < box.length; i++) {
box[i].addEventListener('click', countIt);
function countIt() {
for (var i = 0; i < box.length; i++) {
if ( box[i].checked ) {
great++
par.innerHTML = great;
return
}
}
}
}
You need to reset the great variable each time you count (for example by moving it inside the countIt function).
var box = document.querySelectorAll('form input');
var par = document.querySelector('.output');
function countIt() {
var great = 0;
for (var i = 0; i < box.length; i++) {
if (box[i].checked) {
great++;
}
}
par.innerHTML = great;
}
for (var i = 0; i < box.length; i++) {
box[i].addEventListener('click', countIt);
}
You can also move the countIt function definition out of the loop and the same with innerHTML setting.
I'm trying to create a tabbed interface in Javascript which will allow a user to click on a button atop each interface in order to make the div under it become active while the other 'tabs'/divs recede to the background. I'm not quite sure I got that out right so attached is a screenshot of what I'm trying to make:
My code attaches one button -- beside the first div-- instead of all three and returns an error that says nodeChildren[j].getAttribute("data-tabname") is not a function although as far as I know, it seems it is.
I'll post my JavaScript code then add a link to fiddle where everything is.
function asTabs(node) {
var button = document.createElement("BUTTON");
var tempArray = [];
var nodeChildren = Array.prototype.slice.call(node.childNodes);
nodeChildren.filter(function(){
for (var i = 0; i < nodeChildren.length; i++) {
if (nodeChildren[i].nodeType === 1) {
tempArray += nodeChildren[i];
return tempArray;
}
}
});
nodeChildren.forEach(function (){
for (var j = 0; j < nodeChildren.length; j++) {
node.insertBefore(button, nodeChildren[j]);
var buttons = document.getElementsByTagName("button");
for (var k = 0; k < buttons.length; k++) {
buttons[k].innerHTML = nodeChildren[j].getAttribute("data-tabname").textContent;
}
}
});
var hide = nodeChildren.slice(1);
for (var l = 0; l < hide.length; l++) {
hide[l].className = "hide";
}
buttons[k].addEventListener("click", function (){
if (nodeChildren[j].className = "") {
nodeChildren[j].className = "hide";
}
else nodeChildren[j].className = "";
});
}
asTabs(document.querySelector("#wrapper"));
Then here's my fiddle containing comments explaining what is being tried to achieve on each line
https://jsfiddle.net/nmeri17/nmswdota/
Im trying to make a div expanded once you click on another div. In my case I'm try to make div with some text in it expand when the image is clicked. A link to my JSFiddle - https://jsfiddle.net/txoyuvqn/3/
My javascript that I am using looks like.
var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');
for (var i = 0; i < divs.length; i++)
divs[i].addEventListener("click", function () {
for (var i = 0; i < whattochange.length; i++) {
whattochange[i].style.width = '500px'
whattochange[i].style.transition = 'all 1s'
whattochange[i].style.backgroundColor = 'red'
}
}, false);
However when I click on the class called image it effects all the Text classes, i know it's because were changing the css to all of the text divs, however is there a way to make it only effect the correlating div? Or am I going about creating this in the wrong way?
getElementsByClassName returns an array, not a single element.
divs is an array, and you are correctly using a for loop and the index indicator [i] after your variable name divs.
You need a similar for loop for whattochange.
var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');
for (var i = 0; i < divs.length; i++)
divs[i].addEventListener("click", function () {
for (var i = 0; i < whattochange.length; i++) {
whattochange[i].style.width = '800px';
whattochange[i].style.transition = 'all 1s';
whattochange[i].style.backgroundColor = 'red';
}
}, false);
There may be a better way, but you could do it like this:
var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');
for (var i = 0; i < divs.length; i++)
{
divs[i].addEventListener("click", function()
{
var w = document.getElementById(this.id.replace('img', 'text'));
w.style.width = '800px'
w.style.transition = 'all 1s'
w.style.backgroundColor = 'red'
});
whattochange[i].id = 'text' + i;
divs[i].id = 'img' + i;
}
See the fiddle
Javascript
var divs = document.getElementsByClassName('image');
var whattochange = document.getElementsByClassName('text');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener("click", function () {
for (var i = 0; i < whattochange.length; i++) {
whattochange[i].style.width = '800px';
whattochange[i].style.transition = 'all 1s';
whattochange[i].style.backgroundColor = 'red';
}
}, false);
}
You have to be sure that the elements exist if your JavaScript code depends on them. The reason why your fiddle didnt work was because, you was not loading the script after the body has finished loading.
In your code, One way of achieving this is by putting the <script> tag at the end of the body like this:
<html>
<head></head>
<body>
<script type="text/javascript">
// code here
</script>
</body>
You can also put all your code in a function for the window.onload event or use jQuery.