I'm curious about how to clear an input on space click while typing in that input. I completely have no idea how to do this. For now I'm at point as I can clear input while NOT typing, but don't know how to do that on the other way.
That's my code for now:
<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>Document</title>
</head>
<body>
<input type="textbox" class="abc">
</section>
<script>
document.addEventListener("keyup", event => {
if(event.code === "Space")
document.querySelector(".abc").setAttribute("value", "");
});
</script>
</body>
</html>```
You should use 'value' to reset your input element like:
document.addEventListener('keyup', (event) => {
if (event.code === 'Space') {
document.querySelector('.abc').value = ''
}
})
In your code your are adding the attribute 'value' into your Input Html element, that is not the current value in your input html element.
Related
function.getElementById("a")
{
var input= document.getElementById("a")
console.log("input")
}
<!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>Document</title>
</head>
<body>
<script src="index.js">
</script>
<div class="a">
<input id="a" placeholder="enter here..." >
</div>
</body>
</html>
I want to print the name of user as same he enters in the input box.
You can try something like this. You need to add an event listener to a variable which represents the input element. The event it listens for is the input event. When any input happens the function fires which logs the value of the input element to the console.
const input= document.querySelector("#a")
input.addEventListener('input', function(event){
console.log(event.target.value);
});
<input id="a" placeholder="enter here..." >
use event keyup
addEventListener('keyup',test)
function test(){
let x = document.getElementById('a').value
console.log(x)
}
<!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>Document</title>
</head>
<body>
<script src="index.js">
</script>
<div class="a">
<input id="a" placeholder="enter here..." >
</div>
</body>
</html>
document.querySelector("#fire_button_creator_button").addEventListener("click",function () {
document.querySelector("body").appendChild(document.createElement("button")).innerText="now click me,i am fire button";
})
document.querySelector("#fire_button_creator_button+button").addEventListener("click",function () {
document.querySelector("p").innerText="i am fired";
})
<!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>Document</title>
</head>
<body>
<button id="fire_button_creator_button">fire button creator</button>
<p></p>
</body>
</html>
I want to creat a button in runtime that can do somthing. Somthing like in my code it inject some text inside <p> </p> tag "i am fired". But i am getting errore. But why?. What is the solution(in vanilla javascript of course)?
document.querySelector("#fire_button_creator_button").addEventListener("click",function () {
const button = document.createElement("button");
document.querySelector("body").appendChild(button).innerText="now click me,i am fire button";
button.addEventListener("click",function () {
document.querySelector("p").innerText="i am fired";
})
})
You have to add the event listener AFTER the new button element is created.
You can do that like the code sample above or other way. The only important part is to do AFTER it is created, so an actual event listener is attached to an actual html element
You can just assign the eventListener to the createdElement immediately instead of selecting it again (which won't work in your case, as the element doesn't even exist yet).
document.querySelector("#fire_button_creator_button").addEventListener("click",function(){
const button = document.createElement("button")
button.innerText="now click me, i am fire button"
button.addEventListener("click",function(){
document.querySelector("p").innerText="i am fired";
})
document.querySelector("body").appendChild(button)
})
<!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>Document</title>
</head>
<body>
<button id="fire_button_creator_button">fire button creator</button>
<p></p>
</body>
</html>
I'm working on an app that makes fetch calls to a dictionary API based on the user's input. The problem is, I can't seem to get the input value from the search bar. Currently, all that's being logged to the console is an empty string. I currently have my code inside of a DOMContentLoaded event listener. When I take my code out of the DOMContentLoaded function, I am getting a null value returned. This is incredibly straightforward but I can't seem to figure out what is getting muddled here. Here is the code;
window.addEventListener('DOMContentLoaded', () => {
const searchBar = document.getElementById('search-bar');
const userInput = searchBar.value;
const searchButton = document.getElementById('search-button');
const test = () => console.log(userInput);
searchButton.addEventListener('click', test);
});
<!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">
<script src="app.js"></script>
<title>Dictionary</title>
</head>
<body>
<h1>Dictionary</h1>
<input type="text" id="search-bar" placeholder="Find a definition"/>
<button id="search-button">Search</button>
<div id="results-area">
</div>
</body>
</html>
Thanks for the help.
The issue was you're getting always the first value of input which is empty, to get the new value call searchBar.value on the click of button.
window.addEventListener('DOMContentLoaded', () => {
const searchBar = document.getElementById('search-bar');
const searchButton = document.getElementById('search-button');
const getInputValue = () => {
let userInput = searchBar.value;
console.log(userInput);
}
searchButton.addEventListener('click', getInputValue);
});
<!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">
<script src="app.js"></script>
<title>Dictionary</title>
</head>
<body>
<h1>Dictionary</h1>
<input type="text" id="search-bar" placeholder="Find a definition" />
<button id="search-button">Search</button>
<div id="results-area">
</div>
</body>
</html>
I am attempting to check if an input contains anything in it upon the press of a button. It only seems to be checking the value upon the first load of the website. It is not detecting any values typed into the input even if the button is pressed again and again. I have tested this by setting the input value to something at default, which gave me a success. I am stumped as to why this is happening.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>test</title>
</head>
<body>
<label>Goals:</label>
<input type="text" class="input-box" id="goals" />
<input
type="button"
name="submit"
value="Submit"
class="button"
id="submit"
/>
</body>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"
></script>
<script src="./app.js"></script>
</html>
JavaScript:
// Gather Inputs
let goals = document.getElementById("goals").value;
console.log("goals");
$("#submit").click(function() {
// Check Goals Input
if (goals === "") {
console.log("fail");
} else {
window.print();
}
});
You need to gather the inputs within the click() function.
$("#submit").click(function() {
// Gather Inputs
let goals = document.getElementById("goals").value;
console.log("goals");
// Check Goals Input
if (goals === "") {
console.log("fail");
} else {
window.print();
}
});
this is test I created, how can I apply the button disable or enable to both inputs? As you can see the below code only works '.link_address'. I set keyup since once dom is loaded, we still need to check for weather inputs are empty or not. what am I doing wrong here? I tried foreach that checks all inputs under 'input_fields_wrap' , maybe I set it up wrong, but wasn't working either
$(document).ready(function() {
$('.confirm-btn').attr('disabled', true);
var valid_check = $('.link_address') || $('.link_name');
valid_check.keyup(function() {
if ($(this).val().length != 0) {
$('.confirm-btn').attr('disabled', false);
} else {
$('.confirm-btn').attr('disabled', true);
}
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="input_fields_wrap">
<input type="text" class="link_address">
<input type="text" class="link_name">
</div>
<button class="confirm-btn">Add More Fields</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="./js/test.js"></script>
</body>
</html>
Your current statement is var valid_check = $('.link_address') || $('.link_name');.
Remember, || is a Javascript construct, not some kind jQuery magic. It has no special combination abilities when used with jQuery, it only means what it has always meant: a logical OR comparison.
So what you're saying is "If $('.link_address') is a truthy value, set valid_check to that. If not, then set valid_check to $('.link_name')". However, jQuery objects are always truthy, so it will never touch $('.link_name') with that expression.
jQuery has it's own way of combining multiple selectors in to one object, which I have demonstrated below. (Also, you want to use prop instead of attr, trust me).
$(document).ready(function() {
$('.confirm-btn').attr('disabled', true);
var valid_check = $('.link_address,.link_name');
valid_check.keyup(function () {
if ($('.link_address').val().length != 0 && $('.link_name').val().length != 0) {
$('.confirm-btn').prop('disabled', false);
}
else {
$('.confirm-btn').prop('disabled', true);
}
})
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="input_fields_wrap">
<input type="text" class="link_address">
<input type="text" class="link_name">
</div>
<button class="confirm-btn">Add More Fields</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="./js/test.js"></script>
</body>
</html>
Here's what you can do:
Note: .input_fields_wrap :input is probably not the best selector here, you should make sure it only captures the inputs that are relevant.
// Upon page load
$(() => {
// When user releases a key on any relevant input field
$('.input_fields_wrap :input').on('keyup', () => {
// Disable confirm button if at least one of them has an empty value
$('.confirm-btn')
.prop('disabled', $('.input_fields_wrap :input')
.toArray()
.some(input => $(input).val().length === 0)
);
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="input_fields_wrap">
<input type="text" class="link_address">
<input type="text" class="link_name">
</div>
<button class="confirm-btn" disabled>Add More Fields</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="./js/test.js"></script>
</body>
</html>
Currently you have var valid_check = $('.link_address') || $('.link_name');
which means your variable (valid_check) will contain a handle to one, or the other. Since the first one is always found, the OR part of it is not executed (by-passed).
The event listener is, thus, only applied to the first element (input) and never the second.
You may want to change your selector so that it applies to all the fields you want to take into account for validation. I used $("input") but you can be more specific if you want.
Something like:
$(document).ready(function() {
// start with the button disabled
$('.confirm-btn').attr('disabled', true);
$(".input_fields_wrap > input").on('keyup', function() {
// all the inputs into an array
var inputList = $(".input_fields_wrap > input");
// check to see if one has a value length of 0 (i.e. no input)
var isDisabled = inputList.toArray().some(f => $(f).val().length === 0);
// enable/disable button now
$('.confirm-btn').attr('disabled', isDisabled);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input_fields_wrap">
<input type="text" class="link_address">
<input type="text" class="link_name">
</div>
<button class="confirm-btn">Add More Fields</button>