Develop Reference

How to select radio buttons with click to change color on click

I am trying to make a math quiz game for my classroom. I have created a page to select the type of game the user wants. I have created a function to select the the element when it is clicked to change colors but it is not changing colors. I have tried to hard code the styling and it works properly but I only want the styling when the radio container is selected.
const startForm = document.getElementById('start-form');
const radioContainers = document.querySelectorAll('.radio-container');
const radioInputs = document.querySelectorAll('input');
const bestScores = document.querySelectorAll('.best-score-value');
startForm.addEventListener('click', () => {
radioContainers.forEach((radioEl) => {
radioEl.classList.remove('selected-label');
if (radioEl.childeren[1].checked) {
radioEl.classList.add('selected-label');
}
});
});
RADIO CONTAINER TO BE SELECTED
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99">
<span class="best-score">
<span>Best Score</span>
<span class="best-score-value">0.0</span>
</span>
</div>

I think you mean this
Delegation from startForm is fine, then we can loop over the divs to see if the radio in the div was checked
const startForm = document.getElementById('start-form');
const radioContainers = document.querySelectorAll('.radio-container');
startForm.addEventListener('click', (e) => {
const tgt = e.target;
if (tgt.name === "Questions") {
const parent = tgt.closest('.radio-container')
radioContainers.forEach(container => container.classList.toggle('selected-label', container === parent && tgt.checked))
}
});
.selected-label { color: green }
<form id="start-form">
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
</form>

Question is somewhat a duplicate.
change label color radio when checked
I got the answer from here, and it can be done using CSS without needing to use JavaScript.
(Notice some buttons have different colors when clicked)
Here's a snippet
input[type="radio"]:checked ~ span
{
color:red;
}
input[type="radio"]:checked.correct ~ span
{
color:green;
}
<form id="start-form">
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99" class = "correct">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
<div class="radio-container">
<label for="value-99">99 Questions</label>
<input type="radio" name="Questions" value="99" id="value-99" class = "correct">
<span class="best-score">Best Score</span>
<span class="best-score-value">0.0</span>
</div>
</form>

Adding value from input field and checkbox

