ASCII translator on input - javascript

I don't understand about cesar cipher, how it's works, trying to solve this for my homework, but nothing come in my mind. I tried this code, but there's no return on input.
i already maded everything, but the only things that miss in this work is making char code work on a input
const button = document.getElementById("button")
const input = document.getElementById("input").value;
button.onclick = function() {
var texto = input2.charCodeAt().value
input.innerHTML = texto;
}
<h1>ASCII</h1>
<button onclick="myFunction()" type="button" class="btn btn-dark">Coding</button>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="inputGroup-sizing-sm">Say it</span>
<input id="id1" type="text" class="form-control" name="text1" maxLength="1">
</div>
<p id="demo" style="color:red;"></p>

I did it, there was a problem not only with DOM, but also with textarea, idk how to make a input as a output for put the char code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Working ASCII</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
body {
background-color: black;
}
</style>
</head>
<body>
<h1>ASCII</h1>
<button id="button" type="button" class="btn btn-dark">Coding</button>
<div class="input-group input-group-sm mb-3">
<input id="input" type="text" class="form-control" name="text1" maxLength="1">
<div class="form-group">
<br>
<label for="exampleFormControlTextarea1">ASCII CODE</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
<script>
const button = document.getElementById("button")
button.onclick = function() {
alert("ASCII")
var str = document.getElementById("input");
if (str.value=="") {
str.focus();
return;
}
document.getElementById("exampleFormControlTextarea1").innerText = str.value.charCodeAt(0);
}
</script>
</body>
</html>

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>

Displaying user input in the table form using Javascript DOM

