JS onclick event is not triggered - javascript

Trying to make a question and answer program which shows question 2 once user presses "next question" button. I have provided the HTML, javascript and style.css file to show my work. The problem isn't with the code going visible but clicking button does nothing
My code:
function question2() {
document.getElementById("Question2_visible").style.visibility =
"visible";
}
#Question2_visible {
visibility: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
<link href="style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<h1>Answer these questions:</h1>
<form id="quiz" name="quiz">
<p class="questions">What is your name?</p>
<input id="textbox" type="text" name="question1">
<input id="button" type="button" value="Next Question pls!" onclick=" question2();">
<div id="Question2_visible">
<p class="questions">What is your age??</p>
<input type="radio" id="mc" name="question2" value="<18"> more
<br>
<input type="radio" id="mc" name="question2" value=">18"> less
<br>
</div>
</form>
</body>
</html>

Your name="question2" interferes with the question2 function.
If you have name conflict, call the function on window object:
onclick="window.question2()"

Related

window.alert not working when a form quiz is submitted

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>

Displaying forms one next another [JS]

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');
});

HTML/Javascript && Condition in an If Statement

I am sure there is a very simple fix to this and that I am most likely not doing this the most efficient way possible.
I am trying to create an if statement that will check to see if multiple radio buttons are selected in multiple questions. If they are selected, I would like an alert box to pop up with a certain message. There will be many selection combinations possible so I am assuming many if/else statements(?)
The Javascript in question is located at the bottom.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Spigit Input Form</title>
<meta name="description" content="Spigit Input Form">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<link rel="stylesheet" href="Project_File_CSS.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery_spigit.js"></script>
</head>
<body>
<!--<script src="js/scripts.js"></script>
<script src="New_File_JS.js"></script>-->
<script type="text/javascript" src="selection_storage.js"></script>
<!--<script type="text/javascript" src="recommendation_logic.js"></script>-->
<!---------------------------------------------------------Operating Company Question----------------------------------->
<form name="operatingCompany">
<h3>What Operating Company Are You Employeed With?</h3>
<input type="radio" name="opco" value="GPC" >GPC</br>
<input type="radio" name="opco" value="APC" >APC</br>
<input type="radio" name="opco" value="MPC" >MPC</br>
<input type="radio" name="opco" value="Gulf" >Gulf</br>
<input type="radio" name="opco" value="SCS" >SCS</br></br>
<input type="button" value="Display User Selection" onclick=get_opco() />
</form>
<p id="opco_result"> </p></br>
<!---------------------------------------------------------Prototyped Question----------------------------------->
<form name="prototyped">
<h3>Has the innovation been prototyped?</h3>
<input type="radio" name="prototyped" value="Yes" >Yes</br>
<input type="radio" name="prototyped" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_prototype() />
</form>
<p id="prototyped_result"> </p></br>
<!--------------------------------------------------------Adopted or Tested Question---------------------------->
<form name="adopted_tested">
<h3>Has the innovation been adobpted or tested?</h3>
<input type="radio" name="adopt" value="Yes" >Yes</br>
<input type="radio" name="adopt" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_adopt_test() />
</form>
<p id="adopted_tested_result"> </p></br>
<!------------------------------------------------------Can it make money Question------------------------------->
<form name="makeMoney">
<h3>Is this a product or service that can make money?</h3>
<input type="radio" name="money" value="Yes" >Yes</br>
<input type="radio" name="money" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_money() />
</form>
<p id="makeMoney_result"> </p></br>
<!---------------------------------------------------Alabama Power Specific Question----------------------------->
<h3>What is your innovative idea to help Alabama Power improve safety, grow revenue, reduce cost, or increase operational efficiency?</h3>
<textarea id="alabamaPower" rows="8" cols="50">
</textarea> </br></br>
<input type="button" value="Display User Input" onclick=textareacapture() />
<p id="result"> </p></br>
<!------------------------------------------------IT Specific Question------------------------------------------->
<form name="innovativeTechnology">
<h3>Is your innovation an innovative technology or process that boosts the company's productivity or brings additional value from a vendor relationship?</h3>
<input type="radio" name="innovative" value="Yes" >Yes</br>
<input type="radio" name="innovative" value="No" >No</br></br>
<input type="button" value="Display User Selection" onclick=get_innovative() />
</form>
<p id="innovativeTechnology_result"> </p></br>
<input type="button" value="Submit Form" onclick=get_recommendation() />
<script>
function get_recommendation(){
if((document.operatingCompany.opco[0,1,2,3,4].checked) && (document.prototyped.prototyped[0,1].checked) && (document.adopted_tested.adopt[0,1].checked))
{
alert("Everyday Solutions");
}
}
</script>
</body>
</html>
Use this test to identify whether any radiobutton has been checked:
($(":checked").length > 0)
You may refine the selector if you are only interested in a subset of the radio buttons or checkboxes on the page.
Have you checked at run time what the values are in your variables in the if? Also, currently you are checking that all of them are checked. Do you want to check if some of them are checked?
Also, are you sure you want to use an alert. A modal is really preferable. An alert will block the event loop.
Logical and(&&)
if (x>5 && x<10)
{
alert("your enter value between range 6 to 9");
}
Here, is javascript code you enter only 6 to 9 between range
And what about betwwen like ine PHP/C ?
if (5 < x < 10) {
...
}