I'm trying to calculate values from the input field and checkbox values.
This is my html and js, with which I get the value in the input field:
function displayAbo(el) {
document.getElementById("contactFormFieldId_284").value =
el.querySelector('.product__title').textContent + " " +
el.querySelector('.product__price').textContent;
}
<div class="product__item" onclick="displayAbo(this)" id="product-basic" tabindex="0" role="radio" aria-checked="false" aria-describedby="basic-desc">
<div class="product__inner" id="basic-desc" onclick="smoothScroll(document.getElementById('scroll'))">
<h3 class="product__title">LEUWIN M</h3>
<ul class="product__features">
<li class="product__features-item">40 Mbit/s</li>
<li class="product__features-item"><img src="themes/zuerich/images/I.png" style="width: 100px; margin-right: 110px;"></li>
</ul>
<div class="product_footer">
<h4 class="product__price">CHF 39.–</h4>
<p class="product__bestellen">Zum Bestellformular</p>
</div>
</div>
</div>
<div class="product__item" onclick="displayAbo(this)" id="product-medium" tabindex="-1" role="radio" aria-checked="false" aria-describedby="medium-desc">
<div class="product__inner" id="medium-desc" onclick="smoothScroll(document.getElementById('scroll'))">
<h3 class="product__title">LEUWIN L</h3>
<ul class="product__features">
<li class="product__features-item">100 Mbit/s</li>
<li class="product__features-item"><img src="themes/zuerich/images/I.png" style="width: 100px; margin-right: 110px;"></li>
</ul>
<div class="product_footer">
<h4 class="product__price">CHF 49.–</h4>
<p class="product__bestellen">Zum Bestellformular</p>
</div>
</div>
</div>
<!--Checkbox and Result Field-->
<div class="contact row">
<label for="contactFormFieldId_284" style="color: #003664; font-size: 16px; font-weight: bold;">[[284_LABEL]]</label>
<input class="contactFormClass_text" id="contactFormFieldId_284" type="text" name="contactFormField_284" value="[[284_VALUE]]" />
</div>
<div class="contact row">
<label for="contactFormFieldId_385">[[385_LABEL]]</label>
<input class="contactFormClass_checkbox" id="contactFormFieldId_385" type="checkbox" name="contactFormField_385" value="5" [[SELECTED_385]] />
</div>
<div class="contact row">
<label for="contactFormFieldId_386">[[386_LABEL]]</label>
<input class="contactFormClass_checkbox" id="contactFormFieldId_386" type="checkbox" name="contactFormField_386" value="15" [[SELECTED_386]] />
</div>
<div class="contact row">
<label for="contactFormFieldId_387">[[387_LABEL]]</label>
<input class="contactFormClass_checkbox" id="contactFormFieldId_387" type="checkbox" name="contactFormField_387" value="20" [[SELECTED_387]] />
</div>
<div class="contact row">
<label for="contactFormFieldId_388" style="color: #003664; font-size: 16px; font-weight: bold;">[[388_LABEL]]</label>
<input class="contactFormClass_text" id="contactFormFieldId_388" type="text" name="contactFormField_388" value="0" />
</div>
With this code, I can count the values from the checkbox
window.onload=function(){
var inputs = document.getElementsByClassName('contactFormClass_checkbox'),
total = document.getElementById('contactFormFieldId_388');
for (var i=0; i < inputs.length; i++) {
inputs[i].onchange = function() {
var add = this.value * (this.checked ? 1 : -1);
total.innerHTML = parseFloat(total.innerHTML) + add
var new_total = parseFloat(document.getElementById('contactFormFieldId_388').value);
console.log(new_total);
document.getElementById('contactFormFieldId_388').value=new_total + add
}
}
}
Now that I have to collect values from the field, I thought that I am parse and value, I did it with this code, and the rest I still have to include the code, but I did not succeed ..
var price = document.querySelector('[aria-checked=true] .product__price').innerHTML;
var multiplier = price.substr(price.indexOf(" ")+1,price.indexOf('.') - price.indexOf(" ")-1);
var new_total = multiplier *
can someone help me and see where I make a mistake when adding up.
Thank you!

