I'm currently trying to create a Maths quiz page.
The idea is that the user sees the question, enters the number into the text box, presses the submit button.
If the answer is correct an alert should come up on the window to say the answer was correct and if incorrect the same thing but to say it's wrong.
Can anyone help with my JavaScript? I've been trying to write it so that on the click of the submit button the code runs an if statement to see if the answer is write or wrong therefore triggering the alert.
var Answer1 = "8";
var Guess1 = document.getElementById("AnsI1");
Guess1.addEventListener("click", Check1)
function Check1()
{
if (Guess1 == Answer1)
{
alert("You are correct! Move onto the next question")
}
else
{
alert("You are incorrect, please try again")
}
}
<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Maths Quiz</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Maths Quiz</h2>
<p id="MQ1">4 + 4</p>
<label class ="Albl">Answer:
<input id="AnsI1" type="text">
<button id="Sub1">submit</button>
</label>
<p id="MQ2">12 + 13</p>
<label class ="Albl">Answer:
<input id="AnsI2" type="text">
<button id="Sub2">submit</button>
</label>
<p id="MQ3">9 - 7</p>
<label class ="Albl">Answer:
<input id="AnsI3" type="text">
<button id="Sub3">submit</button>
</label>
<p id="MQ4">29 - 13</p>
<label class ="Albl">Answer:
<input id="AnsI4" type="text">
<button id="Sub4">submit</button>
</label>
<p id="MQ5">3 x 3</p>
<label class ="Albl">Answer:
<input id="AnsI5" type="text">
<button id="Sub5">submit</button>
</label>
<p id="MQ6">7 x 6</p>
<label class ="Albl">Answer:
<input id="AnsI6" type="text">
<button id="Sub6">submit</button>
</label>
<p id="MQ7">6 / 2</p>
<label class ="Albl">Answer:
<input id="AnsI7" type="text">
<button id="Sub7">submit</button>
</label>
<p id="MQ8">30 / 5</p>
<label class ="Albl">Answer:
<input id="AnsI8" type="text">
<button id="Sub8">submit</button>
</label>
<script src="MathsQuiz.js"></script>
</body>
Basically, aside from the typo specified in the comments of your answer, you're attaching the event listener to the input (which fires the alert once it's focused) and then you're not checking for the value of the input.
A better approach would be to attach the listener to the submit button and then check if the value of the input matches the correct answer.
var Answer1 = "8";
var Submit1 = document.getElementById("Sub1");
var Guess1 = document.getElementById("AnsI1");
Submit1.addEventListener("click", Check1)
function Check1()
{
if (Guess1.value == Answer1)
{
alert("You are correct! Move onto the next question")
}
else
{
alert("You are incorrect, please try again")
}
}
<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Maths Quiz</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Maths Quiz</h2>
<p id="MQ1">4 + 4</p>
<label class ="Albl">Answer:
<input id="AnsI1" type="text">
<button id="Sub1">submit</button>
</label>
<p id="MQ2">12 + 13</p>
<label class ="Albl">Answer:
<input id="AnsI2" type="text">
<button id="Sub2">submit</button>
</label>
<p id="MQ3">9 - 7</p>
<label class ="Albl">Answer:
<input id="AnsI3" type="text">
<button id="Sub3">submit</button>
</label>
<p id="MQ4">29 - 13</p>
<label class ="Albl">Answer:
<input id="AnsI4" type="text">
<button id="Sub4">submit</button>
</label>
<p id="MQ5">3 x 3</p>
<label class ="Albl">Answer:
<input id="AnsI5" type="text">
<button id="Sub5">submit</button>
</label>
<p id="MQ6">7 x 6</p>
<label class ="Albl">Answer:
<input id="AnsI6" type="text">
<button id="Sub6">submit</button>
</label>
<p id="MQ7">6 / 2</p>
<label class ="Albl">Answer:
<input id="AnsI7" type="text">
<button id="Sub7">submit</button>
</label>
<p id="MQ8">30 / 5</p>
<label class ="Albl">Answer:
<input id="AnsI8" type="text">
<button id="Sub8">submit</button>
</label>
<script src="MathsQuiz.js"></script>
</body>
</html>
Possibly try calling the event listener after instantiating the function.
Related
the idea is to change the text inside the text input with a button, but i cant get it to work even without it! just by pure code i want to set it to '123' but it wont change no matter what, clearly the problem is in the HTML but i dont seem to find it. Here's what im writing in JS :
let contraseña = document.getElementById("contraseñaGenerada");
contraseña.value = "123";
I also tried with the following but it didnt work either.
contraseña.innerText = "123";
Here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Generator</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1 class="Texto">Welcome to our password generator.</h1>
<h3 class="Texto">Use our free online generator to get access to a highly secure random password of your liking. Choose the characters you want on your password and let the generator do the rest.</h3>
<br><br><br>
<h2 class="Texto">Customize your password.</h2>
<br>
<div id="divCentro">
<input type="text" name="contraseñaGen" id="contraseñaGenerada" >
<div id="botones">
<button class="boton">Copy to clipboard.</button>
<button class="boton">Generate again.</button>
</div>
</div>
<div id="Caracteristicas">
<div id="Izquierda">
<label for="barritaRange" class="TextoChico">Longitud de la contraseña: <br></label>
<input type="number" id="numeroLongitud"><input type="range" name="barrita" id="barritaRange">
</div>
<div id="Derecha">
<input type="checkbox" id="FacilDecir">
<label for="FacilDecir" class="TextoChico" >Facil de decir.</label>
<input type="checkbox" id="Minus">
<label for="Minus" class="TextoChico" >Incluye minusculas.</label>
<input type="checkbox" id="Mayus">
<label for="Mayus" class="TextoChico" >Incluye mayusculas.</label>
<input type="checkbox" id="Nums">
<label for="Nums" class="TextoChico" >Incluye numeros.</label>
<input type="checkbox" id="Simbolos">
<label for="Simbolos" class="TextoChico" >Incluye simbolos.</label>
</div>
</div>
</div>
</body>
</html>
You can always set input value with element.value property
let contraseña = document.getElementById("contraseñaGenerada");
contraseña.value = 'My Value';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Password Generator</title>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1 class="Texto">Welcome to our password generator.</h1>
<h3 class="Texto">Use our free online generator to get access to a highly secure random password of your liking. Choose the characters you want on your password and let the generator do the rest.</h3>
<br><br><br>
<h2 class="Texto">Customize your password.</h2>
<br>
<div id="divCentro">
<input type="text" name="contraseñaGen" id="contraseñaGenerada" >
<div id="botones">
<button class="boton">Copy to clipboard.</button>
<button class="boton">Generate again.</button>
</div>
</div>
<div id="Caracteristicas">
<div id="Izquierda">
<label for="barritaRange" class="TextoChico">Longitud de la contraseña: <br></label>
<input type="number" id="numeroLongitud"><input type="range" name="barrita" id="barritaRange">
</div>
<div id="Derecha">
<input type="checkbox" id="FacilDecir">
<label for="FacilDecir" class="TextoChico" >Facil de decir.</label>
<input type="checkbox" id="Minus">
<label for="Minus" class="TextoChico" >Incluye minusculas.</label>
<input type="checkbox" id="Mayus">
<label for="Mayus" class="TextoChico" >Incluye mayusculas.</label>
<input type="checkbox" id="Nums">
<label for="Nums" class="TextoChico" >Incluye numeros.</label>
<input type="checkbox" id="Simbolos">
<label for="Simbolos" class="TextoChico" >Incluye simbolos.</label>
</div>
</div>
</div>
</body>
</html>
After almost half an hour i realized its because my
<script src="script.js"></script>
was on the top instead of bottom of body, make sure to add it to the end.. omg.
So, I am trying to make a quiz with html/js. I searched up how to reference an ID from js but even then the js function isn't working when I click the D option and submit.
Basically, I'm trying to get a window alert once someone has pressed submit on an answer option.
What the code outputs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="missingletter.css">
<title>Missing letter</title>
</head>
<body>
<div class="images"></div>
<div class="wordToGuess"></div>
<form action="">
<p class="question">What is the missing letter?</p>
<!-- image of cat -->
<p class="cat">_ A T</p>
<input type="radio" id="c" name="cat" value="cat">
<label for="cat" class="answer options">C</label><br><br>
<input type="radio" id="m" name="mat" value="mat">
<label for="cat" class="answer options">M</label><br> <br>
<input type="radio" id="d" name="dat" value="dat">
<label for="cat" class="answer options">D</label><br> <br>
<input type="submit" value="submit">
</form>
<script>
if ($('radio').attr("d") == "submit") {
window.alert("Correct")
} else {
window.alert("try again")
}
</script>
<div class="letters"></div>
</body>
</html>
You have a multitude problems.
To use the jQuery $ function you must load the jQuery library. You can get it from its website
The selector radio does not look up an element by its ID, it looks up all <radio> elements… which don't exist in your document or in HTML. To look up an element by its ID you need $('#The_ID')
attr(...) fetches the value of the attribute with the name passed from the selected element. None of your elements have d="something".
You are running this code while the document loads, which is before the user will have had a chance to pick an option. You need to listen for the submit event (and then stop the form from submitting to the server)
Your checkboxes all have different names, so multiple of them can be selected at once
The for attribute of a <label> has to match the id of the input it is associated with.
Assuming your goal is:
WHEN the user clicks the submit button
FIND which checkbox they checked
CHECK if they picked option dat (although that is the wrong answer)
Then you need something along the lines of:
$('form').on('submit', event => {
event.preventDefault();
const choice = $('input[name="missing"]:checked').val();
if (choice === 'dat') {
alert("Correct");
} else {
alert("try again");
}
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<form action="">
<p class="question">What is the missing letter?</p>
<!-- image of cat -->
<p class="cat">_ A T</p>
<input type="radio" id="c" name="missing" value="cat">
<label for="c" class="answer options">C</label><br><br>
<input type="radio" id="m" name="missing" value="mat">
<label for="m" class="answer options">M</label><br> <br>
<input type="radio" id="d" name="missing" value="dat">
<label for="d" class="answer options">D</label><br> <br>
<input type="submit" value="submit">
</form>
You must add a submit listener to the form. From there, you can check if the value is correct to show the correct alert. When using radio button, use the same name attribute to group them.
<form id="myForm" action="">
<p class="question">What is the missing letter?</p>
<!-- image of cat -->
<p class="cat">_ A T</p>
<input type="radio" name="answer" value="cat">
<label for="cat" class="answer options">C</label><br><br>
<input type="radio" name="answer" value="mat">
<label for="cat" class="answer options">M</label><br> <br>
<input type="radio" name="answer" value="dat">
<label for="cat" class="answer options">D</label><br> <br>
<input type="submit" value="submit">
</form>
$('#myForm').on('submit', function (e) {
e.preventDefault();
if ($('#myForm input[name="answer"]:checked').val() === 'cat') {
window.alert("Correct");
} else {
window.alert("try again");
}
});
Try This
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="missingletter.css">
<title>Missing letter</title>
</head>
<body>
<div class="images"></div>
<div class="wordToGuess"></div>
<form action="" id="theform">
<p class="question">What is the missing letter?</p>
<!-- image of cat -->
<p class="cat">_ A T</p>
<input type="radio" name="option" value="cat">
<label for="cat" class="answer options">C</label><br><br>
<input type="radio" name="option" value="mat">
<label for="cat" class="answer options">M</label><br> <br>
<input type="radio" name="option" value="dat">
<label for="cat" class="answer options">D</label><br> <br>
<button type="submit" id="btn">Submit</button>
</form>
<script>
const btn = document.querySelector('#btn');
btn.onclick = function(){
const options = document.querySelectorAll('input[name="option"]');
let selectedValue;
for (const option of options) {
if (option.checked) {
selectedValue = option.value;
break;
}
}
if(selectedValue == 'cat'){
alert('Correct.')
}else{
alert('Try Again.')
}
};
</script>
<div class="letters">
</div>
</body>
</html>
I'm just doing a short form with 2 questions. I want the second one to appear onclick of the submit button of first question. I've tried several things but doesn't works :/
It seems to reload the page everytime i click on the submit button.
I begin so maybe it's a really stupid error.
Thanks !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="question1">
<h2>Salamèche est-il de type feu ?</h2>
<div class="row">
<div>
<input type="radio" name="question1" id="oui1" value="oui" >
<label for="oui1" class="oui">OUI</label>
</div>
<div>
<input type="radio" name="question1" id="non1" value="non">
<label for="non1" class="non ">NON</label>
</div>
</div>
<input type="submit" value="Submit">
</form>
<form id="question2">
<h2>Tiplouf est-il de type plante ?</h2>
<div class="row">
<div>
<input type="radio" name="question1" id="oui1" value="oui" >
<label for="oui2" class="oui">OUI</label>
</div>
<div>
<input type="radio" name="question1" id="non1" value="non">
<label for="non2" class="non ">NON</label>
</div>
</div>
<input type="submit" value="Submit">
</form>
<form id="question3">
<h2>Tiplouf est-il de type plante ?</h2>
<div class="row">
<div>
<input type="radio" name="question1" id="oui1" value="oui" >
<label for="oui3" class="oui">OUI</label>
</div>
<div>
<input type="radio" name="question1" id="non1" value="non">
<label for="non3" class="non ">NON</label>
</div>
</div>
<input type="submit" value="Submit">
</form>
<script src="js/script.js"></script>
</body>
</html>
The Javascript
function changeform(x){
let nextForm = x + 1;
for (i=0; i <= x; i++) {
document.getElementById(i).addEventListener('submit', function() {
$('question' + i).css('display','none');
$('question' + nextForm).css('display','block');
});
}
}
function checked(x) {
for (i=0; i <= x; i++) {
var oui = 'oui'+i;
var non = 'non'+i;
console.log(oui);
$(oui).addEventListener('click', function() {
$(oui).className = 'cheked';
});
$(non).addEventListener('click', function() {
$(non).className = 'cheked';
});
}
}
checked(3);
changeform(3);
submit event always reloads the browser window to stop that write
document.getElementById(i).addEventListener('submit', function(event) {
event.preventDefault(); // this won't let submit action to reload window
$('question' + i).css('display','none');
$('question' + nextForm).css('display','block');
});
Guys I have this html with the following code.It has 2 forms.formA and form B.I have icluded a java script also.I want to make the formB slide down,when I click the link "Internet banking" above form A and when i click on "card payment" vice versa.
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Payment Page</title>
<link rel="stylesheet" href="demo1.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.creditCardValidator.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
this is the javascript I added.
<script type="text/javascript">
$(document).ready(function(){
$("#formA").click(function(){
$("#internet").slideToggle("slow");
});
});
</script>
<div class="demo">
<form id="formA">
Card Payment
Internet banking
<h2>Card Payment</h2>
<input type='hidden' id='ccType' name='ccType' />
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
<label for="card_number">Card number</label>
<input type="text" name="card_number" id="card_number">
<div class="vertical">
<label for="expiry_date">Expiry date <small>mm/yy</small>
</label>
<input type="text" name="expiry_date" id="expiry_date" maxlength="5">
<label for="cvv">CVV</label>
<input type="text" name="cvv" id="cvv" maxlength="3">
</div>
<div class="vertical maestro">
<label for="issue_date">Issue date <small>mm/yy</small>
</label>
<input type="text" name="issue_date" id="issue_date" maxlength="5"> <span class="or">or</span>
<label for="issue_number">Issue number</label>
<input type="text" name="issue_number" id="issue_number" maxlength="2">
</div>
<label for="name_on_card">Name On card</label>
<input type="text" name="name_on_card" id="name_on_card">
<input type="submit" value="Pay Now !">
</form>
<form id="formB">
<div id="internet">
Card Payment
Internet banking
<h2>Internet Banking</h2>
<ul class="cards">
<li class="visa">Visa</li>
<li class="visa_electron">Visa Electron</li>
<li class="mastercard">MasterCard</li>
<li class="maestro">Maestro</li>
</ul>
</form>
</div>
</body>
here is the #http://jsfiddle.net/pz83w/5/ demo.Im new to java script,so this is my experiment.Couldsomeone figure how to do this?
You need to modify your function in the following way:
$(document).ready(function(){
$(".tabHeader").click(function(){
$(".form").each(function(){
if ($(this).hasClass('show')) {
$(this).slideUp(400).removeClass('show');
} else {
$(this).delay(400).addClass('show').slideDown();
}
});
});
});
Here is working fiddle - http://jsfiddle.net/pz83w/7/
Remember, since you have two buttons, it's better to use class selector than to use id, same with your forms. That you can add a blank class (like 'show' in the example) to selected item and animate it the way you want.
Fiddle is updated, check HTML section, since I added classes to your forms.
i have a simple Jquery script which allow me to place a nice drop down login box but i have a simple issue with it
when i tried to place more than 1 box lets say 5 the script totally messed
i believe its something regarding the DIV id's and duplication but i don't find a way to resolve this problem
JS code
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
html code
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script src="js/login.js"></script>
</head>
<body>
<div id="bar">
<div id="container">
<!-- Login Starts Here -->
<div id="loginContainer">
<span>Login</span><em></em>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span>Forgot your password?</span>
</form>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
</body>
</html>
Yes, Change the ID's and It will work for more than one.