I have a very simple html file that contains an input element. Whenever the input element is focused on, I want to console.log a message. What happens is, the console.log is fired immediately upon the loading of the page, and never again. I can't use inline onfocus and no jquery. Here is what I've tried.
first
<html>
<body id="fname" >
<input id="fname" type="text" >
</body>
<script>
window.onload = () => document.getElementById("fname").addEventListener(`onfocus`,console.log(`hi`));
</script>
</html>
second
<html>
<body id="fname" >
<input id="fname" type="text" >
</body>
<script>
window.onload = () => document.getElementById("fname").onfocus = console.log(`hi`);
</script>
</html>
What gives?
I think it's because you're not passing in a function to the onfocus event. Try this:
<html>
<body id="someOtherId" >
<input id="fname" type="text" >
</body>
<script>
window.onload = () => document.getElementById("fname").onfocus = () => console.log(`hi`);
</script>
</html>
The console.log statement is executed immediately,
To execute the listener onfocus, you want to wrap it in a function body:
document.getElementById("fname")
.addEventListener(`onfocus`, () => console.log(`hi`) );
You have a duplicated id on the body and didn't provide a function for the onfocus-event.
A working version:
<html>
<body>
<input type="text" >
<input id="fname" type="text" >
</body>
<script>
document.getElementById("fname").onfocus = function() {
console.log("hi");
}
</script>
</html>
I added another input so you can switch between them and see the event fire only on the second one.
Related
I want the value of the input but it always alert 0, how can I get the value of input
below, I cant get the value - the value of input is just numbers
$(document).ready(function() {
var text = Number($("#text").val())
$("#btn").click(function() {
$("#p").text(text)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="text" placeholder="Enter a number" class="txt"><br>
<button id="btn">RUN</button>
<p id="p"></p>
The problem is that you get the variable value when the page loads and you never get it later. You need to get it whenever you click the button. I have edited it for you and now it works.
$(document).ready(function(){
$("#btn").click(function(){
var text = Number($("#text").val())
$("#p").text(text)
})
})
Did you added a js library on your page?
<!DOCTYPE html>
<html>
<body>
<head>
<script src="//code.jquery.com/jquery-3.3.1.js"></script>
</head>
<input type="text" id="text" placeholder="Enter a number" class="txt"><br>
<button id="btn">RUN</button>
<script>
$(document).ready(function() {
$("#btn").click(function() {
alert($("#text").val());
})
});
</script>
</body>
</html>
I'm making an if statement but it doesn't seem to work. I think it has to do with the :focus (jquery is implemented)
I tried using $("input:focus") but when I pressed enter anywhere, (focused or not) it shows the alert.
<script type="text/javascript" src="script.js"></script>
<body style="background-color: #90EE90;">
<center>
Sample text
<br><br><br><br>
<input type="text" name="user-input" placeholder="insert name">
<br><br>
</center>
<script>
var input = $('#user-input').val();
$(document).ready(function () {
$(document).keypress(function (key) {
if (key.which === 13 && $('#user-input').is(':focus')) {
alert("hello");
}
})
})
</script>
</body>
When I press enter while user-input is highlighted, it should've gave the Hello alert, but instead, nothing happens.
change name="user-input" to id="user-input"
If I run dispatchEvent, on an element that has no handlers attached, nothing happens.
<!DOCTYPE html>
<html>
<head>
<title>Title is required</title>
<script>
function submitHandlers() {
var target = document.getElementById('myForm');
var event = new Event('submit');
var result = target.dispatchEvent(event);
// nothing happens because no handler is attached to target submit event
}
</script>
</head>
<body>
<form id="myForm">
<input type="text" name="test" value="this is a test">
<input type="button" value="JS Submit Handlers" onclick="submitHandlers()" >
</form>
</body>
</html>
How can I determine that no handler is attached an then decide to manually run the document.getElementById('myForm').submit(); ?
I need a Vanilla Js answer...
In pseudo Javascript it would be something like:
<!DOCTYPE html>
<html>
<head>
<title>Title is required</title>
<script>
function submitHandlers() {
var target = document.getElementById('myForm');
if(target.hasEventListener('submit')) {
var event = new Event('submit');
var result = target.dispatchEvent(event);
}
else {
target.submit();
}
}
</script>
</head>
<body>
<form id="myForm">
<input type="text" name="test" value="this is a test">
<input type="button" value="JS Submit Handlers" onclick="submitHandlers()" >
</form>
</body>
</html>
Update
I think that this is a Chrome issue, Firefox behavior is different: when you call dispatchEvent if no custom handler is defined, it fires the native "html" submit event (the same as document.getElementById('myForm').submit())
The browser URL is not supposed to be altered but it is anyway. That is supposed to be prevented by event.preventDefault() in the event listener for the cityNameSubmit button.
<!DOCTYPE html>
<html>
<head>
<script>
function bindButton() {
document.getElementById('cityNameSubmit').addEventListener('click', function (event) {
event.preventDefault();
})
}
</script>
</head>
<body>
<form>
<fieldset>
<legend>Choose a City</legend>
<input type="text" name="cityName" id="cityName">
<input type="submit" id="cityNameSubmit">
</fieldset>
</form>
</body>
</html>
You created a function but you forget to call this function. try this:
<script>
function bindButton() {
document.getElementById('cityNameSubmit').addEventListener('click', function (event) {
event.preventDefault();
})
}
window.onload = function() {
bindButton();
}
</script>
In fact in your actual code you are just declaring the function bindButton(), you have to call it in order to attach the event, for example in the body onload event, using <body onload="bindButton()"> like this:
<!DOCTYPE html>
<html>
<head>
<script>
function bindButton() {
document.getElementById('cityNameSubmit').addEventListener('click', function(event) {
event.preventDefault();
console.log("form submission prevented !");
})
}
</script>
</head>
<body onload="bindButton()">
<form>
<fieldset>
<legend>Choose a City</legend>
<input type="text" name="cityName" id="cityName">
<input type="submit" id="cityNameSubmit">
</fieldset>
</form>
</body>
</html>
Or even better using an Immediately-invoked function expression (IIFE), like this:
(function() {
document.getElementById('cityNameSubmit').addEventListener('click', function(event) {
event.preventDefault();
console.log("form submission prevented !");
})
})();
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
<fieldset>
<legend>Choose a City</legend>
<input type="text" name="cityName" id="cityName">
<input type="submit" id="cityNameSubmit">
</fieldset>
</form>
<script>
(function() {
document.getElementById('cityNameSubmit').addEventListener('click', function(event) {
event.preventDefault();
console.log("form submission prevented !");
})
})();
</script>
</body>
</html>
Note:
Make sure to put the script at the end of the body tag, to ensure that the HTML was parsed.
You need to call the function bindButton() somewhere or simply remove this function definition and leave just
document.getElementById('cityNameSubmit').addEventListener('click',function(event){
event.preventDefault();
})
I'm new to Javascript. Can I show direct data from an HTML form on the same page. My code is here:
<html>
<head>
<title></title>
</head>
<script>
document.getElementById("btn").onclick = avc;
function avc(){
var a = document.getElementsByName("firstname").value;
document.getElementsByName("abc").innerHTML = a;
}
</script>
<body>
<form method="post">
First name: <input id="fname" type="text" name="firstname"><br>
<input id="btn" type="submit">
</form>
<div name="abc"></div>
</body>
</html>
Using the ID for the element would also work when getting the value.
var a = document.getElementById('fname').value;
Yes you can with
<script>
document.getElementById('abc').innerHTML=document.getElementById('fname').value;
</script>
at the end
if you want that every time you write something in text box changes the value in div abc try this:
<html>
<head></head>
<body>
<form method="post">
First name: <input id="fname" type="text" name="firstname" onKeyUp="f()"><br>
<input id="btn" type="submit">
</form>
<div id="abc"></div>
<script>
function f() {
document.getElementById('abc').innerHTML=document.getElementById('fname').value;
}
f(document.getElementById('fname').value);
</script>
</body>
</html>
Yes, but you need to subscript the correct element like so...
var a = document.getElementsByName("firstname")[0].value;