var checkBoxes = document.getElementsByClassName('contactFormClass_checkbox');
var sum = 0,
inputField = document.getElementById('contactFormFieldId_284'),
finalInput = document.getElementById('contactFormFieldId_388');
Array.prototype.slice.call(checkBoxes).forEach( (checkBox) => {
checkBox.addEventListener('change', calculateTotal, false);
})
inputField.addEventListener('blur', calculateSumWithInput, false);
function calculateTotal(e) {
if(e.target.checked) {
sum += parseInt(e.target.value, 10);
} else {
sum -= parseInt(e.target.value, 10);
}
finalInput.value = sum;
}
function calculateSumWithInput(e) {
var value = e.target.value;
if(value && !isNaN(value) && Number(value) === parseInt(value, 10)) {
sum = parseInt(value, 10);
finalInput.value = sum;
}
}
<div class="product__item" onclick="displayAbo(this)" id="product-basic" tabindex="0" role="radio" aria-checked="false" aria-describedby="basic-desc">
<div class="product__inner" id="basic-desc" onclick="smoothScroll(document.getElementById('scroll'))">
<h3 class="product__title">LEUWIN M</h3>
<ul class="product__features">
<li class="product__features-item">40 Mbit/s</li>
<li class="product__features-item"><img src="themes/zuerich/images/I.png" style="width: 100px; margin-right: 110px;"></li>
</ul>
<div class="product_footer">
<h4 class="product__price">CHF 39.–</h4>
<p class="product__bestellen">Zum Bestellformular</p>
</div>
</div>
</div>
<div class="product__item" onclick="displayAbo(this)" id="product-medium" tabindex="-1" role="radio" aria-checked="false" aria-describedby="medium-desc">
<div class="product__inner" id="medium-desc" onclick="smoothScroll(document.getElementById('scroll'))">
<h3 class="product__title">LEUWIN L</h3>
<ul class="product__features">
<li class="product__features-item">100 Mbit/s</li>
<li class="product__features-item"><img src="themes/zuerich/images/I.png" style="width: 100px; margin-right: 110px;"></li>
</ul>
<div class="product_footer">
<h4 class="product__price">CHF 49.–</h4>
<p class="product__bestellen">Zum Bestellformular</p>
</div>
</div>
</div>
<!--Checkbox and Result Field-->
<div class="contact row">
<label for="contactFormFieldId_284" style="color: #003664; font-size: 16px; font-weight: bold;">[[284_LABEL]]</label>
<input class="contactFormClass_text" id="contactFormFieldId_284" type="text" name="contactFormField_284" value="" />
</div>
<div class="contact row">
<label for="contactFormFieldId_385">[[385_LABEL]]</label>
<input class="contactFormClass_checkbox" id="contactFormFieldId_385" type="checkbox" name="contactFormField_385" value="5" [[SELECTED_385]] />
</div>
<div class="contact row">
<label for="contactFormFieldId_386">[[386_LABEL]]</label>
<input class="contactFormClass_checkbox" id="contactFormFieldId_386" type="checkbox" name="contactFormField_386" value="15" [[SELECTED_386]] />
</div>
<div class="contact row">
<label for="contactFormFieldId_387">[[387_LABEL]]</label>
<input class="contactFormClass_checkbox" id="contactFormFieldId_387" type="checkbox" name="contactFormField_387" value="20" [[SELECTED_387]] />
</div>
<div class="contact row">
<label for="contactFormFieldId_388" style="color: #003664; font-size: 16px; font-weight: bold;">[[388_LABEL]]</label>
<input class="contactFormClass_text" id="contactFormFieldId_388" type="text" name="contactFormField_388" value="0" />
</div>

How to put text next to the answers in quiz, after clicking the submit button

