We Keep Coding

First accordion to be made open by default either by JavaScript or CSS

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;
}
});
});
});

div onclick issue with basic "LightsOut" script

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");
}
});
});

Javascript Click Function Broken in Gallery Script

I'm trying to create a gallery script with JS (I've only been learning for a week so please excuse if I've made any ridiculous mistakes!). When I run the code, I get an error for controlLeft.onclick = changeImage(--);, saying ( is an unexpected token.
By my untrained eye everything should be fine, but evidently not. What have I done wrong here:
//Javascript Image Changer
var currentImage = document.getElementById("currentImage");
var imageArray = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];
var imageIndex= 0;
function changeImage(param){
currentImage.setAttribute("src", imageArray[imageIndex]);
imageIndex[param];
if (imageIndex >= imageArray.length){
imageIndex = 0;
}else if(imageIndex <= -1){
imageIndex = imageArray.length + 1;
}
}
var controlLeft = document.getElementById("left");
var controlRight = document.getElementById("right");
controlLeft.onclick = changeImage(--);
controlRight.onclick = changeImage(++);

You can't just pass operators around like other things. Even in a programming language with higher-order functions the same thing usually does not apply to operators.
Besides that, onclick expects a function - not the result of a function call.
Here's a snippet that is likely to work:
function changeImage(mod){
currentImage.setAttribute("src", imageArray[imageIndex]);
imageIndex += mod;
if (imageIndex >= imageArray.length){
imageIndex = 0;
}else if(imageIndex <= -1){
imageIndex = imageArray.length + 1;
}
}
var controlLeft = document.getElementById("left");
var controlRight = document.getElementById("right");
controlLeft.onclick = function() { changeImage(-1); };
controlRight.onclick function() { changeImage(1); };

Just make a slight modification:
controlLeft.onclick = function() {
changeImage('back');
};
controlRight.onclick = function() {
changeImage('forward');
};

Can we get radiobuttonList.Items.Count in .aspx page

Can we get the count of total radiobuttonlist items from .aspx page. I have to call a javascript function onclientclick of a button and i want to loop through the total number of radiobuttonlist items. So can anyone tell me that can we get it from .aspx page. Because in my scenario i can not use code behind for this.
function ClearRBL() {
for (i = 0; i < RBLCOUNT; i++) {
document.getElementById('rblWorkerList_' + [i]).checked = false;
}
}
How can i get RBLCOUNT here from .aspx page only? If not possible then in Javascript please.

I don't know how the aspx side would work, but if you want to do it just in JavaScript you could do something like the following that doesn't need to know the total number of elements in advance:
function ClearRBL() {
var i = 0,
rbl;
while (null != (rbl = document.getElementById('rblWorkerList_' + i++)))
rbl.checked = false;
}
The above assumes that the element ids end in numbers beginning with 0 counting up by 1s; the while loop will keep going until document.getElementById() doesn't find a matching element (in which case it returns null). A less cryptic way of writing it is as follows:
function ClearRBL() {
var i = 0,
rbl = document.getElementById('rblWorkerList_' + i);
while (null != rbl) {
rbl.checked = false;
i++;
rbl = document.getElementById('rblWorkerList_' + i);
}
}
P.S. When the while loop finishes i will be equal to the number of radio buttons, which may be useful if you want to do something with that number afterwards.

Try this:- This is not exactly what you want but hope it will help you.
function GetRBLSelectionID(RadioButtonListID) {
var RB1 = document.getElementById(RadioButtonListID);
var radio = RB1.getElementsByTagName("input");
var isChecked = false;
var retVal = "";
for (var i = 0; i < radio.length; i++) {
if (radio[i].checked) {
retVal = radio[i].id;
break;
}
}
return retVal;
}

you can give a name all radio button and then get them like this.
var RBLCOUNT= document[groupName].length;
or
var RBLCOUNT= 0;
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; ++i) {
if(inputs[i].type =="radio"){
RBLCOUNT++;
}
}

I just created a javascript function as mentioned by Karthik Harve and found the total number of rows generated dynamically as below: -
function ClearRBL() {
var rblLen = document.getElementById('rblWorkerList');
for (i = 0; i < rblLen.rows.length; i++) {
document.getElementById('rblWorkerList_' + [i]).checked = false;
}
}
It's working on both Mozila and IE.
Thanks alot to all who tried to help.

Scoring a Javascript Quiz Script

Hi I some javascript code written to quiz the user on 5 questions and then in theory output their score. As far as I can tell the questions are being scored, I just can't figure out how to output the response. I am having no issues fetching the correct html elements and displaying them. I believe the issue is in the looping elements of the window.onload function. The code is below,
<script type="text/javascript">
var rand = 0;
var right = 0;
window.onload = function () {
reset();
Rrand();
var rangQ = document.getElementById('area').getElementsByClassName('divide');
correct = document.getElementsByTagName('a'), i = 0;
for (i; i < correct.length; i++) {
if (correct[i].className == 'correct') {
correct[i].onclick = function () {
right++;
reset();
Rrand();
}
}
else if (correct[i].className != 'correct') {
correct[i].onclick = function () {
right--;
reset();
Rrand();
}
}
}
}
function Rrand() {
var rangQ = document.getElementById('area').getElementsByClassName('divide');
rangQ[rand].style.display = '';
rand++;
}
function reset() {
var rangQ = document.getElementById('area').getElementsByClassName('divide');
for (var i = 0; i < rangQ.length; i++) {
rangQ[i].style.display = 'none';
}
}
document.write(right);
</script>

window.onload is not executed immidiately. you are writing output, but variable right is changed after that.
you need to either move line
document.write(right);
into window.onload as last line (or after loop) or figure out other way that will be best for you