I have read and tried everything I can think of. The other pages that look identical with calling the function onclick work fine. I have tried all I know and read extensively with no avail.
<html>
<head>
<title>Password</title>
</head>
<body>
<div id="output"></div>
<input id="playername" placeholder = "Username" /> <br>
<input id="password" placeholder = "Enter Password"/>
<button onclick="test()">Are you correct?</button>
<script src="pword.js"></script>
</body>
JS:
function test() {
let output = document.querySelector("#output");
let playername = document.querySelector("#playername");
let password = document.querySelector("#password");
if output.value === ("username") && password.value === ("Pa$$w0rd") {
console.log("CORRECT!");
} else {
console.log("Incorrect, try again");
}
}
You forgot a bracket during your if statement
if HERE => ( output.value === ("username") && password.value === ("Pa$$w0rd") ) <= AND HERE {
console.log("CORRECT!");
} else {
console.log("Incorrect, try again");
}
And it's better to do something like this, remove you'r onclick on HTML and do this :
HTML :
<button id="MyButton">Are you correct?</button>
JS :
var MyBtn = document.getElementById("MyButton");
MyBtn.addEventListener("click", test);
if (playername.value === "username" && password.value === "Pa$$w0rd") {
console.log("CORRECT!");
} else {
console.log("Incorrect, try again");
}
You're checking output.value instead of playername.value and the parenthesis are misplaced, here's a snippet with fixed code :
function test() {
let output = document.querySelector("#output");
let playername = document.querySelector("#playername");
let password = document.querySelector("#password");
if (playername.value === "username" && password.value === "Pa$$w0rd") {
console.log("CORRECT!");
} else {
console.log("Incorrect, try again");
}
}
<div id="output"></div>
<input id="playername" placeholder="Username" /> <br>
<input id="password" placeholder="Enter Password" />
<button onclick="test()">Are you correct?</button>
You are checking output.value instead of playername.value.
You can have a look at the working code here: https://repl.it/repls/ImaginaryCandidPerformance
Related
I try to see if the word entered in the form is the correct one. If it is correct then I open another page and otherwise I will get an error message, but I don't know how to make the script for this. Also I don't want to use a submit button.
<form id="form">
<input type="text" name="inputBox" placeholder="Enter your answer"><br>
</form>
Try this:
In this code I check with the key event, if I press enter I call and ask if the answer is "Hello" is correct and I open another page, otherwise I send an alert with an error
<form id="form">
<input id="MyEnter" type="text" name="inputBox" placeholder="Enter your answer"><br>
</form>
<script>
var myenter = document.getElementById("MyEnter");
myenter.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault();
var answer = 'Hello'
var mytext = document.getElementById("MyEnter").value;
if (mytext==answer) {
alert('opening another page');
window.open("https://www.google.com");
}else{
alert("Incorrect answer");
}
}
});
</script>
const input = document.querySelector('input');
const error = document.querySelector('p.error');
const woohoo = document.querySelector('p.woohoo');
const correctAnswer = 'foo bar baz';
const handleInput = (condition) => {
if (condition) {
error.style.display = 'block';
woohoo.style.display = 'none';
return;
}
error.style.display = 'none';
woohoo.style.display = 'block';
window.open('https://google.com');
};
input.addEventListener('keyup', () => handleInput(input.value !== correctAnswer));
<form id="form">
<input type="text" name="inputBox" placeholder="Enter your answer" />
<p class="error" style="color: red; display: none">Incorrect</p>
<p class="woohoo" style="color: green; display: none">Correct</p>
</form>
I have to inputs, and I want to press enter and change the attention from first input to second input without using only the mouse.
So far I created an Event Listener in the first input (jogador1) with keypress event. Inside I made a conditional if the first Input(jogador1) has already a value which is a number and the keypress is 13 then should do something that is changing to the second input. Is That part I don't know.
here is my code :
let jogador1 = document.querySelector('#jogador1');
let jogador2 =document.querySelector('#jogador2');
let output = document.querySelector('#output');
let button = document.querySelector('#button');
let letsCompareValues = (e) => {
e.preventDefault();
let value1 = jogador1.value;
let value2 = jogador2.value;
if (value1 === value2 && !isNaN(value1) && !isNaN(value2)) {
output.innerHTML = 'there is a match';
return
} else {
output.innerHTML ='there is no match';
}
}
button.addEventListener('click', letsCompareValues);
jogador1.addEventListener('click', function(){
jogador1.value = '';
jogador2.value = '';
output.innerHTML = '';
});
//HERE
jogador1.addEventListener('keypress', function(e){
var code = e.keyCode;
if(jogador1.value !== isNaN && code === 13){
jogador2.focus;
}
})
<div>
<label for="jogador1">Player 1</label>
<input type="text" id="jogador1">
</div>
<div>
<label for="jogador2">Player 2</label>
<input type="text" id="jogador2">
</div>
<button id="button">JOGAR</button>
You're close. element.focus() is a function, so you need the parenthesis to invoke it.
Other issues:
You're referring to an element with id 'output', but don't have such an element.
You're using !== isNaN to check if a string is not empty. You should instead use str !== '', or better yet just str.
Use keyEvent.key instead of keyEvent.code.
Tidy up your code before asking people to spend their time reading it. It's a reflection on you.
Use minimal examples, not code dumps, when posting on stack overflow.
let jogador1 = document.querySelector('#jogador1');
let jogador2 = document.querySelector('#jogador2');
let output = document.querySelector('#output');
let button = document.querySelector('#button');
let letsCompareValues = (e) => {
e.preventDefault();
let value1 = jogador1.value;
let value2 = jogador2.value;
if (value1 === value2 && !isNaN(value1) && !isNaN(value2)) {
output.innerHTML = 'there is a match';
return
} else {
output.innerHTML = 'there is no match';
}
}
button.addEventListener('click', letsCompareValues);
jogador1.addEventListener('click', function() {
jogador1.value = '';
jogador2.value = '';
output.innerHTML = '';
});
jogador1.addEventListener('keypress', function(e) {
if (jogador1.value && e.key === 'Enter') {
jogador2.focus();
}
})
<div>
<label for="jogador1">Player 1</label>
<input type="text" id="jogador1">
</div>
<div>
<label for="jogador2">Player 2</label>
<input type="text" id="jogador2">
</div>
<div id="output"></diV>
<button id="button">JOGAR</button>
<head>
function search() {
var n = document.getElementById("search");
if(n === A || n === B) {
location.href = "search.php";
return true;
} else {
alert "Enter Correct value ...";
return false;
}
}
</script>
</head>
I'm using this code for verify entered value and after verification I want call php page to get the entered value for further task
<body>
<form>
<input type="text" id="search" onsubmit="search()" name="bg">
</form>
</body>
Not 100% sure what your asking!
If you are trying to get the value of the input field you need to change your document.getElementid("search");
To document.getElementid("search").value;
As this will be a string you will also need to change your if statement to make sure the value is equal to a 'A' ||'B'
Try this code : why you are not using opening script tag
< script > tag after < head >
<head>
</script>
function search() {
var n = document.getElementById("search");
if(n === A || n === B) {
location.href = "search.php";
return true;
} else {
alert "Enter Correct value ...";
return false;
}
}
</script>
</head>
<head>
<script>
function search_bloodgroup(){
var bloodgroup = document.getElementById("search").value;
if(bloodgroup ==="a+"|| bloodgroup ==="A+" || bloodgroup ==="aplus" || bloodgroup ==="APLUS"){
alert("true");
return true;
}
else {
alert("Enter Correct");
return false;
}
}
</script>
</head>
<body>
<form onsubmit="search_bloodgroup()" action="">
<input type="text" id="search" name="bg"></input>
<input type='submit'></input>
</form>
</body>
</html>
This works fine hopefully this will help.
I have some code that checks if 2 text fields match. This is using the keyup which works fine but I would like it to hide or show a div depending on result. All I have is a code that changes divCheckPasswordMatch?
So I would like it to
$('#match').hide();
$('#nomatch').show();
The js code is :
$(function() {
$("#password2").keyup(function() {
var password = $("#password1").val();
$("#divCheckPasswordMatch").html(password == $(this).val() ? "Passwords match." : "Passwords do not match!");
});
});
My guess is you want to have two <div> displaying different messages using show() and hide(), but I'm not sure, so I did both.
$('#match').hide();
$('#nomatch').hide();
$("#password2").keyup(function() {
var password = $("#password1").val();
if ($(this).val() === password) {
$('#divCheckPasswordMatch').html('Passwords match');
$('#match').show();
$('#nomatch').hide();
} else {
$('#divCheckPasswordMatch').html('Passwords do not match');
$('#match').hide();
$('#nomatch').show();
}
});
<form action="/action_page.php">
First input: <input id="password1" type="text" name="fname"><br>
Second input: <input id="password2" type="text" name="lname"><br>
</form>
<div id="divCheckPasswordMatch"></div>
<div id="match">Match</div>
<div id="nomatch">No Match</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Well following what you want you can do this.
HTML
<input id="password1">
<input id="password2">
<spam id="divCheckPasswordMatch"></spam>
JS
$(function() {
$("#password2").keyup(function() {
var password = $("#password1").val();
var password2 = $("#password2").val();
if(password!== null && password2!== null){
if(password == password2) {
$('#divCheckPasswordMatch').show();
$("#divCheckPasswordMatch").html("Passwords match.")
}
else {
$('#divCheckPasswordMatch').hide();
$("#divCheckPasswordMatch").html("Passwords do not match!")
}
}
});
});
But remember that you also need to anticipate if the password1 is changed too.
Here is working example. For learning purposes I highly suggest using pure javascript instead of jQuery. It is easy to rewrite it to jQuery. I can do it for you if you want.
You are missing blur event, I've added it. Code is not repeatable, it can be still improved. We are using one function for validation.
var field1 = document.getElementById('password1');
var field2 = document.getElementById('password2');
var result = document.getElementById('divCheckPasswordMatch');
function validateInputs() {
// If any of fields is empty then quit
if (field1.value === '' || field2.value === '') {
return;
}
if (field1.value === field2.value) {
result.innerHTML = '';
// optional hide it, clearing text gives almost the same effect, up to you
// result.style.display = 'none';
} else {
result.innerHTML = 'Passwords don\'t match';
// optional show it
//result.style.display = 'block';
}
}
document.getElementById('password1').addEventListener('keyup', validateInputs);
document.getElementById('password2').addEventListener('keyup', validateInputs);
document.getElementById('password1').addEventListener('blur', validateInputs);
document.getElementById('password2').addEventListener('blur', validateInputs);
<input type="text" id="password1">
<input type="text" id="password2">
<div id="divCheckPasswordMatch"></div>
Hello Im trying to create a login, everything its ok but in my password input I want a span that when user click on it show the password and when click again hide the password at the moment I only have the first step (show the password).
Here is the code
You should try with this:
$('#xd').on('mouseup', function () {
$('#Contraseña').attr('type', 'password')
});
$('#xd').on('mousedown', function () {
$('#Contraseña').attr('type', 'text')
});
Code here
Use this code
$("button").click(function(){
if ($("input").attr("type") == "password"){
$("input").attr("type", "text");
$(this).text("Hide password");
} else {
$("input").attr("type", "password");
$(this).text("Show password");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="password" />
<button>Show password</button>
You can just create a variable & initially assign it to false, Now on click change this variable to true and toggle the attr type
var shown=false;
$('#xd').click(function () {
shown=!shown;
$('#Contraseña').attr('type', shown ? 'text' : 'password')
});
Try this ;)
<label for="pass_field_id">Password:</label>
<input type="password" value="your_passowrd" name="password" id="pass_field_id" />
Show
<script>
function swapInput(tag, type) {
var el = document.createElement('input');
el.id = tag.id;
el.type = type;
el.name = tag.name;
el.value = tag.value;
tag.parentNode.insertBefore(el, tag);
tag.parentNode.removeChild(tag);
}
function show_hide_password(target){
var d = document;
var tag = d.getElementById(target);
var tag2 = d.getElementById("showhide");
if (tag2.innerHTML == 'Show'){
swapInput(tag, 'text');
tag2.innerHTML = 'Hide';
} else {
swapInput(tag, 'password');
tag2.innerHTML = 'Show';
}
}
</script>