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');
});
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>
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()"
I'm still learning javascript. I want to design a todo app. I'm done with the html and css sections. I've done a code that will enable the items on the list to be checkboxed when the tasks are completed. I however want a line to be drawn through the item when they are checkboxed using javascript or preferably jquery.
<!DOCTYPE html>
<html>
<head>
<title>Todolist</title>
<link rel="stylesheet" type="text/css" href="todo.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<h1>Todos</h1>
<div class="center">
<div class="top"></div>
<section id="formdata">
<form>
<input id="new-task-input" type="text" placeholder="What needs to be done?">
<br>
</form>
</section>
<section id="data">
<ul id="todolist-container"></ul>
</section>
</div>
<button type="button" id="add-task-button">Add Task</button>
</div>
<script type="text/template" id="list-item-template">
<li>
<label>
<input type="checkbox" id="checkbox">
<!-- TASK_NAME -->
</label>
</li>
</script>
<script>
var addTaskButton = document.getElementById("add-task-button");
var newTaskInput = document.getElementById("new-task-input");
var todolistContainer = document.getElementById("todolist-container");
var templateElement = document.getElementById("list-item-template");
var template = templateElement.innerText;
addTaskButton.addEventListener('click', function(event) {
var taskName = newTaskInput.value;
newTaskInput.value = "";
var taskHTML = template.replace("<!-- TASK_NAME -->", taskName);
todolistContainer.insertAdjacentHTML('afterbegin', taskHTML);
});
</script>
</body>
</html>
This can be accomplished by simply adding/removing a class using some text-decoration dependent on the state of the checkbox.
For Example:
$("input[type='checkbox']").change(function() {
if($(this).is(':checked')) {
$(this).next('label').addClass('checked');
} else {
$(this).next('label').removeClass('checked');
}
});
label.checked {
text-decoration: line-through;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" value="a" id="checkboxa" name="test[]" />
<label for="checkboxa">Option A</label>
<br/>
<input type="checkbox" value="b" id="checkboxb" name="test[]" />
<label for="checkboxa">Option B</label>
</form>
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.