I'm making an exercise where the user has to check correct answers from a list then press submit to see how well he/she did. However, my submit button does not seem to be working. Nothing happens when it is clicked. Here is the script:
<script>
//Returns how many correct answers were checked
$('#submitButton').click(function(){
var arrayScore = [];
var tempScore = 0;
$('.confirmContainer').remove();
$('.toggleConfirmList:checked').each(function(){
arrayScore.push($(this).val());
});
for(var i=0; i<arrayScore.length; i++)
{
tempScore = arrayScore[i] + tempScore;
}
$('feedback').show();
$("#scoreArea").val(tempScore);
});
</script>
Basically I want to disable the input container and then display the feedback after calculating the users score.
Here is the HTML code that the script uses:
<ol class="toggleConfirmList" start="1">
<!-- Start of toggleConfirm question -->
<li class="toggleConfirm">
<p class="question">What is your citizenship?
</p>
<div class="toggleInputContainer">
<input type="checkbox" value="1">
</div>
</li>
<li class="toggleConfirm">
<p class="question">What is the purpose of your trip</p>
<div class="toggleInputContainer">
<input type="checkbox" value="1">
</div>
</li>
<li class="toggleConfirm">
<p class="question">How long will you be staying in Canada?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">Where will you be staying?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">What is your occupation?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">Do you have any family in Canada?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="1">
</div>
</li>
<li class="toggleConfirm">
<p class="question">How will you support yourself in Canada?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">Do you intend to work or study while you are in Canada?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">Have you ever been convicted of a criminal offence?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">Do you suffer from any medical conditions?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">Have you ever been refused a visa to Canada?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="0">
</div>
</li>
<li class="toggleConfirm">
<p class="question">In which country do you reside permanently?</p>
<div class="toggleInputContainer">
<input type="checkbox" value="1">
</div>
</li>
</ol>
<div class="confirmContainer">
<input type="button" id="submitButton" value="Submit">
</div>
<div class="feedback">
<strong>Answer:</strong>In the exercise you checked <span id="scoreArea">0</span> correct questions
</div>
for setting value to a span element you should use text() method instead of val():
//Returns how many correct answers were checked
$('#submitButton').click(function(){
var arrayScore = [];
var tempScore = 0;
$('.confirmContainer').remove();
$(':checkbox:checked').each(function(){ // for selecting checkboxes you can use ":checkbox" selector
arrayScore.push(parseInt($(this).val())); // parseInt() the values
});
for(var i=0; i<arrayScore.length; i++)
{
tempScore = arrayScore[i] + tempScore;
}
$('.feedback').show(); // class selectors should have '.'
$("#scoreArea").text(tempScore); // use text() instead of val()
});
http://jsfiddle.net/EWgzq/2/
Try wrapping your code in $(document).ready(function(){...});. It may be that it is executing before the DOM is ready.
<script>
//Returns how many correct answers were checked
$(document).ready(function(){
$('#submitButton').click(function(){
var arrayScore = [];
var tempScore = 0;
$('.confirmContainer').remove();
$('.toggleConfirmList:checked').each(function(){
arrayScore.push($(this).val());
});
for(var i=0; i<arrayScore.length; i++){
tempScore = arrayScore[i] + tempScore;
}
$('feedback').show();
$("#scoreArea").val(tempScore);
});
});
</script>
<script>
//Returns how many correct answers were checked
$('#submitButton').click(function(){
var arrayScore = [];
var tempScore = 0;
$('.confirmContainer').remove();
$('.toggleInputContainer input[type="checkbox"]:checked').each(function(){
arrayScore.push($(this).val()*1); // See the *1
});
for(var i=0; i<arrayScore.length; i++)
{
tempScore = arrayScore[i] + tempScore;
}
$('div.feedback').show(); // added div. it was missing.
$("#scoreArea").html(tempScore); // it should be .html() or .text() not .val(). The .val() works only for form elements
});
</script>
Related
I have three different sections for filter and a button and i want to use filter on these sections, I just want to know that
how can i get value of these sections ( inside ul li)
<div id="new-items" class="dropdown">
New Items
<ul class="">
<li><span>New bestsellers</span></li>
<li><span>New releases</span></li>
</ul>
</div>
<div id="buy" class="dropdown">
Buy Now
<ul class="">
<li><span>Wallet</span></li>
<li><span>Website</span></li>
</ul>
</div>
<div id="sort-by" class="dropdown">
Sort By
<ul class="">
<li><span>Low To High Price</span></li>
<li><span>High To Low Price</span></li>
<li><span>View</span></li>
<li><span>View</span></li>
<li><span>Rating</span></li>
<li><span>Sale</span></li>
<li><span>Date</span></li>
</ul>
</div>
<button class="sc-button style letter style-2 filter"><span>Filter</span> </button>
This is how your HTML now renders
You need to convert the <li> to radio buttons.
For example, the sort choices.
<input type="radio" name="sort" value="1"> Low To High Price<br>
<input type="radio" name="sort" value="2"> High To Low Price<br>
<input type="radio" name="sort" value="3"> View<br>
<input type="radio" name="sort" value="4"> View<br>
<input type="radio" name="sort" value="5"> Rating<br>
<input type="radio" name="sort" value="6"> Sale<br>
<input type="radio" name="sort" value="7"> Date<br>
The above looks like this:
It may not be jQuery but it is simple enough in vanilla Javascript. The comments tell you what is happening.
// a global variable to be populated when specific SPAN elements are clicked.
let selection=false;
// bind a delegated listener to the document or suitable ancestor
document.addEventListener('click',e=>{
// If the "click" is on a SPAN of interest, populate the global variable
if( e.target.tagName=='SPAN' && e.target.parentNode.tagName=='LI' ){
selection=e.target;
}
// if the button is clicked, filter ...
if( e.target.tagName=='SPAN' && e.target.parentNode.tagName=='BUTTON' && selection ){
alert(selection.textContent)
}
});
<div id="new-items" class="dropdown">
New Items
<ul class="">
<li><span>New bestsellers</span></li>
<li><span>New releases</span></li>
</ul>
</div>
<div id="buy" class="dropdown">
Buy Now
<ul class="">
<li><span>Wallet</span></li>
<li><span>Website</span></li>
</ul>
</div>
<div id="sort-by" class="dropdown">
Sort By
<ul class="">
<li><span>Low To High Price</span></li>
<li><span>High To Low Price</span></li>
<li><span>View</span></li>
<li><span>View</span></li>
<li><span>Rating</span></li>
<li><span>Sale</span></li>
<li><span>Date</span></li>
</ul>
</div>
<button class="sc-button style letter style-2 filter"><span>Filter</span></button>
get all the li elements inside div, then loop the array
example for the first div:
const newItems = document.querySelectorAll('#new-items li');
newItems.forEach(function(item) {
console.log(item.innerText);
})
I am trying to get to <label> tag right under the <input> tag for later styling purposes. I tried with .firstElementChild, which gives me a null value. How can I get to label tag of clicked checkbox field? This is my code:
var checkboxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
console.log(checkboxes[i]);
checkboxes[i].addEventListener('change', (e) => {
var targetCb = e.target;
console.log(targetCb.firstElementChild);
});
}
<ul>
<li class="title mb-3">STYLISTIC SET</li>
<li>
<input type="checkbox" id="sSet1" name="sSet1" value="sSet1" />
<label for="sSet1">Stylistic set 1</label>
</li>
<li>
<input type="checkbox" id="sSet2" name="sSet2" value="sSet2" />
<label for="sSet2">Stylistic set 2</label>
</li>
<li>
<input type="checkbox" id="sSet3" name="sSet3" value="sSet3" />
<label for="sSet3">Stylistic set 3</label>
</li>
<li>
<input type="checkbox" id="sSet4" name="sSet4" value="sSet4" />
<label for="sSet4">Stylistic set 4</label>
</li>
</ul>
It seems like you quite don't know what child elements and siblings are.
Consider the following for children:
<div id="parent">
<div id="child">I'm the child of my parent.</div>
</div>
And the following for siblings:
<div id="sibling1"></div>
<div id="sibling2">I'm the sibling of sibling1.</div>
In your code, those labels are siblings of your input elements.
So in your script, change console.log(targetCb.firstElementChild); to console.log(targetCb.nextElementSibling);
var checkboxes = document.querySelectorAll("input[type='checkbox']");
for (var i = 0; i < checkboxes.length; i++) {
console.log(checkboxes[i]);
checkboxes[i].addEventListener('change', (e) => {
var targetCb = e.target;
console.log(targetCb.nextElementSibling);
});
}
<ul>
<li class="title mb-3">STYLISTIC SET</li>
<li>
<input type="checkbox" id="sSet1" name="sSet1" value="sSet1" />
<label for="sSet1">Stylistic set 1</label>
</li>
<li>
<input type="checkbox" id="sSet2" name="sSet2" value="sSet2" />
<label for="sSet2">Stylistic set 2</label>
</li>
<li>
<input type="checkbox" id="sSet3" name="sSet3" value="sSet3" />
<label for="sSet3">Stylistic set 3</label>
</li>
<li>
<input type="checkbox" id="sSet4" name="sSet4" value="sSet4" />
<label for="sSet4">Stylistic set 4</label>
</li>
</ul>
Change
var targetCb = e.target;
to var targetCb = e.target.nextElementSibling;
I am working on some code that takes the selected value of the radio button and passes it to the next group of radio buttons to be used as input. The code works well when passing the first time, but any subsequent time, instead of passing the value, it passes "on." I think it's just something silly, but I haven't been able to figure it out.
Link to JS Fiddle: https://jsfiddle.net/hc3bracf/6/
Here is the HTML and JS:
<div class="container">
<ul class="aaa">
<li>
<input type="radio" name="g1" id="i1" value="s#1" data-target="r65">
<label id="r1" for="i1">s#1</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" name="g1" id="i2" value="s#16" data-target="r65">
<label id="r2" for="i2">s#16</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<div class="container">
<ul class="aaa">
<li>
<input type="radio" name="g2" id="i3" value="s#8" data-target="r66">
<label id="r3" for="i3">s#8</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" name="g2" id="i4" value="s#9" data-target="r66">
<label id="r4" for="i4">s#9</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<div class="container">
<ul class="aaa">
<li>
<input type="radio" name="g33" id="i65" data-target="r97">
<label id="r65" for="i65"></label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" name="g33" id="i66" data-target="r97">
<label id="r66" for="i66"></label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<div class="container">
<ul class="aaa">
<li>
<input type="radio" name="g49" id="i97" data-target="r113">
<label id="r97"></label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" name="g49" id="i98" data-target="r113">
<label id="r98"></label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
JS
const inputs = document.querySelectorAll("input[type=radio]");
for (let inp of inputs) {
inp.addEventListener("change", function() {
let targetLabel = document.getElementById(inp.dataset.target);
let targetRadio = targetLabel.previousSibling;
targetLabel.innerHTML = inp.value;
targetRadio.value = inp.value;
targetRadio.checked = false;
//while there is a next target clear it
while (targetLabel.previousSibling.hasAttribute) {
targetLabel = document.getElementById(targetRadio.dataset.target);
targetRadio = targetLabel.previousSibling;
targetRadio.checked = false;
targetLabel.innerHTML = '';
}
});
}
The previousSibling property returns the previous node of the specified node, in the same tree level.
The returned node is returned as a Node object.
The difference between this property and previousElementSibling, is that previousSibling returns the previous sibling node as an element node, a text node or a comment node, while previousElementSibling returns the previous sibling node as an element node (ignores text and comment nodes).
const inputs = document.querySelectorAll("input[type=radio]");
for (let inp of inputs) {
inp.addEventListener("change", function() {
let targetLabel = document.getElementById(inp.dataset.target);
console.log(targetLabel);
let targetRadio = targetLabel.previousElementSibling;
targetRadio.value = inp.value;
targetLabel.innerHTML = inp.value;
targetRadio.checked = false;
//while there is a next target clear it
while (targetLabel.previousElementSibling.hasAttribute) {
targetLabel = document.getElementById(targetRadio.dataset.target);
targetRadio = targetLabel.previousSibling;
targetRadio.checked = false;
targetLabel.innerHTML = '';
}
});
}
I want a variable (chanceoflive) to be stored with localStorage. Then, I have radio buttons. I want it so that depending on which radio button is selected, the variable chanceoflive will be changed. This is what I have:
var chanceoflive = 0;
var user;
function choose(choice){
user = choice;
}
function changechanceoflive(){
if (user == brick) {
chanceoflive += 1;
}
else if (user == wood) {
chanceoflive +=3
}
else if (user == stone) {
chanceoflive +=2
}
localStorage.setItem("chanceoflive", chanceoflive);
}
function test(click){
alert(chanceoflive);
}
<div id="radiobuttons" class="container" name="buttons" align=center>
<h2>I Want my Building to be Made of:</h2>
<ul>
<li>
<input type="radio" id="brick-option" name="material" value="1" onClick="choose('Bricks')">
<label for="brick-option">Bricks</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="wood-option" name="material" value="3" onClick="choose('Wood')">
<label for="wood-option">Wood</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" id="stone-option" name="material" value="2" onClick="choose('Stone')">
<label for="stone-option">Stone</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
</ul>
</div>
<form action="chooseheight.html">
<div class="wrapper">
<button class="button" onClick="test();changechanceoflive()" align=center>Submit</button>
</div>
</form>
Although, it always just alerts 0. Is it a problem with localStorage or something else?
I fixed your code:
<ul>
<li>
<input type="radio" id="brick-option" name="material" value="1" onClick="choose('bricks')">
<label for="brick-option">Bricks</label>
<div class="check"></div>
</li>
<li>
<input type="radio" id="wood-option" name="material" value="3" onClick="choose('wood')">
<label for="wood-option">Wood</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
<li>
<input type="radio" id="stone-option" name="material" value="2" onClick="choose('stone')">
<label for="stone-option">Stone</label>
<div class="check">
<div class="inside"></div>
</div>
</li>
JS
var chanceoflive = 0;
var user;
function choose(choice){
user = choice;
}
function changechanceoflive(){
if (user == 'bricks') {
chanceoflive += 1;
}
else if (user == 'wood') {
chanceoflive +=3
}
else if (user == 'stone') {
chanceoflive += 2
}
localStorage.setItem("chanceoflive", chanceoflive);
}
function test(click){
alert(chanceoflive);
alert(localStorage.chanceoflive);
}
But with your code, if the user reload the page and then didn't select any radio, the localStorage variable will be reset to 0 because your have
var chanceoflive = 0;
If you want to keep the last saved value, you must replace that line by:
var chanceoflive = localStorage.chanceoflive;
To answer your part about LocalStorage, just set/get your variables like a regular Javascript object. More info: mrkdown.io/t32iomd
Hope someone can help.
I have a dynamically generated form that ends up looking like this
<form>
<header><h2 id="title">This is a Survey Title</h2></header>
<ul class="Question_list">
<li class="question">
<div id="sm_survey_question_0">
<fieldset>
<div class="question_text">is this a test?</div>
<input type="radio" name="0" value="1">yes<br>
<input type="radio" name="0" value="2">no<br>
<input type="radio" name="0" value="3">maybe<br>
</fieldset>
</div>
</li>
<li class="question">
<div id="sm_survey_question_1">
<fieldset>
<div class="question_text">Is Batman the best?</div>
<input type="radio" name="1" value="1">yes<br>
<input type="radio" name="1" value="2">no<br>
</fieldset>
</div></li>
<li>
<div id="sm_survey_question_2">
<fieldset>
<div class="question_text">best colors</div>
<input type="radio" name="2" value="1">red<br>
<input type="radio" name="2" value="2">blue<br>
<input type="radio" name="2" value="3">green<br>
</fieldset>
</div>
</li>
</ul>
</form>
and I would like that when the submit button is clicked i can generate a "report", a string would work with the question and the answers selected.
I cant wrap my mind around how to do that.
so far im able to cycle through the questions, check what answers are checked but its the end when i have to create a sting with the questions + its checked
module.createReport = function() {
console.log('reporting');
var questions = document.getElementsByClassName('question');
console.log(questions.length+1,"questions");
var StringAnswers="";
for (var i = questions.length ; i >= 0; i--) {
var textq= document.getElementById('sm_survey_question_'+i).getElementsByClassName("question_text")[0].innerHTML;
var answers = document.getElementById('sm_survey_question_'+i).getElementsByTagName('input');
for (var j = answers.length-1; j >= 0; j--) {
if (answers[j].checked) {
var isanswerC= answers[j].value;
};
var conc= textq+" "+isanswerC;
StringAnswers.concat(conc);
};
};
console.log(conc);
};