Changing text on input (not placeholder) - javascript

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.

Related

I can't show an alert and it doesn't take the name variable validation

I'm doing a brief validation of .name but I can't get the alert to show any ideas? I don't know if I'm missing something or if I'm doing something wrong, I appreciate your help
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">
<link rel="stylesheet" href="./style.css">
<title>Proyecto Poker</title>
</head>
<body>
<form action="" id="form">
<div class="form">
<h1>FORMULARIO DE REGISTRO</h1>
<div class="grupo">
<input type="text" name="" placeholder="Name" id="nombre"><span class="barra"></span>
</div>
<div class="grupo">
<input type="text" name="" placeholder="Apellido" id="apellido"><span class="barra"></span>
</div>
<div class="grupo">
<input type="number" name="" placeholder="Edad" id="edad"><span class="barra"></span>
</div>
<div class="grupo">
<input type="email" name="" placeholder="Email" id="email"><span class="barra"></span>
</div>
<div class="grupo">
<input type="password" name="password" placeholder="Password" id="password"><span class="barra" ></span>
</div>
<button type="submit">Registrarse</button>
</div>
</form>
<script src="./main.js"></script>
</body>
</html>
it does not take the validation of the name variable I do not know if I am omitting something or if it is wrong any help is welcome I am just getting started in javascript and I do not have much knowledge thank you very much
JS
document.getElementById('form').addEventListener('submit', (e) => {
e.preventDefault();
let nombre = document.getElementById('nombre').value;
let apellido = document.getElementById('apellido').value;
let edad = document.getElementById('edad').value;
let email = document.getElementById('email').value;
let password = document.getElementById('passsword');
let expRegNombre = /^\s+$/;
if(nombre == null || nombre.lenght == 0 || expRegNombre.test(nombre)){
alert('nombre invalido')
}
})
This is working as expected. You had a typo where "nombre.lenght == 0" should be nombre.length == 0.
See working snippet below:
document.getElementById('form').addEventListener('submit', (e) => {
e.preventDefault();
let nombre = document.getElementById('nombre').value;
let apellido = document.getElementById('apellido').value;
let edad = document.getElementById('edad').value;
let email = document.getElementById('email').value;
let password = document.getElementById('passsword');
let expRegNombre = /^\s+$/;
if(nombre == null || nombre.length == 0 || expRegNombre.test(nombre)){
alert('nombre invalido')
}
})
<!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="./style.css">
<title>Proyecto Poker</title>
</head>
<body>
<form action="" id="form">
<div class="form">
<h1>FORMULARIO DE REGISTRO</h1>
<div class="grupo">
<input type="text" name="" placeholder="Name" id="nombre"><span class="barra"></span>
</div>
<div class="grupo">
<input type="text" name="" placeholder="Apellido" id="apellido"><span class="barra"></span>
</div>
<div class="grupo">
<input type="number" name="" placeholder="Edad" id="edad"><span class="barra"></span>
</div>
<div class="grupo">
<input type="email" name="" placeholder="Email" id="email"><span class="barra"></span>
</div>
<div class="grupo">
<input type="password" name="password" placeholder="Password" id="password"><span class="barra" ></span>
</div>
<button type="submit">Registrarse</button>
</div>
</form>
<script src="./main.js"></script>
</body>
</html>

input validation does not work - form gets submitted anyway?

I'm creating a website with a form and I can't get the validation to work, and can't figure out what I'm doing wrong. I've tried everything I can think of. The PHP works and it will submit, but it will always submit, and won't stop itself from submitting.
<!DOCTYPE html>
<html lang="En">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="a website for carley Knight art">
<meta name="keywords" content="art artist painter painting store fine-art">
<link rel="favicon icon" href="Images/favicon.ico">
<title>Carley Knight Art</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="slicknav.css">
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slicknav#1.0.8/dist/jquery.slicknav.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation#1.19.3/dist/jquery.validate.min.js"></script>
<script src="js/final.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#nav_menu').slicknav({
prependTo: "#mobile_menu"
});
});
</script>
</head>
<body>
<header>
<img src="Images/Pink%20Stationery%20Literacy%20Google%20Classroom%20Header.png" alt="header">
</header>
<Nav id="mobile_menu"></Nav>
<nav id="nav_menu">
<ul>
<li><a class="current" href="Index.html">Home</a></li>
<li>About</li>
<li>Gallery</li>
<li>Blog</li>
<li>Shop</li>
<li>FAQs</li>
</ul>
</nav>
<main>
<section>
<div id="top">
<h1>Homepage</h1>
<p>Welcome to Carley Knight Art!</p>
</div>
<img src="Images/IMG_2995-768x1024.jpg" alt="carley knight and art" class="center" id="carley">
<p>Hello My name is Carley Knight and I'm an artist living in Milwaukee, WI. I make abstract art in a variety of different mediums, including fibers, acrylics, and digital.</p><br>
<button id="readMore">Read More</button>
</section>
<aside>
<form action="sendmail.php" method="post" name="contact_form" id="contact_form">
<fieldset>
<legend>sign up now!</legend><br>
<p>Sign up for my email list and get a free mini coloring book!</p><br>
<img src="Images/minicoloirngbook.jpg" alt="mini coloring book"><br>
<label for="first_name">First Name:</label>
<input type="text" name="first_name" id="first_name"><span>*</span><br>
<label for="last_name">Last Name:</label>
<input type="text" name="last_name" id="last_name"><span>*</span><br>
<label for="email">Email Address:</label>
<input type="email" name="email" id="email"><span>*</span><br>
<label for="verify">Verify Email:</label>
<input type="email" name="verify" id="verify"> <span>*</span><br>
<div id="buttons">
<input type="submit" id="submit" value="Sign Up">
</div>
</fieldset>
<script>
$("#contact_form").validate();
debug: true
</script>
</form>
</aside>
</main>
<footer>©copywrite 2021 Carley Knight Designs</footer>
</body>
</html>
In HTML all you have to do is give element input the attribute required.
If you wish for more advanced validation then you have to do it in javascript.
<form>
<input type="text" required>
<input value="GO" type="submit">
</form>

If Statement- Javascript/HTML Maths Quiz

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.

How to build a bootstrap form validation?

I have been trying to create a form validated for my call-back form (Full name and Phone number only), but does not work. please can you help me how to update the JavaScript check the valid INPUT information?
I want the valid Full name format such as "First Name Last Name" and UK phone number format as the valid information, the valid fields turn green (with a tickmark), thereby giving immediate feedback to users. please see my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form method="post" action="php/call-back.php">
<div class="row">
<div class="col-lg-12 form-group">
<input id="name" type="text" name="name" placeholder="Enter your Full Name" class="form-control" required>
</div>
<div class="col-lg-12 form-group">
<input id="phone" type="tel" name="phone" placeholder="Enter your phone number" class="form-control" required>
</div>
<div class="col-lg-12 form-group">
<input type="hidden" name="save" value="contact">
<button type="submit" class="btn btn-default pull-right">Submit</button>
</div>
</div>
</form>
<!-- JavaScript -->
<script src="js/bootstrap.js"></script>
<script src="js/jquery-1.10.2.js"></script>
</body>
</html>
Thanks a lot.

problem with my drop down login box?

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.

Categories