I have 6 divs, and each div when click will show a pop up window, now, the problem is that it is not working. Here is my code, I don't know what i am doing wrong:
var clickMe = document.getElementsByClassName("skill-items__item");
for (i = 0; i < clickMe.length; i++) {
clickMe[i].addEventListener("click", function() {
var ShowMe = this.nextElementSibling;
for (i = 0; i < ShowMe.length; i++) {
if (ShowMe[i].style.display === "block") {
ShowMe[i].style.display = "none";
} else {
ShowMe.style.display = "block";
}
}
});
}
Your problem is that you're using i twice. Your second for loop is overwriting the i variable from the first for loop.
Don't worry, we've all been there. Good luck!
Related
I got 3 accordions in a Shopify product page out of which I intend to keep the first one expanded by default on page load. Once the page loaded, clicking other accordions should close all previously opened ones. I want to do it only with pure JavaScript(no libraries like jQuery) or CSS. My code below just ensures the first accordion is shown expanded. Could you please help correct my code after having a look at the accordions in the page https://wv3yau73hiyf9fhv-458195004.shopifypreview.com?
window.onload = function() {
var accItem = document.getElementsByClassName('accordion__item');
// Keep the first accordion open by default.
for (i = 0; i < accItem.length; i++) {
console.log("Within first for loop");
accItem[0].click();
accItem[i].addEventListener('click', toggleItem, false);
}
function toggleItem() {
var itemClass = this.parentNode.className;
for (i = 0; i < accItem.length; i++) {
console.log("Within second for loop");
accItem[i].className = 'accordion__item close';
}
if (itemClass == 'accordion__item close') {
this.parentNode.className = 'accordion__item open';
}
}
};
Using the browser's console on the page, I used the following to open the first accordion:
let allAccordions = document.querySelectorAll(".accordion__item");
allAccordions[0].click();
Yes, a loop is possible too:
for (var i = 0; i < allAccordions.length; i++) {
if (i == 0) {
allAccordions[i].click();
break; // only the first, can stop looping.
}
}
Finally, the solution is below:
// Keep the first accordion open by default.
let allAccordions = document.querySelectorAll(".accordion__item");
if (allAccordions.length > 0) {
allAccordions[0].querySelector("input[type=radio]").checked = true;
}
// Capture click event for the accordions
allAccordions.forEach(element => {
element.addEventListener('click', function() {
let radioBtn = this.querySelector("input[type=radio]");
let clickedRadioName = radioBtn.getAttribute("name");
allAccordions.forEach(element => {
let elementRadioBtn = element.querySelector("input[type=radio]");
let elementRadioName = elementRadioBtn.getAttribute("name");
if ((elementRadioName != clickedRadioName) && elementRadioBtn.checked) {
element.querySelector("input[type=radio]").checked = false;
}
});
});
});
hello I am struggling to use JS in order to make the buttons on my HTML page add a border to the button when it is clicked and to remove the border when it is clicked again. it works for the first 2 clicks but then no longer does anything after that. please excuse my js im extremely inexperienced.
JavaScript:
<script>
var flag = true;
var buttons = document.getElementsByClassName("btn");
function buttonFunction() {
if (flag) {
for (var i = 0; i < buttons.length; i++) {
document.getElementsByClassName("btn")[i].addEventListener("click", function() {
this.classList.add("buttonSelect");
flag = false
return
});
}
} else {
if (flag == false) {
for (var i = 0; i < buttons.length; i++) {
document.getElementsByClassName("btn")[i].addEventListener("click", function() {
this.classList.add("buttonUnselect");
flag = true
return
});
}
}
}
}
</script>
The real issue is you're adding both classes and never removing them. Get rid of the if else statement and just toggle the class on click. Don't need to wrap the loop in a function either. Just let the javascript execute the event listeners at runtime.
Also, make use of the buttons var you created instead of trying to query the DOM again for the same elements.
<script>
var buttons = document.getElementsByClassName("btn");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
this.classList.toggle("buttonSelect");
})
}
</script>
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)
}
}
I'd like to hide div content while checkbox is unchecked.
Here's my code
I've made almost the same function for the div with id "focus" (big grey frame):
document.getElementById("checkFocus").onchange = function() {
var one = document.getElementById("focus");
if (document.getElementById("checkFocus").checked === true) {
one.style.display = "block";
}
else one.style.display = "none";
}
And it works!
So, I don't understand why the next function doesn't works at all:
document.getElementById("checkMass").onchange = function() {
var elem = document.querySelector("PeriodicTable")
var mass = elem.querySelectorAll("div.element > div.mass");
if (document.getElementById("checkMass").checked === true) {
mass.style.display = "block";
}
else mass.style.display = "none";
}
What am I doing wrong?
elem.querySelectorAll("div.element > div.mass"); doesn't return a single element, it returns a collection of all matches.
That said you can't do mass.style.display on a array, only on a single element so you need to do
if (document.getElementById("checkMass").checked === true) {
for (var i = 0; i < mass.length; i++) {
mass[i].style.display = "block";
}
else {
for (var i = 0; i < mass.length; i++) {
mass[i].style.display = "none";
}
}
instead.
The querySelector("Any CSS rule") needs a rule, . signify class, # signify id, but you have querySelector("PeriodicTable"). Therefor you are looking for elements with tagname of PeriodicTable. Either use document.getElementById('PeriodicTable') or querySelector("#PeriodicTable")
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
I'm just developing my skills and trying to create a js app to do the "Lights Out game" type of script that you might have seen before. Nothing complicated. Or so I thought. The idea is you start out with a grid of darkened lights, and if you click one button it toggles the state of the clicked button as well as those to the NSEW of that button. Once you click the correct sequence, all the lights are lit. My problem is basically that the divs I created are not registering a click event.
function lightUp(){
$("div.light").click(function(){
var thisDiv = $(this).attr("id");
var topDiv = null;
var bottomDiv = null;
var leftDiv = null;
var rightDiv = null;
for (i= 1; 4; i++){
for (j=1; 4; j++){
var testDiv = "r"+i+"c"+j;
if (testDiv === thisDiv) {
if (i > 1) {
topDiv = "r"+(i-1)+"c"+j;
}
if (i < 4) {
bottomDiv = "r"+(i+1)+"c"+j;
}
if (j > 1) {
leftDiv = "r"+i+"c"+(j-1);
}
if (j < 4) {
rightDiv = "r"+i+"c"+(j+1);
}
}
}
}
$("#"+thisDiv, "#"+topDiv, "#"+bottomDiv, "#"+leftDiv, "#"+rightDiv).toggleClass("on").toggleClass("off");
});
}
is not registering the clicks on the divs.
<div id="r2c3" class="light off" onclick="lightUp();"></div>
It's possible this kind of script has to be much more complex, but I'm trying it out. Input is appreciated.
http://jsfiddle.net/4bUnt/3/
Ok, got it working for you. Check it out here:
http://jsfiddle.net/4bUnt/6/
Normally when giving an answer I would propose the solution and let the person re-work their code, however in this case their were quite a few syntax errors and various problems with the code, that to try to point them out one by one, step by step would have been quite cumbersome and the back and forth dialog in comments would have been too much. Maybe is why there is no other answers to this question so far.. anyway, check it out and learn from it and if you found this and a solution and/or helpful answer, please select this as the answer or up-vote it. thank you. Carry on. Good luck! :)
$( document ).ready(function() {
$("div.light").click(function(){
var thisDiv = $(this).attr("id");
var topDiv = null;
var bottomDiv = null;
var leftDiv = null;
var rightDiv = null;
for (var i= 1; i<5; i++){
for (var j=1; j<5; j++){
var testDiv = "r"+i+"c"+j;
if (testDiv === thisDiv) {
if (i > 1) {
topDiv = "r"+(i-1)+"c"+j;
}
if (i < 4) {
bottomDiv = "r"+(i+1)+"c"+j;
}
if (j > 1) {
leftDiv = "r"+i+"c"+(j-1);
}
if (j < 4) {
rightDiv = "r"+i+"c"+(j+1);
}
}
}
}
if ($("#"+thisDiv).hasClass("off")) {
$("#"+thisDiv).removeClass("off").addClass("on");
$("#"+topDiv).removeClass("off").addClass("on");
$("#"+bottomDiv).removeClass("off").addClass("on");
$("#"+leftDiv).removeClass("off").addClass("on");
$("#"+rightDiv).removeClass("off").addClass("on");
} else {
$("#"+thisDiv).removeClass("on").addClass("off");
$("#"+topDiv).removeClass("on").addClass("off");
$("#"+bottomDiv).removeClass("on").addClass("off");
$("#"+leftDiv).removeClass("on").addClass("off");
$("#"+rightDiv).removeClass("on").addClass("off");
}
});
});