i have trouble displaying users' input and have spent some time looking at it and unsure which part had gone wrong. I am supposed to display the "Result" word in green and display user's input in a form of table. I used document.getElementsByClassName('container').innerHTML to add new element in the homepage.
Could anyone explain why the word Result and table doesn't show?
My code:
/*** Home ***/
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="mhsavings.js"></script>
</head>
<style>
.main-content{
width:70%;
/* background-color: lightblue; */
text-align: center;
}
</style>
<body>
<div class="container main-content">
<h1 style="margin-top:40px; margin-bottom: 30px;">Savings</h1>
<h3 style="color:blue;margin-bottom:48px;">How long does it takes for me to reach My Goal?</h3>
<form>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon1">Initial Amount ($)</span>
<input type="text" class="form-control" placeholder="" aria-label="initial Amt" aria-describedby="basic-addon1" id="initialAmt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon2">Yearly interest (%)</span>
<input type="text" class="form-control" aria-label="yearly interest" aria-describedby="basic-addon2" id="yearlyInt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon3">My Goal</span>
<input type="text" class="form-control" id="goal" aria-describedby="basic-addon3" id="goal">
</div>
<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
</form>
</div>
</body>
</html>
/*** in JS file ***/
function calculate(){
'use stict';
var initialAmt = document.getElementById("initialAmt");
var yearlyInt = document.getElementById("yearlyInt");
var goal = document.getElementById("goal");
console.log(goal.value);
var receive = Math.round(initialAmt, 2);
var years = 0;
while (receive < goal) {
receive *= (1 + yearlyInt);
years += 1;
}
// console.log(document.getElementsByClassName('container'));
document.getElementsByClassName('container').innerHTML = "<h3 style='color:green; margin-bottom: 20px'>Result</h3>";
document.getElementsByClassName('container').innerHTML = `<table style='width: 500px'>
<tr>
<th>You will achieve your goal in (years):</th>
<td>${years}</td>
</tr>
<tr>
<th>You will get ($):</th>
<td>${receive}</td>
</tr>
</table>`;
}
#1: name of function not the function execution!
<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
to
<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate">Calculate</button>
#2: getElementsByClassName returns a collection not an element!
#3: lacking of parseInt before calculating
Beside the comments from other user posted in your original question,you code has many incorrect points:
You need to use value to get the input value,so change var initialAmt = document.getElementById("initialAmt"); to var initialAmt = document.getElementById("initialAmt").value;
When use innerHTML,you need to append the value,make sure not to override it
function calculate(){
'use stict';
var initialAmt = parseInt(document.getElementById("initialAmt").value);
var yearlyInt = parseInt(document.getElementById("yearlyInt").value);
var goal = parseInt(document.getElementById("goal").value);
var receive = Math.round(initialAmt, 2);
var years = 0;
while (receive < goal) {
receive *= (1 + yearlyInt);
years += 1;
}
// console.log(document.getElementsByClassName('container'));
var result = document.createElement("div");
var content = "<h3 style='color:green; margin-bottom: 20px'>Result</h3>";
content += `<table style='width: 500px;border:1px'>
<tr>
<th>You will achieve your goal in (years):</th>
<td>`+years+`</td>
</tr>
<tr>
<th>You will get ($):</th>
<td>`+receive+`</td>
</tr>
</table>`;
result.innerHTML = content;
document.getElementsByClassName('container')[0].appendChild(result);
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="mhsavings.js"></script>
</head>
<style>
.main-content{
width:70%;
/* background-color: lightblue; */
text-align: center;
}
</style>
<body>
<div class="container main-content">
<h1 style="margin-top:40px; margin-bottom: 30px;">Savings</h1>
<h3 style="color:blue;margin-bottom:48px;">How long does it takes for me to reach My Goal?</h3>
<form>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon1">Initial Amount ($)</span>
<input type="text" class="form-control" placeholder="" aria-label="initial Amt" aria-describedby="basic-addon1" id="initialAmt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon2">Yearly interest (%)</span>
<input type="text" class="form-control" aria-label="yearly interest" aria-describedby="basic-addon2" id="yearlyInt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon3">My Goal</span>
<input type="text" class="form-control" id="goal" aria-describedby="basic-addon3" id="goal">
</div>
<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
</form>
</div>
</body>
</html>
Using your functio, you may use this code
form fields are text fields. With parseInt() a text string is converted into an integer.
Below I added an extra <div id="result"></div> but if you want to use the container div, you can target this div with document.querySelector(".container").innerHTML = .... This will select the first class with that name. Note that this will replace all html code in the form!
function calculate(){
'use stict';
let initialAmt = parseInt( document.getElementById("initialAmt").value );
let yearlyInt = parseInt( document.getElementById("yearlyInt").value );
let goal = parseInt( document.getElementById("goal").value );
let receive = Math.round(initialAmt, 2);
let years = 0;
while (receive < goal) {
receive *= (1 + yearlyInt);
years += 1;
}
let result = '<h3 style="color:green; margin-bottom: 20px">Result</h3><table style="width: 500px"><tr><th>You will achieve your goal in (years):</th><td>' + years + '</td></tr><tr><th>You will get ($):</th><td>' + receive + '</td></tr></table>';
document.getElementById("result").innerHTML = result;
}
.main-content{
width:70%;
/* background-color: lightblue; */
text-align: center;
}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container main-content">
<h1 style="margin-top:40px; margin-bottom: 30px;">Savings</h1>
<h3 style="color:blue;margin-bottom:48px;">How long does it takes for me to reach My Goal?</h3>
<form>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon1">Initial Amount ($)</span>
<input type="text" class="form-control" placeholder="" aria-label="initial Amt" aria-describedby="basic-addon1" id="initialAmt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon2">Yearly interest (%)</span>
<input type="text" class="form-control" aria-label="yearly interest" aria-describedby="basic-addon2" id="yearlyInt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon3">My Goal</span>
<input type="text" class="form-control" id="goal" aria-describedby="basic-addon3" id="goal">
</div>
<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
</form>
<div id="result"></div>
</div>

Changing text on input (not placeholder)

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.

JavaScript to perform a simple calculation on the click of a button and put result in text box

I am trying to have some JavaScript activate when I click a button.
The action is for a simple calculation to appear in a text box.
This is what I have got so far, but it's not working currently:
function to_mjd() {
var number;
number = 5 + 7;
document.getElementById("mjd").value = number;
}
<input id="mjd" class="textbox2" type="text" name="mjd" placeholder="NNNNN" maxlength="5">
<input type="submit" onclick="to_mjd();" value="CONVERT">
Can anyone point where I'm going wrong please?
I am editing my original post to add the entirety of the html and the javascript code. Hopefully this will help.
ENTIRE HTML:
<!DOCTYPE html>
<html>
<head>
<title>Converter</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- <link rel="shortcut icon" href="favicon.ico" > -->
</head>
<body>
<div class="band1">
<center>
<h1>CONVERTER</h1>
</center>
</div>
<div id ="band" class="band2">
<center>
<form>
<span class="span1">
<span class="date">
Year:<br><br>
<input class="textbox1" type="text" name="year" placeholder="yyyy" maxlength="4">
</span>
<span class="date">
Month:<br><br>
<input class="textbox1" type="text" name="month" placeholder="mm" maxlength="2">
</span>
<span class="date">
Day:<br><br>
<input class="textbox1" type="text" name="day" placeholder="dd" maxlength="2">
</span>
</span>
<span class="span2">
<input type="button" onclick="to_mjd();" value="CONVERT">
</span>
<span class="span3">
MJD:<br><br>
<input id="mjd" class="textbox2" type="text" name="mjd" placeholder="NNNNN" maxlength="5">
</span>
</form>
</center>
</div>
<script src="https://rawgit.com/bgrins/TinyColor/master/tinycolor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
ENTIRE JAVASCRIPT:
$(document).ready(function(){
var color = '#'+('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
document.getElementById("band").style.background = color;
var c = tinycolor(color);
if (c.isDark())
document.getElementById("band").style.color = "#FFFFFF";
else
document.getElementById("band").style.color = "#000000";
function to_mjd() {
var number;
number = 5+7;
document.getElementById("mjd").value = number;
}
});
to_mjd is a local function and button can not see it.
Simply change function location in your js file:
$(document).ready(function(){
var color = '#'+('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
document.getElementById("band").style.background = color;
var c = tinycolor(color);
if (c.isDark())
document.getElementById("band").style.color = "#FFFFFF";
else
document.getElementById("band").style.color = "#000000";
});
var to_mjd = function() {
var number;
number = 5+7;
document.getElementById("mjd").value = number;
}
I will suggest to use input type='button' to replace input type='submit'
Check this
function to_mjd() {
var number;
number = 5 + 7;
document.getElementById("mjd").value = number;
}
<input id="mjd" class="textbox2" type="text" name="mjd" placeholder="NNNNN" maxlength="5">
<input type="button" onclick="to_mjd();" value="CONVERT">
<!DOCTYPE html>
<html>
<head>
<title>Converter</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://rawgit.com/bgrins/TinyColor/master/tinycolor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var color = '#'+('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
document.getElementById("band").style.background = color;
var c = tinycolor(color);
if (c.isDark())
document.getElementById("band").style.color = "#FFFFFF";
else
document.getElementById("band").style.color = "#000000";
});
function to_mjd() {
var number;
number = 5+7;
document.getElementById("mjd").value = number;
}
</script>
</head>
<body>
<div class="band1">
<center>
<h1>CONVERTER</h1>
</center>
</div>
<div id ="band" class="band2">
<center>
<form>
<span class="span1">
<span class="date">
Year:<br><br>
<input class="textbox1" type="text" name="year" placeholder="yyyy" maxlength="4">
</span>
<span class="date">
Month:<br><br>
<input class="textbox1" type="text" name="month" placeholder="mm" maxlength="2">
</span>
<span class="date">
Day:<br><br>
<input class="textbox1" type="text" name="day" placeholder="dd" maxlength="2">
</span>
</span>
<span class="span2">
<input type="button" onclick="to_mjd();" value="CONVERT">
</span>
<span class="span3">
MJD:<br><br>
<input id="mjd" class="textbox2" type="text" name="mjd" placeholder="NNNNN" maxlength="5">
</span>
</form>
</center>
</div>
</body>
</html>
If you're trying to just add 5+7, that code should work, but if you're trying to get the values dynamically, you could go at least a couple routes. The simplest is:
<input type=text onclick="this.value = eval(this.value)" />
The first click will return undefined. Backspace through that and type 5+7. Click again. Returns 12.
You could elaborate on that like so:
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<input type=text id=input />
<button type=button onclick='output.value += eval(input.value)+"\n";'> = </button>
<textarea id=output></textarea>
<style>
body{ width: 99vw; height: 99vh; }
#input{ width: 90%; }
#output{ height: 90%; width: 99%; }
</style>
<script>
var input = document.getElementById('input');
var output = document.getElementById('output');
</script>
</body>

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