The idea is that when somebody click on submit and for example had question 1 wrong, there will be some info after the wrong answer like: ... is a mammal species.
So far I tried things and looked it up, I can't really get it to work.
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
margin-top: 7%;
text-align: center;
position: relative;
}
.quizstyle {
padding-right: 50%;
}
.row {
text-align: left;
margin-left: 10%;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="quizstyle">
<h3>Moths are a member of what order?</h3>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon</div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy</div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera</div>
<h3>Question 2</h3>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3</div>
<h3>Question 3</h3>
<div class="row">
<input name="con" type="radio" value="0" />Answer 1</div>
<div class="row">
<input name="con" type="radio" value="33" />Answer 2</div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 3</div>
</div>
<input type="submit" value="Submit" />
</form>Your grade is: <span id="grade">__</span>
<p id="grade2"></p>
</div>
<!-- close main div -->
<script>
document.getElementById("form1").onsubmit = function() {
variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
con = parseInt(document.querySelector('input[name = "con"]:checked').value);
result = variable + sub + con;
document.getElementById("grade").innerHTML = result;
var result2 = "";
if (result == 0) {
result2 = "I don't think you studied."
};
if (result == 33) {
result2 = "You need to spend more time. Try again."
};
if (result == 66) {
result2 = "I think you could do better. Try again."
};
if (result == 99) {
result2 = "Excellent!"
};
document.getElementById("grade2").innerHTML = result2;
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
</script>

Please find below solution. I hope it will works for you.
document.getElementById("form1").onsubmit = function(e) {
e.preventDefault();
variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
con = parseInt(document.querySelector('input[name = "con"]:checked').value);
result = variable + sub + con;
document.getElementById("grade").innerHTML = result;
var result2 = "";
if (result == 0) {
result2 = "I don't think you studied."
};
if (result == 33) {
result2 = "You need to spend more time. Try again."
};
if (result == 66) {
result2 = "I think you could do better. Try again."
};
if (result == 99) {
result2 = "Excellent!"
};
document.getElementById("grade2").innerHTML = result2;
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
margin-top: 7%;
text-align: center;
position: relative;
}
.quizstyle {
padding-right: 50%;
}
.row {
text-align: left;
margin-left: 10%;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="quizstyle">
<h3>Moths are a member of what order?</h3>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon</div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy</div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera</div>
<h3>Question 2</h3>
<div class="row">
<input name="sub" type="radio" value="33" />Answer 1</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 2</div>
<div class="row">
<input name="sub" type="radio" value="0" />Answer 3</div>
<h3>Question 3</h3>
<div class="row">
<input name="con" type="radio" value="0" />Answer 1</div>
<div class="row">
<input name="con" type="radio" value="33" />Answer 2</div>
<div class="row">
<input name="con" type="radio" value="0" />Answer 3</div>
</div>
<input type="submit" value="Submit" />
</form>Your grade is: <span id="grade">__</span>
<p id="grade2"></p>
</div>
<!-- close main div -->

Click on each first child radio (undefined child length)

I would like to click each first child of class="cf" and should be in order, first cf first because the other radio is disabled unless you click the first one. The cf length is undetermined (in this example I put 3) so I need to first get the length of the child of ol > li and loop the clicking there.
Here is the structure of the HTML
<div id="group-attr-selects" class="grouped-select">
<ol>
<li class="opt-label">Dimensions</li>
<div id="conf-container-1549" class="cf">
<div class="optdiv">
<input name="conf-radio-0" id="conf-radio-1461" type="radio" value="1461">
<label class="optdiv-label" for="conf-radio-1461">3" H x 3" W</label>
</div>
<div class="optdiv">
<input name="conf-radio-0" id="conf-radio-1421" type="radio" value="1421">
<label class="optdiv-label" for="conf-radio-1421">4" H x 4" W</label>
</div>
</div>
<div id="err-attribute1549" style="color: red; margin-bottom: 5px"></div>
<li class="opt-label">Color</li>
<div id="conf-container-1379" class="cf">
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12791" type="radio" value="12791">
<label class="optdiv-label" for="conf-radio-12791">Black on Almond</label>
</div>
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12796" type="radio" value="12796">
<label class="optdiv-label" for="conf-radio-12796">Black on Brushed Aluminum</label>
</div>
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12798" type="radio" value="12798">
<label class="optdiv-label" for="conf-radio-12798">Black on Brushed Brass</label>
</div>
<div class="optdiv">
<input name="conf-radio-1" id="conf-radio-12794" type="radio" value="12794">
<label class="optdiv-label" for="conf-radio-12794">Black on Brushed Gold</label>
</div>
</div>
<div id="err-attribute1379" style="color: red; margin-bottom: 5px"></div>
<li class="opt-label">Mounting Type</li>
<div id="conf-container-2605" class="cf">
<div class="optdiv">
<input name="conf-radio-2" id="conf-radio-76" type="radio" value="76">
<label class="optdiv-label" for="conf-radio-76">Adhesive</label>
</div>
<div class="optdiv">
<input name="conf-radio-2" id="conf-radio-762" type="radio" value="762">
<label class="optdiv-label" for="conf-radio-762">No Mounting</label>
</div>
</div>
<div id="err-attribute2605" style="color: red; margin-bottom: 5px"></div>
</ol>

Got the solution from this answer
I just made a few adjustments.
.findAllByCssSelector('#group-attr-selects > ol > div.cf')
.then(function (elementArray) {
return Promise.all(elementArray.map(function (element) {
return element.getVisibleText()
.then(function (children) {
for(var i=0; i < children.length; i++){
return element.findByCssSelector('.optdiv > input')
.then(function (inp) {
return inp.click();
});
}
});
}));
})

This should work:
jQuery:
$('.cf').each(function(i, item){$(item).find('input[type="radio"]')[0].click()})
JS:
Array.from(document.getElementsByClassName('cf')).forEach(function(item){item.querySelector('input[type="radio"]').checked = true})

Good and CLEAN way to check this? (JS + HTML)

I am trying to make a system that will check what radio button is pushed. (Side note there WILL always be 1 checked.) The code I have so far is rather lacking and I'm not entirely sure how to improve. Any help??
NOTE: I have multiple 'systems' that look just like this, so I'll give you just 1 chunk. That being said, there are multiple chunks like this. I need a way to make this easy on my end.
HTML:
<div class="panel">
<div class="panel-header">Storage</div>
<div class="panel-body">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-md-2">
<input name="STORAGE" type="radio" id="STORAGE" checked>
<label class="radio" for="STORAGE">
<center>
<img src="../images/Parts/Western_Digital_Caviar_Blue_320GB.png" class="comp-img"><br><br>
<p>320GB Western Digital Caviar Blue 3.5" 7200RPM HDD</p>
</center>
</label>
</div>
<div class="col-sm-4 col-md-2">
<input name="STORAGE" type="radio" id="STORAGE2">
<label class="radio" for="STORAGE2">
<center>
<img src="../images/Parts/Western_Digital_Caviar_Blue_320GB.png" class="comp-img"><br><br>
<p>500GB Western Digital WD5000AAKX 3.5" 7200RPM HDD</p>
<p class="money">+$55</p>
</center>
</label>
</div>
<div class="col-sm-4 col-md-2">
<input name="STORAGE" type="radio" id="STORAGE3">
<label class="radio" for="STORAGE3">
<center>
<img src="../images/Parts/Western_Digital_Caviar_Blue_320GB.png" class="comp-img"><br><br>
<p>1TB Western Digital WD10EZEX 3.5" 7200RPM HDD</p>
<p class="money">+$55</p>
</center>
</label>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-2">
<input name="SSD" type="radio" id="SSD" checked>
<label class="radio" for="SSD">
<center>
<img src="../images/Parts/None.png" class="comp-img"><br><br>
</center>
</label>
</div>
<div class="col-sm-4 col-md-2">
<input name="SSD" type="radio" id="SSD2">
<label class="radio" for="SSD2">
<center>
<img src="../images/Parts/A-DATA_SSD.png" class="comp-img"><br><br>
<p>120GB A-Data ASP550SS3-120GM-C SSD</p>
<p class="money">+$40</p>
</center>
</label>
</div>
</div>
</div>
</div>
</div>
JS:
function Check(){
if(document.getElementById('STORAGE3').checked & HDD3Clicked==0){
if (HDD2Clicked>0) {
HDD2Clicked = 0;
HDD3Clicked = 1;
}else{
HDD3Clicked = 1;
Adding(+55);
console.log("Adding");
}
}else if (document.getElementById('STORAGE2').checked & HDD2Clicked==0) {
if (HDD3Clicked>0) {
HDD2Clicked = 1;
HDD3Clicked = 0;
}else{
HDD2Clicked = 1;
Adding(+55);
console.log("Adding");
}
}else if (document.getElementById('STORAGE').checked & HDD3Clicked>0) {
HDD3Clicked = 0;
Adding(-55);
console.log("Subtracting");
}else if(document.getElementById('STORAGE').checked & HDD2Clicked>0){
HDD2Clicked = 0;
Adding(-55);
console.log("Subtracting");
}
setTimeout(function() {Check()}, 5000);
}

If you can use jQuery it's fairly simple...
var clickedID;
$(document).ready(function(){
$('radio').on('click'),function(){
clickedID = $(this).attr("id");
});
});
That will give you the id of whichever radio element has been clicked. Then you can do with it what you'd like.

var radioButtons = selectorQueryAll("input[type=radio]:checked");
for (button in radioButtons) {
console.log(button.id);
}
1) Return all checked radio buttons
2) Output their ID to console.

If you don't want to use jQuery, this is a pure javascript solution:
<input type="radio" name="radioGroup" onclick="handleClick(this);" value="1"/>
<input type="radio" name="radioGroup" onclick="handleClick(this);" value="2" />
<script>
var handleClick = function(e){
alert(e.value);
}
</script>