Hi I’m trying to make sure radio boxes have been checked and if not then to throw an error message. Also to validate the correct answers. Any help would be appreciated.
The pen is located on codepen at:
e-learning example (codepen.io)
Hi Randall. Thank you thats a good solution. I’ve recently changed it so the function should check through each group seperately but it doesn’t work. is there a reason the following code doesn’t work??
function checks() {
var check1 = document.getElementsByName("group1");
for (var i = 0; i < check1.length; i++) {
if (check1[i].type == "radio" && check1[i].checked) { return true; }
}
return document.getElementById("not_checked_group1").innerHTML = "PLEASE SELECT AN OPTION";
var check2 = document.getElementsByName("group2");
for (var i = 0; i < check2.length; i++) {
if (check2[i].type == "radio" && check2[i].checked) { return true; }
}
return document.getElementById("not_checked_group2").innerHTML = "PLEASE SELECT AN OPTION";
}
This is the problem. I’m failing to see how this can be done with the one function, and after I would like to add the values to calculate a score
Thank you. I’ve tweaked the HTML and CSS and I understand what this does. You’ve completely lost me with the Javascript. I’ve had an attempt but I don’t think I quite understand
I also have values of false and true assigned to the radio buttons already to calculate the score.
Okay. So the .message_visible class will overwrite all css from the .not_checked class as I’ve added all the css from the first to the second?? Here is what I have now:
function checks() {
var radioSets = document.querySelectorAll(".answers-div");
var radioButtons = [ ...radioSets.querySelectorAll('input[type=radio]') ];
var newVar = false;
var notChecked = document.querySelectorAll(".not_checked");
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].type == "radio" && radioButtons[i].checked) { return true; }
else if (radioButtons[i].type == "radio" && radioButtons[i].css == ".not_checked") {notChecked.toggleClass(".message_visible");
}
}
I think I’m still confused on the initiation of the newVar to false
(post deleted by author)
Thank you for the detailed explanation and structure of the algorithm. I think in the following code I have the methods wrong and too many if statements but it’s getting there. I do understand the value of the true and false boolean but was expecting to use it to verify the correct answers, although your explanation will help to solve this also. I am struggling to target the p elements individually here though
function checks() {
var radioSets = document.querySelectorAll(".answers-div");
var radioButtons = [ ...radioSets.querySelectorAll('input[type=radio]') ];
var newVar = false;
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) { radioSets.add(".message_visible"); return newVar = true; break;}
if (newVar.value == true) { radioButtons.class.remove(".message_visible"); }
if (newVar.value == false) { radioButtons.class.add(".message_visible"); }
}
}
Is this better??
function checks() {
var radioSets = document.querySelectorAll(".answers-div");
forEach (i = 0; i < radioSets.length; i++) {
var radioButtons = [ ...radioSets.querySelectorAll('input[type=radio]') ];
var newVar = false; }
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) { radioSets.add(".message_visible"); { return newVar = true; break;}
if (newVar == true) { radioButtons.class.remove(".message_visible"); }
if (newVar == false) { radioButtons.class.add(".message_visible"); }
}
}
So the return newVar = true is completely unnecessary?
Sorry I am paying attention. I decided to learn some python on another course and then go back to practice the Javascript again. I feel like I havn’t targeted the <p> elements properly. and also I have a syntax error on the for each statement line
function checks() {
var radioSets = document.querySelectorAll(".answers-div");
forEach (i = 0; i < radioSets.length; i++) {
var radioButtons = [ ...radioSets.querySelectorAll('input[type=radio]') ];
var newVar = false; }
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
radioSets.add(".message_visible");
newVar = true;
break;
}
if (newVar == true) {
radioButtons.class.remove(".message_visible");
}
if else (newVar == false) {
radioButtons.class.add(".message_visible");
}
}
}
I will change newVar to something else
Both removed, thank you.
still doesn’t work though
function checks() {
var radioSets = document.querySelectorAll(".answers-div");
forEach (i = 0; i < radioSets.length; i++) {
var radioButtons = [ ...radioSets.querySelectorAll('input[type=radio]') ];
var newVar = false;
forEach (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
newVar = true;
break;
}
}
if (newVar == true) {
radioButtons.class.remove(".message_visible");
}
if else (newVar == false) {
radioButtons.class.add(".message_visible");
}
}
I havn’t ever used a forEach loop you would be correct… so I’ve replaced with the for loop and tweaked the else statement at the bottom. Why do I still feel like its not targeting the <p> element or is it?
function checks() {
var radioSets = document.querySelectorAll(".answers-div");
for (var i = 0; i < radioSets.length; i++) {
var radioButtons = [ ...radioSets.querySelectorAll('input[type=radio]') ];
var newVar = false;
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
newVar = true;
break;
}
}
if (newVar == true) {
radioButtons.class.remove(".message_visible");
}
else {
radioButtons.class.add(".message_visible");
}
}
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.