im trying to write Html code for a small quiz consist of 10 questions, and its written with radio buttons, i want when the user answer or click on the right answer, the counter will increase by one, if he answer the second question right, the counter will become two, so like that..
also when user click on wrong answer i want to increase another counter to display the correct and right answer at the end..
so far i wrote the following html code just for two questions but it does not work.
<html>
<head>
<title>QUIZ</title>
<script type="text/javascript">
var correct=0;
var wrong=0;
function checkans(){
var ans = document.getElementById("quiz");
if( ans.elements[1].checked)
correct++
else
wrong++
var ans2 = document.getElementById("quiz2");
if( ans2.elements[0].checked)
correct++
else
wrong++
alert("Your correct answers : "+correct+" Your wrong answers : "+wrong)
}
</script>
</head>
<body>
<form id="quiz" onsubmit="checkans()" action="">
<p><font color=red>Q1- <font color=black>He ____ it.</p>
<input type="radio" name="radiobutton" value="one"/>
<label>Don't like</label></br>
<input type="radio" name="radiobutton" value="two"/>
<label>Doesn't like</label></br>
<input type="radio" name="radiobutton" value="three"/>
<label>Don't likes</label></br>`enter code here`
<form id="quiz2" onsubmit="checkans()" action="">
<p><font color=red>Q2- <font color=black>They _____ here very often.</p>
<input type="radio" name="radiobutton1" value="four"/>
<label>don't come</label></br>
<input type="radio" name="radiobutton1" value="five"/>
<label>doesn't comes</label></br>
<input type="radio" name="radiobutton1" value="six"/>
<label>doesn't come</label></br>
<input type="submit" name="submit" value="Grade me"/>
</form>
</body>
</html>
I would set up a function that takes the correct/incorrect value as an argument, then branch accordingly.
function checkAnswer(isCorrect)
{
if(isCorrect)
{ correct++; }
else
{ wrong ++; }
}
I'd do the call on the click of the radio button. Correct would be
checkAnswer(true);
Incorrect would be:
checkAnswer(false);
You'll need to adapt this based on whether or not your user can change their answers, but this should get you started.
Use the code below, used correct answer checkbox element
<html>
<head>
<title>QUIZ</title>
<script type="text/javascript">
var correct=0;
var wrong=0;
function checkans(){
var ans = document.getElementById("quiz1CorrectAnswer");
if( ans.checked)
correct++
else
wrong++
var ans2 = document.getElementById("quiz2CorrectAnswer");
if( ans2.checked)
correct++
else
wrong++
alert("Your correct answers : "+correct+" Your wrong answers : "+wrong)
}
</script>
</head>
<body>
<form id="quiz" onsubmit="checkans()" action="">
<p><font color=red>Q1- <font color=black>He ____ it.</p>
<input type="radio" name="radiobutton" value="one"/>
<label>Don't like</label></br>
<input id="quiz1CorrectAnswer" type="radio" name="radiobutton" value="two"/>
<label>Doesn't like</label></br>
<input type="radio" name="radiobutton" value="three"/>
<label>Don't likes</label></br>`enter code here`
<form id="quiz2" onsubmit="checkans()" action="">
<p><font color=red>Q2- <font color=black>They _____ here very often.</p>
<input id="quiz2CorrectAnswer" type="radio" name="radiobutton1" value="four"/>
<label>don't come</label></br>
<input type="radio" name="radiobutton1" value="five"/>
<label>doesn't comes</label></br>
<input type="radio" name="radiobutton1" value="six"/>
<label>doesn't come</label></br>
<input type="submit" name="submit" value="Grade me"/>
</form>
</body>
</html>
Try with jquery on Element.("input:checked")
http://api.jquery.com/checked-selector/
Related
I have three radio buttons groups i want to hide the last two radio button groups which will be displayed once appropriate output from first is given.
The code:
<div class="row">
<div>
<script type="text/javascript">
function displaytxt(e) {
var valueRadio = e;
if (valueRadio == 0)
{
document.getElementById('dynamictxt').style.display = 'none';
}
else
{
document.getElementById('dynamictxt').style.display = '';
}
}
</script>
<div>
<script type="text/javascript">
function displaytxt1(e) {
var valueRadio = e;
if (valueRadio == 2) {
document.getElementById("dynamictxt1").innerHTML = "Check if the termination is for past date or future date";
}
else
{
document.getElementById("dynamictxt1").innerHTML = "Go back to the request manager for confirming the user termination date";
}
}
</script>
Is there a way to do so using java script?
Thanks in advance.
try like this
<div id="rates">
<input type="radio" id="r1" name="rate" value="Fixed Rate"> Fixed Rate
<input type="radio" id="r2" name="rate" value="Variable Rate"> Variable Rate
<input type="radio" id="r3" name="rate" value="Multi Rate" checked="checked"> Multi Rate
</div>
if (document.getElementById('r1').checked) {
rate_value = document.getElementById('r1').value;
}
I wish I could understand your question, but based on the title of your question, perhaps, this could help
<form name="form1" method="post" action="">
<p id="rad1"><input type="radio" name="rdbutton" value="radio" id="rdbutton_0">
Radio 1</p>
<p id="rad2"><input type="radio" name="rdbutton" value="radio" id="rdbutton_1">
Radio 2</p>
<p id="rad3"><input type="radio" name="rdbutton" value="radio" id="rdbutton_2">
Radio 3</p>
</form>
<script>
$('#rad1').on('click',function(){
hideSelects();
});
function hideSelects() {
$('p#rad2').hide();
$('p#rad3').hide();
};
</script>
Demo
After clicking calculate button, its not showing the return value rather showing this error: "Uncaught ReferenceError: calculateTotal is not defined". I am very new to JavaScript. Please help.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>2</title>
<meta charset="utf-8"/>
<script type="text/javascript" src="2.js"></script>
</head>
<body>
<div id="page">
<div id="header">
<h1> 02 </h1>
</div>
<div id="body">
<p>You probably want to retire someday so let's get started!</p>
<form name="retirement savings" action="#" OnClick="calculateTotal(amountNeeded.value, investNo, annContribute,inrate)">
How much money do you need to retire: <input type="text" name="savingsGoal"><br><br>
Initial Investment: <input type="text" name="initialInvestment"><br><br>
Annual Contribution: <input type="text" name="annualContribution"><br><br>
Expected Interest Rate: Select from the following please:<br><br>
<input type="radio" name="interestRate" value="1percent">1 Percent<br>
<input type="radio" name="interestRate" value="1.5percent">1.5 Percent<br>
<input type="radio" name="interestRate" value="2percent">2 Percent<br>
<input type="radio" name="interestRate" value="2.5percent">2.5 Percent<br>
<input type="radio" name="interestRate" value="3percent">3 Percent<br>
<input type="radio" name="interestRate" value="3.5percent">3.5 Percent<br>
<input type="radio" name="interestRate" value="4percent">4 Percent<br>
<input type="radio" name="interestRate" value="4.5percent">4.5 Percent<br>
<input type="radio" name="interestRate" value="5percent">5 Percent<br>
<input type="radio" name="interestRate" value="5.5percent">5.5 Percent<br>
<input type="radio" name="interestRate" value="6percent">6 Percent<br>
<input type="radio" name="interestRate" value="6.5percent">6.5 Percent<br><br>
<input type="button" onClick="calculateTotal(savingsGoal.value, initialInvestment, annualContribution,interestRate);" value="Calculate"> <input type="reset">
</form>
<br>
<hr>
<p>You can retire in years</p>
<p>with in the bank</p>
<hr>
</div>
<div id="footer"><br>
<a href="../index.html">Return to Main Menu</li>
</div>
</body>
</html>
JS:
/*Interest Radio Button*/
var interest_rate= new Array();
interest_rate["1percent"]=1;
interest_rate["1.5percent"]=1.5;
interest_rate["2percent"]=2;
interest_rate["2.5percent"]=2.5;
interest_rate["3percent"]=3;
interest_rate["3.5percent"]=3.5;
interest_rate["4percent"]=4;
interest_rate["4.5percent"]=4.5;
interest_rate["5percent"]=5;
interest_rate["5.5percent"]=5.5;
interest_rate["6percent"]=6;
interest_rate["6.5percent"]=6.5;
function getIntrestRate() {
var interestRadio = document.getElementsByName('interestRate');
for (i=0; i < interestRadio.length; i++) {
if (interestRadio[i].checked) {
user_input = interestRadio[i].value;
}
}
return interest_rate[user_input];
}
/*Calculation*/
function calculateTotal(savingsGoal.value, initialInvestment.value, annualContribution.value, interstRate.value)(){
if ((document.calc.savingsGoal.value == null || document.calc.savingsGoal.length == 0) ||
(document.calc.initialInvestment.value == null || document.calc.initialInvestment.length == 0)||
(document.calc.annualContribution.value == null || document.calc.rate.annualContribution.length == 0)){
alert("Please fill in required fields");
return false;
}
else
{
var amount = document.calc.savingsGoal.value;
var invest = document.calc.initialInvestment.value;
var yearly = document.calc.annualContribution.value / 1200;
var interest_rate= document.calc.getInterestRate.value;
document.calc.pay.value = amount * interest_rate / (1 - (1/(1 + intr), yearly)));
}
}
Your function has invalid definition. You have extra () after parameters inside ()
function calculateTotal(savingsGoal.value, initialInvestment.value,
annualContribution.value, interstRate.value)(){
//^^remove this
Update
Few points I just noted which stays invalid in your case. So just go through the code shown in this fiddle. I've updated both html and js. I've changed the logic of getting values to function.. Its a parameter less function now. Also getIntrestRate() is a function and you were trying to access it as a variable/element and the way you were calling it was wrong. There is a spelling mistake i.e. getInterestRate. Just go through the fiddle and please note that its not fully functional. Not sure what you are getting in intr variable at the end.
calculateTotal function is not defined properly because there is a syntax error in its signature.
make it
function calculateTotal(savingsGoal, initialInvestment, annualContribution, interstRate){
you can't access a property of an object here while defining a method.
Also there is an extra parenthesis ().
I think You Not Include Jquery Library file so you include jquery library file on header its working
https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js
or search latest version jquery library file include .
Hopefully somebody can prompt me into the right direction,
I want a simple 3 radio button form, lets say 1,2,3
once 1 has been selected i want to disable options 2 and 3 until page has been refreshed
so maybe those option would grey out and not be selectable
any help appreciated cant find a thing on google
We will group radio buttons in a div:
<div class="readioBtnDiv">
<input type="radio" name="group1" value="1" />1
</div>
<div class="readioBtnDiv">
<input type="radio" name="group2" value="1" />2
</div>
<div class="readioBtnDiv">
<input type="radio" name="group3" value="1" />3
</div>
Now we will disable another radio button when one is selected:
$("input:radio").click(function() {
var $this = $(this);
var value = $this.val();
$this.closest('.readioBtnDiv')
.siblings('.readioBtnDiv')
.find('input:radio[value="' + value + '"]')
.attr("disabled","disabled");
});
Here we go, jQuery way:
HTML:
<form>
<input type="radio" value="1"> 1
<input type="radio" value="2"> 2
<input type="radio" value="3"> 3
</form>
JS:
<script>
$('input').on('click', function() {
$(this).parent().find('input:not(:checked)').attr( "disabled", "disabled" );
})
</script>
To add jQuery to your project - simply insert
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
inside your <head> </head> tag.
UPDATE:
To keep it after page refreshes you should modify your code to this:
<form>
<input type="radio" value="1" id="radio1"> 1
<input type="radio" value="2" id="radio2"> 2
<input type="radio" value="3" id="radio3"> 3
</form>
<script>
$('#'+localStorage.selected).trigger('click');
$('#'+localStorage.selected).parent().find('input:not(:checked)').attr( "disabled", "disabled" );
$('input').on('click', function() {
$(this).parent().find('input:not(:checked)').attr( "disabled", "disabled" );
localStorage.setItem('selected', $(this).attr('id'));
})
</script>
I think all the answers are right and accurate to your question above but according to me you would find this answer more useful and understandable if you are newbie
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function myFunction1() {
document.getElementById("radio2").disabled = true;
document.getElementById("radio3").disabled = true;
}
function myFunction2() {
document.getElementById("radio1").disabled = true;
document.getElementById("radio3").disabled = true;
}
function myFunction3() {
document.getElementById("radio2").disabled = true;
document.getElementById("radio1").disabled = true;
}
</script>
</head>
<body>
<div class="block">
<input onclick="myFunction1();" type="radio" id="radio1" value="Radio1" /><label>Radio1</label>
<input onclick="myFunction2();" type="radio" id="radio2" value="Radio2" /><label>Radio2</label>
<input onclick="myFunction3();" type="radio" id="radio3" value="radio3" /><label>radio3</label>
</div>
</body>
</html>
It's a working example according to your need. Cheers :)
First, i have checked several tutorial sites to clarify syntax such as the OnClick event and the prompt property and relocated the javascript from body to head (I heard this can fix browser-related problems).
For some reason OnClick event does nothing. I have tested website in-browser and radio buttons load correctly.
<!DOCTYPE html>
<html>
<head>
<script>
function checkSkillLevel() {
if(document.getElementById('skill_Easy').checked) {
var ok = prompt("You chose Easy");
}
else if(document.getElementById('skill_Medium').checked) {
var ok = prompt("You chose Medium");
}
else if document(getElementById('skill_Hard').checked) {
var ok = prompt("You chose Hard");
}
else {
var ok = prompt("Welcome to my tic tac toe game! To get started, please pick a skill level.");
}
}
</script>
</head>
<body>
<table cellpadding="10">
<tr>
<td><h1>Tic Tac Toe</h1></td>
</tr>
<tr>
<td>
<form action="" onclick="checkSkillLevel()">
<input type="radio" name="skill" value="Easy" id="skill_Easy" onclick="checkSkillLevel();">Easy<br>
<input type="radio" name="skill" value="Medium" id="skill_Medium">Medium<br>
<input type="radio" name="skill" value="Hard" id="skill_Hard">Hard<br>
</td>
</tr>
Also, I would prefer pure Javascript (no JQuery please) for any ideas.
You should add onclick to all the inputs, and correct the typo in the following line :
else if document(getElementById('skill_Hard').checked) {
Should be :
else if(document.getElementById('skill_Hard').checked) {
Hope this helps.
Snippet
function checkSkillLevel() {
if(document.getElementById('skill_Easy').checked) {
var ok = prompt("You chose Easy");
}
else if(document.getElementById('skill_Medium').checked) {
var ok = prompt("You chose Medium");
}
else if(document.getElementById('skill_Hard').checked) {
var ok = prompt("You chose Hard");
}
else {
var ok = prompt("Welcome to my tic tac toe game! To get started, please pick a skill level.");
}
}
<table cellpadding="10">
<tr>
<td><h1>Tic Tac Toe</h1></td>
</tr>
<tr>
<td>
<input type="radio" name="skill" value="Easy" id="skill_Easy" onclick="checkSkillLevel();"/>Easy<br/>
<input type="radio" name="skill" value="Medium" id="skill_Medium" onclick="checkSkillLevel();"/>Medium<br/>
<input type="radio" name="skill" value="Hard" id="skill_Hard" onclick="checkSkillLevel();"/>Hard<br/>
</td>
</tr>
</table>
Add an onclick-attr or an onchange-attr with the function to each radio-button and it will work.
It's all about which elements are listening to the onclick event. The form does not have onclick, it has onsubmit. The buttons have onclick, though.
<td>
<form action="" onclick="checkSkillLevel()">
<input type="radio" name="skill" value="Easy" id="skill_Easy" onclick="checkSkillLevel();">Easy<br>
<input type="radio" name="skill" value="Medium" id="skill_Medium">Medium<br>
<input type="radio" name="skill" value="Hard" id="skill_Hard">Hard<br>
</td>
Becomes:
<td>
<form action="">
<input type="radio" name="skill" value="Easy" id="skill_Easy" onclick="checkSkillLevel();">Easy<br>
<input type="radio" name="skill" value="Medium" id="skill_Medium" onclick="checkSkillLevel();">Medium<br>
<input type="radio" name="skill" value="Hard" id="skill_Hard" onclick="checkSkillLevel();">Hard<br>
</td>
Additionally, I have one other thing. Why are you using prompt() for showing the user their selection? Use alert() instead.
The following is a simple javascript code to set a value into a textbox. But, it doesn't seem to work. I am not able to find the flaw. Also, the javascript is working only in IE and not in Chrome/Firefox. How do I get out of this trouble?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function reportValue()
{
var form = document.getElementById("billgen");
var radioArray = form["time"];
var months;
for(var i=0;i<radioArray.length;i++)
{
if(radioArray[i].checked)
{
months = radioArray[i].value;
break;
}
}
if(months == "1")
{
e=31*100;
form["total"].value = e;
//document.getElementById("total").value = e; => not working as well
return true;
}
else{
alert("Are you sure the instructor is " + months + "?\nYou may be underestimating the instructor!");
return false;
}
}
</script>
</head>
<body bgcolor="white">
<fieldset>
<legend>Bill Generation</legend>
<form id="billgen" method="post">
<label><input type="radio" name="time" value="1" checked /> 1 Month </label>
<label><input type="radio" name="time" value="3" /> 3 Month </label>
<label><input type="radio" name="time" value="6" /> 6 Month </label>
<label><input type="radio" name="time" value="12" /> 1 Year </label>
<input type="submit" value="submit" onclick="reportValue();" />
<p>
<input type="text" id="total" name="total" />
</p>
</form>
</fieldset>
</body>
</html>
Clicing on a <input type="submit"/> causes the page to reload, so instead of "submit", either use the <button> element or use an <input type="button"/>.
Here is your code with getElementById( instead of getElementById[: JSFiddle and it works.
Just move your code to the end of your html, just before the </body> and it should work, I think the problem is that you are asigning the form to a variable before the form even exists.