How can I get the input value with onblur event? - javascript

I'm trying to get the value input with onblur event and when I use JS modules it doesn't work.
<!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>Calculadora de receitas e despesas</title>
<script type="module" src="main.js"></script>
</head>
<body>
<table>
<tr>
<td >Franchise Fee</td>
<td class="value">
<input type="input" class="form__field" placeholder="R$" name="franchise-fee" id='franchiseFee' onblur="getFranchiseFee()" required />
</td>
</tr>
</table>
</body>
GetElements.mjs the module file:
function getFranchiseFee(franchiseFee){
franchiseFee = document.getElementById('franchiseFee');
// console.log(franchiseFee.value);
return parseFloat(franchiseFee.value);
}
export {getFranchiseFee};
main.js file:
import {getFranchiseFee} from './GetElement.mjs';
console.log(getFranchiseFee());
I tryed to show on console log the value of the input using the functioin in the module and print using the console log in the main.js file.
Now is showing the error message telling that it is not possible

I copied wrongly the export here, but now is correct. This was not the problem

Related

How can I print users input name as he enters in the input box

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>

Textfield Input Value Returning Null

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>

using eventlistener and DOM to change text on another html

I am trying to get input in one html form and then using event listener on a button to move to another html page as well as change the innerHTML of the 2nd html page to the input from 1st page but only the page switches but the innerHTML doesnt change
this is main html
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
</form>
<button id="Butn1" onclick="location.href = 'resume.html';">Submit</button>
<script src="main.js"></script>
this is the 2nd html page
<div>
Name: <br>
<p id="fname1">hello</p>
</div>
<script src="main.js"></script>
and this is the js file
document.getElementById("Butn1").addEventListener("click",func1);
var a=document.getElementById("fname").value;
function func1(){
document.getElementById("fname1").innerHTML = a;
}
you can use this way.
if this is your first page:
<!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>
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
</form>
<button id="Butn1" onclick="handleClick()">Submit</button>
<script>
function handleClick()
{
location.href = 'secondPage.html?name=' + document.getElementById("fname").value;
}
</script>
</body>
</html>
this one would be your second page
<!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>
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('name');
alert(myParam);
</script>
</body>
</html>
but it is not recommended to use this if your string is too long.

how to reset a value of a textarea if another input has value

I'm new to JS I have input and textarea I want to reset the textarea's value, if input is changed
<!doctype html>
<HTML lang="en">
<HEAD>
<META charset="utf-8">
<META name="viewport" content="width=device-width, initial-scale=1">
<TITLE>Hello, world!</TITLE>
</HEAD>
<BODY>
<INPUT type="text">
<TEXTAREA>AAAA</TEXTAREA>
</BODY>
</HTML>
You can achieve this real quick with Jquery as follows:
$('input').change(function() {
$('textarea').val('');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="text">
<br/><br/>
<textarea>AAA</textarea>
You can replace .change with .keyup if you want the textarea value to reset immediately input is typed on.
input event triggers:
.change: Fires the moment the value of input is changed or clicked out of.
.keyup: Fires when a key is released on input.
.keydown: Fires when a key is pressed down on input.
Modify your HTML code as follows:
<!doctype html>
<HTML lang="en">
<HEAD>
<META charset="utf-8">
<META name="viewport" content="width=device-width, initial-scale=1">
<TITLE>Hello, world!</TITLE>
</HEAD>
<BODY>
<INPUT type="text" id="inputField1" onInput="document.getElementById('textarea1').innerHTML = '';">
<TEXTAREA id="textarea1" >aaa</TEXTAREA>
</BODY>
</HTML>

having trouble grabbing html input value using javascript

I have an html file and I want to grab the text that is entered in the input field using javascript. I have tried a few different ways but nothing seems to be working properly. Here is the code that I have right now.
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<input type="text" id="searchingterm">
<form>
<input type="text" id="search">
</form>
<script>
$(document).ready(function(){
var searched = document.getElementById("search").value;
console.log(searched)
})
</script>
</body>
</html>
i also tried using jquery but that didnt do anything either.
basically, the problem is that you are not assigning anything to that input and also you dont have a function to trigger the search.
your code was right, you just needed to change it a little bit.
function search() {
var searched = document.getElementById("search").value;
console.log(searched)
}
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<input type="text" id="search">
</form>
<button onclick="search()"> search</button>
</body>
</html>
here having the script on the body
<!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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<form>
<input type="text" id="search">
</form>
<button onclick="search()"> search</button>
<script>
function search() {
var searched = document.getElementById("search").value;
console.log(searched)
}
</script>
</body>
</html>

Categories

Resources