Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
Does anyone have an example of a quiz made with jQuery, without server-side processing of the results? After answering the questions, the result appears instantly. :)
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
$(document).ready(function(){
var a = $(".question");
a.each(function(index) {
var flip = $(this).find(".flip");
var panel = $(this).find(".panel");
flip.click(function(){
panel.slideDown("slow");
});
});
});
div.panel,div.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
width:140px;
}
div.panel
{
display:none;
}
div.question
{
float:left;
}
div.questions
{
height: 80px;
}
Here's an example makes it reasonably easy to add more questions once the initial javascript is in:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<title>Javascript sample</title>
</head>
<body>
<p>1) How many bits are in a byte?</p>
<div class="questions">
<div class="question">
<div class="panel">Wrong</div>
<div class="flip">7</div>
</div>
<div class="question">
<div class="panel">Right</div>
<div class="flip">8</div>
</div>
</div>
</body>
</html>
This is kind of what #gov was talking about but basically I would just capture the submit of the form:
<form id="myform" onsubmit="return mySubmitHandler()">
Then have a function to handle the submission:
function mySubmitHandler()
{
// the following are just examples of what you could do
var q1val = jQuery('#q1').val();
var q2val = jQuery('#q2').val();
if(q1val + q2val > 5)
jQuery('#success').show();
else
jQuery('#fail').show();
// end example
return false; // this keeps the form from doing a postback
}
$(document).ready(function(){
var items = [
['male'],
['bus','bike'],
['painting','cricket'],
['hocky'],
['female'],
['bus','bike','car'],
['painting','sketches','pool'],
['cricket']
];
var totalQuestion = items.length;
var correctAns = -1;
var i = 0;
var j = 0;
$('.checkBtn').on('click',function(){
$('.block').each(function(){
$(this).children('input').each(function(){
if($(this).is(':checked'))
{
if(items[i][j] == $(this).val()){
$(this).parent().removeClass('incorrect');
$(this).parent().addClass('correct');
if(j < items[i].length - 1){
j++;
}
}else{
$(this).parent().removeClass('correct');
$(this).parent().addClass('incorrect');
return false;
}
}else{
if(items[i][j] == $(this).val()){
$(this).parent().removeClass('correct');
$(this).parent().addClass('incorrect');
}
}
});
i++;
j=0;
});
$('.answer').html($('.correct').length + " / " + totalQuestion);
});
});
.block{
padding:10px 15px;
margin-bottom:15px;
border:2px solid #dadada;
border-radius:5px;
}
.correct{
border:2px solid green;
}
.incorrect{
border:2px solid red;
}
input{
padding:10px;
border:1px solid #dadada;
}
span{
padding:2px 10px;
display:inline-block;
}
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
<body>
<div class="container">
<br/>
<h4 class="answer"></h4>
<div id="que1" class="block">
<h2>Gender?</h2>
<input type="radio" name="gender" value="male"><span>male</span> <br>
<input type="radio" name="gender" value="female"><span>female</span>
</div>
<div id="que2" class="block">
<h2>Vehicle?</h2>
<input type="checkbox" value="bus"><span>bus</span> <br>
<input type="checkbox" value="bike"><span>bike</span> <br>
<input type="checkbox" value="car"><span>car</span>
</div>
<div id="que3" class="block">
<h2>Hobby?</h2>
<input type="checkbox" value="painting"><span>painting</span> <br>
<input type="checkbox" value="sketches"><span>sketches</span> <br>
<input type="checkbox" value="pool"><span>pool</span> <br>
<input type="checkbox" value="cricket"><span>cricket</span>
</div>
<div id="que5" class="block">
<h2>National Game?</h2>
<input type="radio" name="game" value="cricket"><span>cricket</span> <br>
<input type="radio" name="game" value="hocky"><span>hocky</span>
</div>
<div id="que6" class="block">
<h2>Gender?</h2>
<input type="radio" name="gender2" value="male"><span>male</span> <br>
<input type="radio" name="gender2" value="female"><span>female</span>
</div>
<div id="que7" class="block">
<h2>Vehicle?</h2>
<input type="checkbox" value="bus"><span>bus</span> <br>
<input type="checkbox" value="bike"><span>bike</span> <br>
<input type="checkbox" value="car"><span>car</span>
</div>
<div id="que8" class="block">
<h2>Hobby?</h2>
<input type="checkbox" value="painting"><span>painting</span> <br>
<input type="checkbox" value="sketches"><span>sketches</span> <br>
<input type="checkbox" value="pool"><span>pool</span>
</div>
<div id="que9" class="block">
<h2>National Game?</h2>
<input type="radio" name="game2" value="cricket"><span>cricket</span> <br>
<input type="radio" name="game2" value="hocky"><span>hocky</span>
</div>
<br/>
Submit
</div>
</body>
</html>
Related
I'm working on a Woocommerce site where my client would like it so that if the "every month" radio button gets selected then .wapf-wrapper will appear.
I've tried multiple solutions but they are not working. This is the code I've I'm working with currently:
$(document).ready(function() {
$('input[name="convert_to_sub_36"]:radio').click(function() {
var inputValue = $(this).attr("1_month");
var targetBox = $("." + inputValue);
$(".wapf-input").not(targetBox).hide();
$(targetBox).show();
});
});
.wapf-wrapper {
display: none;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<span>Choose a purchase plan:</span>
<ul class="wcsatt-options-product wcsatt-options-product--">
<li class="one-time-option">
<label>
<input type="radio" name="convert_to_sub_36" data-custom_data="[]" value="0" checked="checked">
<span class="one-time-option-details">one time</span>
</label>
</li>
<li class="subscription-option">
<label>
<input type="radio" name="convert_to_sub_36" value="1_month">
<span class="subscription-option-details"><span class="no-price subscription-price"><span class="subscription-details">every month</span></span></span>
</label>
</li>
</ul>
<div class="wapf-wrapper">
<div class="wapf-field-group" data-group="74">
<div class="wapf-field-row">
<div class="wapf-field-container wapf-field-radio" style="width:100%;" for="5f87355d578fd">
<div class="wapf-field-label wapf--above"><label><span>Agency</span></label></div>
<div class="wapf-field-input">
<div class="wapf-radios">
<label for="71955" class="wapf-input-label"><input id="71955" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="mwh9o"><span class="wapf-label-text">Lifebridge</span></label>
<label for="93527" class="wapf-input-label"><input id="93527" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="hrv77"><span class="wapf-label-text">Beverly Bootstraps</span></label>
</div>
</div>
</div>
</div>
</div><input type="hidden" value="74" name="wapf_field_groups"></div>
</body>
</html>
You can see the product here.
With vanilla JS (add it to the end of your JS file):
document.addEventListener("DOMContentLoaded", () => {
const wapf = document.querySelector(".wapf-wrapper");
document.addEventListener("click", (e) => {
if (e.target && e.target.name == "convert_to_sub_36") {
wapf.style.display = e.target.value === "1_month" ? "block" : "none";
}
});
});
You can see it in action here - https://codepen.io/ivanduka/pen/eYzJBJv?editors=1111
You can use toggle and pass it a boolean (true/false) to show/hide.
Single line: $(".wapf-wrapper").toggle(($(this).val() == "1_month"));
I also changed the click event to change since that is the appropriate event for radio/checkboxes
$(document).ready(function() {
$(document).on("change",'input[name="convert_to_sub_36"]',function() {
$(".wapf-wrapper").toggle(($(this).val() == "1_month"));
/*
var inputValue = $(this).attr("1_month");
var targetBox = $("." + inputValue);
$(".wapf-input").not(targetBox).hide();
$(targetBox).show();*/
});
});
.wapf-wrapper {
display: none;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<span>Choose a purchase plan:</span>
<ul class="wcsatt-options-product wcsatt-options-product--">
<li class="one-time-option">
<label>
<input type="radio" name="convert_to_sub_36" data-custom_data="[]" value="0" checked="checked">
<span class="one-time-option-details">one time</span>
</label>
</li>
<li class="subscription-option">
<label>
<input type="radio" name="convert_to_sub_36" value="1_month">
<span class="subscription-option-details"><span class="no-price subscription-price"><span class="subscription-details">every month</span></span></span>
</label>
</li>
</ul>
<div class="wapf-wrapper">
<div class="wapf-field-group" data-group="74">
<div class="wapf-field-row">
<div class="wapf-field-container wapf-field-radio" style="width:100%;" for="5f87355d578fd">
<div class="wapf-field-label wapf--above"><label><span>Agency</span></label></div>
<div class="wapf-field-input">
<div class="wapf-radios">
<label for="71955" class="wapf-input-label"><input id="71955" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="mwh9o"><span class="wapf-label-text">Lifebridge</span></label>
<label for="93527" class="wapf-input-label"><input id="93527" name="wapf[field_5f87355d578fd]" class="wapf-input" type="radio" data-field-id="5f87355d578fd" value="hrv77"><span class="wapf-label-text">Beverly Bootstraps</span></label>
</div>
</div>
</div>
</div>
</div><input type="hidden" value="74" name="wapf_field_groups"></div>
</body>
</html>
novice here.
Trying to find a way to get the value of the checked radio button (formatted as a Hex Code) to be the background-color of a specific class. Basically, I have a box that I'd like the user to be able to customize and setting the color of elements based on radio selection is crucial to making it work. Here's what I have so far:
<form id="2019-Holiday" name="2019-Holiday" data-name="2019 Holiday" class="form">
<input type="radio" name="box-color" value="#177262" data-name="box-color" id="177262">
<input type="radio" name="box-color" value="#80a44a" data-name="box-color" id="80a44a">
</form>
<div class=box-color" id="box-color">
<div class="box-background-color" id="box-wall1"></div>
<div class="box-background-color" id="box-wall2"></div>
</div>
<script>
document.getElementById("box-color").onclick = function() {
boxBackgroundColor();
};
function boxBackgroundColor() {
var ele = document.getElementsByName("box-color");
var elements = document.getElementsByClassName("box-background-color"); // get all elements
for (var i = 0; i < elements.length; i++)
for (i = 0; i < ele.length; i++) {
if (ele[i].checked)
elements[i].style.backgroundColor = ele[i].value;
}
}
</script>
I know that the checked radio bit is working, but the background color of the class part seems to break it. Any help would be appreciated!
Edited to add form/html elements.
Instead of adding a onClick-handler to a specific div, I would rather set an onChange-handler for the form itself and get the selected value whenever a radiobutton has changed.
Also, the ID 2019-Holiday is not valid, as IDs cant start with a number.
document.querySelector('#Holiday-2019').onchange = function(e) {
var selectedColor = e.target.value;
boxBackgroundColor(selectedColor);
};
function boxBackgroundColor(selectedColor) {
var elements = document.getElementsByClassName("box-background-color"); // get all elements
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = selectedColor;
}
}
form {
padding: 10px 0;
}
#box-color {
width: 400px;
height: 200px;
background: gray;
}
.box-background-color {
width: 100%;
height: 49%;
margin-bottom: 2%;
align-items: center;
display: flex;
justify-content: center;
}
<form id="Holiday-2019" class="form">
<input type="radio" name="box-color" value="#177262" id="177262"> Dark green
<input type="radio" name="box-color" value="#80a44a" id="80a44a">Light green
</form>
<div id="box-color">
<div class="box-background-color" id="box-wall1">Boxwall1</div>
<div class="box-background-color" id="box-wall2">Boxwall2</div>
</div>
How I code this ( if it help ?)
const myForm = document.querySelector('#my-form')
myForm.onchange=_=>
{
document.body.style.background = myForm['box-color'].value;
}
body { background-color: white; }
label { display: block; width:200px; background-color: grey; margin: 0.5em;}
<form action="xxx" id="my-form">
<label><input type="radio" name="box-color" value="white" checked > white</label>
<label><input type="radio" name="box-color" value="blue" > blue</label>
<label><input type="radio" name="box-color" value="red" > red</label>
<label><input type="radio" name="box-color" value="green" > green</label>
</form>
And to style a specific class: ( just 4 lines of code )
const Root = document.documentElement
, myForm = document.querySelector('#my-form')
myForm.onchange=_=>
{
Root.style.setProperty('--bg-color', myForm['box-color'].value)
}
:root {
--bg-color : blue;
}
.myDivClass{
background-color: var(--bg-color);
display : inline-block;
margin : 1em;
width : 100px;
height : 100px;
}
label {
display : inline-block;
width : 5.5em;
background-color: lightgrey;
margin : 0.3em;
padding : .5em .2em;
border : 1px solid black;
border-radius : .5em;
text-transform : capitalize;
line-height : 1em;
}
<div class="myDivClass"></div>
<div class="myDivClass"></div>
<div class="myDivClass"></div>
<div class="myDivClass"></div>
<form action="xxx" id="my-form">
<label><input type="radio" name="box-color" value="blue" checked> blue </label>
<label><input type="radio" name="box-color" value="red" > red </label>
<label><input type="radio" name="box-color" value="green"> green </label>
</form>
function changeColor(e) {
// by ID
document.getElementById("box").style.backgroundColor = e.value;
// by className
let element = document.getElementsByClassName("box");
Array.prototype.forEach.call(element, function (el) {
el.style.backgroundColor = e.value;
});
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<input type="radio" name="color" class="radio" value="#FF0000" id="" onchange="changeColor(this)">red
<input type="radio" name="color" class="radio" value="yellow" id="" onchange="changeColor(this)">yellow
<input type="radio" name="color" class="radio" value="green" id="" onchange="changeColor(this)">green
</div>
<div id="box" class="box" style="height:100px;width:100px;background-color: black;">
</div>
</body>
</html>
I'm building a user-submission system where a user can input data and an XML will be exported (which can be read by a different software down the line) but I'm coming across a problem where when I replicate the form for the user to input info, the XML is only taking information from the first.
Any suggestions on how do this?
Personal test code:
HTML:
$(function () {
$('#SubmitButton').click(update);
});
var added = [
'\t\t
<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>
'
].join('\r\n');
var adding = [
'\t\t
<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>
'
].join('\r\n');
function update() {
var variables = {
'channeldescription': $('#channeldescription').val(),
'channelrecordnumber': $('#channelrecordnumber').val(),
'channelhexcolor': $('#channelhexcolor').val(),
'channelbamlink': $('#channelbamlink').val()
};
var newXml = added.replace(/<\?(\w+)\?>/g,
function(match, name) {
return variables[name];
});
var finalXML = newXml;
$('#ResultXml').val(finalXML);
$('#DownloadLink')
.attr('href', 'data:text/xml;base64,' + btoa(finalXML))
.attr('download', 'bamdata.xml');
$('#generated').show();
}
$(function () {
$("#CloneForm").click(CloneSection);
});
function CloneSection() {
added = added + '\n' + adding;
$("body").append($("#Entries:first").clone(true));
}
<!DOCTYPE html>
<html>
<head>
<script src="cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
<div id="Entries" name="Entries">
<legend class="leftmargin"> Entry </legend>
<form class="form">
<fieldset>
<div class="forminput">
<label for="channel-description" class="formtextarea">Description</label>
<textarea id="channeldescription" name="channeldescription" type="text"></textarea>
</div>
<div class="forminput">
<label for="channel-record_number">Record number</label>
<input id="channelrecordnumber" name="channelrecordnumber"/>
</div>
<div class="forminput">
<label for="channel-hex_color">Hex color</label>
<input id="channelhexcolor" name="channelhexcolor"/>
</div>
<div class="forminput">
<label for="channel-bam_link">RNA-Seq Data/BAM file Repsitory Link</label>
<input id="channelbamlink" name="channelbamlink" type="text" data-help-text="bam_link"/>
</div>
</fieldset>
</form>
</div>
</body>
<div id="Cloning" class="button_fixed">
<p>
<button id="CloneForm">Add another entry</button>
<button id="SubmitButton">Generate XM</button>
</p>
</div>
<div id="generated" style="display:none">
<h2>bamdata.xml</h2>
Download XML
<textarea id="ResultXml" style="width: 100%; height: 30em" readonly></textarea>
</div>
</div>
</html>
http://www.w3schools.com/code/tryit.asp?filename=F0TWR6VRQZ3J
Change your ids to classes use a loop to get all the entries
<!DOCTYPE html>
<html>
<head>
<script src="cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing-api.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
.leftmargin {
margin-left: 2%;
}
.form {
background-color: #CBE8BA;
border-radius: 25px;
margin-left: 2%;
margin-right: 2%;
padding-top: 1%;
padding-bottom: 1%;
}
.forminput {
padding-left: 1.5%;
padding-top: 0.5%;
display: flex;
}
.button_fixed {
position: fixed;
margin-left: 2%;
bottom: 1%;
}
</script>
<script>
$(function () {
$('#SubmitButton').click(function(){
var finalXML = '';
$(".Entries").each(function(i,v) {finalXML +=update(finalXML,v)
$('#ResultXml').val(finalXML);
$('#DownloadLink')
.attr('href', 'data:text/xml;base64,' + btoa(finalXML))
.attr('download', 'bamdata.xml');
$('#generated').show();
});
});
});
var added = [
'\t\t<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>'
].join('\r\n');
var adding = [
'\t\t<bam_file desc=\"<?channeldescription?>\" record_number=\"<?channelrecordnumber?>\" hex_color=\"<?channelhexcolor?>\" bam_link=\"<?channelbamlink?>\">',
'\t\t</bam_file>'
].join('\r\n');
function update(finalXML,v) {
var variables = {
'channeldescription': $(v).find('.channeldescription').val(),
'channelrecordnumber': $(v).find('.channelrecordnumber').val(),
'channelhexcolor': $(v).find('.channelhexcolor').val(),
'channelbamlink': $(v).find('.channelbamlink').val()
};
var newXml = added.replace(/<\?(\w+)\?>/g,
function(match, name) {
return variables[name];
});
return newXml;
}
$(function () {
$("#CloneForm").click(CloneSection);
});
function CloneSection() {
$("body").append($(".Entries:first").clone(true));
}
</script>
<body>
<div class="Entries" name="Entries">
<legend class="leftmargin"> Entry </legend>
<form class="form">
<fieldset>
<div class="forminput">
<label for="channel-description" class="formtextarea">Description</label>
<textarea class="channeldescription" name="channeldescription" type="text"></textarea>
</div>
<div class="forminput">
<label for="channel-record_number">Record number</label>
<input class="channelrecordnumber" name="channelrecordnumber"/>
</div>
<div class="forminput">
<label for="channel-hex_color">Hex color</label>
<input class="channelhexcolor" name="channelhexcolor"/>
</div>
<div class="forminput">
<label for="channel-bam_link">BAM file Repsitory Link</label>
<input class="channelbamlink" name="channelbamlink" type="text" data-help-text="bam_link"/>
</div>
</fieldset>
</form>
</div>
</body>
<div id="Cloning" class="button_fixed">
<p>
<button id="CloneForm">Add another entry</button>
<button id="SubmitButton">Generate XM</button>
</p>
</div>
<div id="generated" style="display:none">
<h2>bamdata.xml</h2>
Download XML
<textarea id="ResultXml" style="width: 100%; height: 30em" readonly="readonly"></textarea>
</div>
</div>
</html>
demo:http://www.w3schools.com/code/tryit.asp?filename=F0TXIUR1CYE4
so i have made a calculator for my work that sees how much we could save potential clients. All works well, but i cant get the total fee's for all of the boxes to appear. I just don't think i know the right process to get all the "total monthly savings" to add up at the end.
Here is a JSFiddle: https://jsfiddle.net/snn5vhg2/
Here is the page:http://176.32.230.46/sarahmcdonald.com/files/index.html
And here is the code:
<html>
<head>
<title>First Data Calculator</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
body{
background-color:#e5e5e5;
}
#container{
font-family:Tahoma, Geneva, sans-serif;
}
#main{
margin-bottom:50px;
font-size:3em;
text-decoration:underline;
}
#VISABOX{
display:inline-block;
width:238px;
background-color:#fce4d1;
padding:15px;
border-radius:6px;
height:238px;
border:#c9c9c9 solid 1px;
}
.boxes{
display:inline-block;
margin-left:20px;
vertical-align:top;
width:238px;
background-color:#fce4d1;
padding:15px;
height:238px;
border-radius:6px;
border:#c9c9c9 solid 1px;
}
.titles{
margin:0 0 0 8px;
}
.inputs{
margin:7px;
height:25px;
width:200px;
}
.words{
margin:7px 0 0 8px ;
}
.calculators{
margin:7px;
height:25px;
border-radius:5px;
background-color:#F3F3F3;
}
#totals{
margin:30px 0 0 5px;
font-size:1.3em;
}
#finishButton{
font-size:1.3em;
border-radius:7px;
background-color:#F3F3F3;
}
</style>
</head>
<body>
<div id="container">
<h1 id="main">Fee Calculator</h1>
<div id="VISABOX" >
<h4 id="VISA" class="titles">Visa</h4>
<input id="vVol" class="inputs" type="text" placeholder="Visa Volume..."/><br>
<input id="vFees" class="inputs" type="text" placeholder="Visa Fees..."/><br>
<button id="vCalc" class="calculators"> Calculate </button>
<p id="vEMDR" class="words">EMDR=<span id="vEMDRSPAN"></span></p>
<p id="vMonthly" class="words">Monthly Savings=<span id="vMonthlySpan"></span></p>
<p id="vYearly" class="words">Yearly Savings=<span id="vYearlySpan"></span></p>
<p id="vFive" class="words">Five Year Savings=<span id="vFiveSpan"></span></p>
</div>
<div id="MCBOX" class="boxes">
<h4 id="MC" class="titles">MasterCard</h4>
<input id="mcVol" class="inputs" type="text" placeholder="MC Volume..."/><br>
<input id="mcFees" class="inputs" type="text" placeholder="MC Fees..."/><br>
<button id="mcCalc" class="calculators"> Calculate </button>
<p id="mcEMDR" class="words">EMDR=<span id="mcEMDRSPAN"></span></p>
<p id="mcMonthly" class="words">Monthly Savings=<span id="mcMonthlySpan"></span></p>
<p id="mcYearly" class="words">Yearly Savings=<span id="mcYearlySpan"></span></p>
<p id="mcFive" class="words">Five Year Savings=<span id="mcFiveSpan"></span></p>
</div>
<div id="IDPBOX" class="boxes">
<h4 id="IDP" class="titles">Interac</h4>
<input id="idpTrans" type="text" class="inputs" placeholder="# of Trans..."/><br>
<input id="idpFees" type="text" class="inputs" placeholder="IDP Fees..."/><br>
<button id="idpCalc" class="calculators"> Calculate </button>
<p id="idpPerTran" class="words">Per Tran=<span id="idpPerTranSpan"></span></p>
<p id="idpMonthly" class="words">Monthly Savings=<span id="idpMonthlySpan"></span></p>
<p id="idpYearly" class="words">Yearly Savings=<span id="idpYearlySpan"></span></p>
<p id="idpFive" class="words">Five Year Savings=<span id="idpFiveSpan"></span></p>
</div>
<div id="OCBOX" class="boxes">
<h4 id="OC" class="titles"> Other Charges </h4>
<input id="otherCharges" type="text" class="inputs" placeholder="Total Other Charges..." /><br>
<input id="ourCharges" type="text" class="inputs" placeholder="Our Other Charges..." /><br>
<button id="ocCalc" class="calculators"> Calculate </button>
<p id="ocMonthly" class="words"> Monthly Savings=<span id="ocMonthlySpan"></span></p>
<p id="ocYearly" class="words">Yearly Savings=<span id="ocYearlySpan"></span></p>
<p id="ocFive" class="words">Five Year Savings=<span id="ocFiveSpan"></span></p>
</div>
<div id="totals">
<button id="finishButton"> Finish </button>
<p id="monthlyTotal"> Monthly Total Savings=<span id="monthlyTotalSpan"></span></p>
<p id="yearlyTotal"> Total Yearly Savings=</p>
</div>
<script type="text/javascript">
document.getElementById("vCalc").onclick=function(){
var visaVol=document.getElementById("vVol").value;
var visaFees=document.getElementById("vFees").value;
var visaEMDR;
visaEMDR=(visaFees/visaVol*100).toFixed(2);
var visaMonthly=(visaFees-(visaVol*.0171)).toFixed(2);
var visaYearly=(visaMonthly*12).toFixed(2);
var visaFive=(visaYearly*5).toFixed(2);
document.getElementById("vMonthlySpan").innerHTML=" "+visaMonthly+"$";
document.getElementById("vYearlySpan").innerHTML=" "+visaYearly+"$";
document.getElementById("vFiveSpan").innerHTML=" "+visaFive+"$";
document.getElementById("vEMDRSPAN").innerHTML=" "+visaEMDR+"%";
}
document.getElementById("mcCalc").onclick=function(){
var mcVol=document.getElementById("mcVol").value;
var mcFees=document.getElementById("mcFees").value;
var mcEMDR=(mcFees/mcVol*100).toFixed(2);
var mcMonthly=(mcFees-(mcVol*.0178)).toFixed(2);
var mcYearly=(mcMonthly*12).toFixed(2);
var mcFive=(mcYearly*5).toFixed(2);
document.getElementById("mcMonthlySpan").innerHTML=" "+mcMonthly+"$";
document.getElementById("mcYearlySpan").innerHTML=" "+mcYearly+"$";
document.getElementById("mcFiveSpan").innerHTML=" "+mcFive+"$";
document.getElementById("mcEMDRSPAN").innerHTML=" "+mcEMDR+"%";
}
document.getElementById("idpCalc").onclick=function(){
var debitTrans=document.getElementById("idpTrans").value;
var debitFees=document.getElementById("idpFees").value;
var perTran=(debitFees/debitTrans).toFixed(2);
var debitMonthly=(debitFees-(debitTrans*.04)).toFixed(2);
var debitYearly=(debitMonthly*12).toFixed(2);
var debitFive=(debitYearly*5).toFixed(2);
document.getElementById("idpPerTranSpan").innerHTML=" "+perTran+"$";
document.getElementById("idpMonthlySpan").innerHTML=" "+debitMonthly+"$";
document.getElementById("idpYearlySpan").innerHTML=" "+debitYearly+"$";
document.getElementById("idpFiveSpan").innerHTML=" "+debitFive+"$";
}
document.getElementById("ocCalc").onclick=function(){
var otherFees=document.getElementById("otherCharges").value;
var ourFees=document.getElementById("ourCharges").value;
var ocMonthlySav=(otherFees-ourFees).toFixed(2);
var ocYearlySav=(ocMonthlySav*12).toFixed(2);
var ocFiveSav=(ocYearlySav*5).toFixed(2);
document.getElementById("ocMonthlySpan").innerHTML=" "+ocMonthlySav+"$";
document.getElementById("ocYearlySpan").innerHTML=" "+ocYearlySav+"$";
document.getElementById("ocFiveSpan").innerHTML=" "+ocFiveSav+"$";
}
document.getElementById("finishButton").onclick=function(){
var monTotal=
document.getElementById("monthlyTotalSpan").innerHTML=" "+monTotal+"$";
}
</script>
It appears that you just quit when you are 90% finished (hopefully not).
But to finish up you needed to grab the values from the xxMonthlySpan and xxYearlySpan tags, convert them to floats, add them together, and then change the innerHTML of the span tags in the end.
You also did not have <span id="yearlyTotalSpan"></span> so I added that in just to be consistent with everything else you had.
I also rounded to two decimal places for the year total.
Here is a fiddle: https://jsfiddle.net/qkx8h3hy/
Comment if you have any questions.
I am making a questionnaire and am not brilliant with JS. I want to take the results of the radio buttons which have been marked, so either True or False, and then show them on another page. I have the questions in a form.
CODE:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styling/style.css">
<title>1</title>
</head>
<body>
<script>
function sendclick() {
var answers = [document.forms["questionarre"]["clickRule"].value,
document.forms["questionarre"]["404error"].value,
document.forms["questionarre"]["colour"].value,
document.forms["questionarre"]["H2Tag"].value,
document.forms["questionarre"]["SiteMap"].value,
document.forms["questionarre"]["heading"].value,
document.forms["questionarre"]["alttag"].value,
document.forms["questionarre"]["UseAgain"].value];
var count = 0
for (var i = 0; i<answers.length; i++) {
if (answers[i] == "") {
var temp = i+1;
alert("Please complete question "+temp);
break;
}
count++;
}
if (count == answers.length) {
var correct = [document.getElementById("correct1").checked,
document.getElementById("correct2").checked,
document.getElementById("correct3").checked,
document.getElementById("correct4").checked,
document.getElementById("correct5").checked,
document.getElementById("correct6").checked];
//window.open("YourResults.html", "_self")
}
}
/*
for (var i = 0; i<x.length; i++) {
if (x[i] == "") {
var temp = i+1;
// alert("results"+x)//window.open("results"+x);
break;}
}
}function - sendClick end
function opener() {
var text = document.getElementById('correct7').value;
var target = {
non text content : alert("correct")
};
if (text in targetNames) {
window.open(targetNames[text]);
}
}
document.getElementById('name').addEventListener('keyup', opener, false);
*/
</script>
<div id="questionarre_bg">
<form name="questionarre" action="" method="post">
<div id="Question1">
<p class="thicker">How many clicks do developers use to keep the user close to information? </p>
<input type="radio" name="clickRule" value=1>1<br>
<input type="radio" name="clickRule" value=4>4
<input type="radio" name="clickRule" id="correct1" value=3>3<br>
<input type="radio" name="clickRule" value=6>6
</div>
<div id="Question2">
<p class="thicker">How are developers using the 404 Error Page, for keep the users happy?</p>
<input type="radio" name="404error" id="correct2" value="Including links">Including links<br>
<input type="radio" name="404error" value="displaying a video">displaying a video<br>
<input type="radio" name="404error" value="playing music">playing music<br>
</div>
<div id="Question3">
<p class="thicker">Should you rely on colour alone in a website build?</p>
<input type="radio" name="colour" value="Yes">Yes<br>
<input type="radio" name="colour" id="correct3" value="No">No
</div>
<div id="Question4">
<p class="thicker">A H2 Tag is useful for?</p>
<input type="radio" name="H2Tag" id="correct4" value="The disabled autoreaders">The disabled autoreaders<br>
<input type="radio" name="H2Tag" value="Pretty webpages">Pretty webpages<br>
</div>
<div id="Question5">
<p class="thicker" >What is correct name given to page of the websites pages?</p>
<input type="radio" name="SiteMap" value="Tube Map">Tube Map
<input type="radio" name="SiteMap" id="correct5" value="Site Map">Site Map <br>
<input type="radio" name="SiteMap" value="Map">Map
<input type="radio" name="SiteMap" value="Page List">Page List
</div>
<div id="Question6">
<p class="thicker">A webpage heading should do what?</p>
<input type="radio" name="heading" id="correct6" value="Tell the user about the content in a few words">Tell the user about the content in a few words<br>
<input type="radio" name="heading" value="include meaningless text">include meaningless text<br>
<input type="radio" name="heading" value="Be short">Be short<br>
</div>
<div id="Question7">
<p class="thicker">The Alt tag is used for what....</p>
<input type="text" name="alttag" id="correct7" ><br><!--ANSWER__non text content-->
</div>
<div id="Question8">
<p class="thicker">Would you use this website again for information?</p>
<input type="radio" name="UseAgain" value="Yes">Yes<br>
<input type="radio" name="UseAgain" value="No">No<br>
<textarea rows="4" cols="50"></textarea>
</div>
</form>
<button onclick="sendclick()">send</button>
</div>
</div>
</body>
</html>
you could pass the answer through local storage
it would be something like this
//save the info on page 1
//resultArr will be the array holding all the radio results,
//you could get them by jQuery or any other method to you are comfortable with
localStorage.setItem("answers", answers);
// Retrieve the info on page 2
document.getElementById("answer1").innerHTML = localStorage.getItem("answers")[0];
you can read more about it here:
http://www.w3schools.com/html/html5_webstorage.asp