Multiplying two input values and showing the result in third box in Jquery Mobile form

I am just new to Javascript and Jquery Coding and I made a form under Jquery Mbile and I want to Multiply two input values and on clicking "calculate" button I want to show the result in third box in Jquery Forms. I tried alot but can't figure out what the problem is . Following is my HTML and Javascript file, please help me in solving this problem, Thanks
<!DOCTYPE html>
<html>
<head>
<title>Nitro Motorbike</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="Calculation.js"></script>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
<div data-role="page" data-title="Nitro Motorbike">
<!-- Header-->
<div data-role="header">
<h1>Nitro Motorbike Total Cost Calculation Screen</h1>
<input type="button" value="Home" id="btnAdd" data-inline="true" data-icon="home" data-iconpos="right" onclick="window.location.href='file:///F:/programming%20business%20apps/Assignment/Nitro%20Motorbikemain%20page%20JQuery.html'">
</div>
<!-- Main-->
<div data-role="main" class="ui-content">
</div>
<form name="totalCostForm">
<div class="ui-field-contain">
<label for="txttotalProduction">Total Production (Please Enter Total Number of Bikes Produced) </label><br>
<input type="text" name="txttotalProduction" id="txttotalProduction"> <br>
<label for="txtcostPerBike"> Cost Per Bike</label><br>
<input type="text" name="txtcostPerBike" id="txtcostPerBike"><br>
<label for="txtcalculateTotalCost">Total Cost</label><br>
<input type="text" name="txtcalculateTotalCost" id="txtcalculateTotalCost" Disabled><br>
</div>
<input type="button" value="Calculate" id="btnAdd" data-inline="true" data-icon="check" data-iconpos="right" onclick="process()"> <br> <br>
<input type="button" value="Click here to Proceed" id="btnAdd" data-inline="true" data-icon="carat-r" data-iconpos="right"
onclick="window.location.href='file:///F:/programming%20business%20apps/Assignment/SydneystoreJquery.html'">
</form>
</div>
<!-- Footer -->
<div data-role="footer">
<h4>Copyright Nitro Motorbike</h4>
</div>
</div>
</body>
</html>
(Javascript Function)
function process()
{
if (!ValidateMyForm()) return;
var totalProduction= document.getElementById('txttotalProduction').value;
var costPerBike = document.getElementById('txtcostPerBike').value;
var calculateTotalCost = (totalProduction)*(costPerBike);
document.getElementById('txtcalculateTotalCost').value= calculateTotalCost;
}
I created a Plunker that works just fine when I remove the ValidateMyForm call (since you didn't include it). I'd say your issue lies in:
if (!ValidateMyForm()) return;

How do I get the JQuery to work with the iCheck Plugin

I've been trying to apply iCheck plugins to my radio and check boxes and I just cannot figure out why my radio buttons keep selecting more than a single option, with no experience in JQuery, I think I might need help with this. I used minimal blue skin so I downloaded the blue.css with the blue.png sprite image, jquery-1.11.3.min.js and icheck.js.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="check.js"></script>
<link rel="stylesheet" href="blue.css">
<script>
$(document).ready(function() {
$('input').iCheck({
checkboxClass: 'icheckbox_minimal-blue',
radioClass: 'iradio_minimal-blue',
increaseArea: '20%'//optional
});
});
</script>
</head>
<label>
<div class="icheckbox_minimal-blue disabled">
<input type="checkbox" name="quux[1]" disabled>
</div>
Foo
</label>
<label for="baz[1]">Bar</label>
<div class="iradio_minimal-blue checked">
<input type="radio" name="quux[2]" id="baz[1]" checked>
</div>
<label for="baz[2]">Bar</label>
<div class="iradio_minimal-blue">
<input type="radio" name="quux[2]" id="baz[2]">
</div></br>
<body>
</body>
</html>
You have to give same name to all your radio inputs.
<div class="iradio_minimal-blue checked">
<input type="radio" name="quux" id="baz[1]" checked>
</div>
<label for="baz[2]">Bar</label>
<div class="iradio_minimal-blue">
<input type="radio" name="quux" id="baz[2]">
</div></br>

Categories