Form number input not transferring to javascript as a variable - javascript

I want to use the input value of a form element in a javascript function. However when I declare the variable it doesn't pull the input value from the form. Instead the debugger is just saying; ""
My code is as follows.
HTML:
<input type="number" name="stack" id="stack" min="1" max="600" placeholder="Big Blinds" required>
Javascript:
var stack = document.getElementById("stack").value;
Any advice would be great. Thanks.

It seems like you are getting the value while the input element is still empty. Your code that sets the variable doesn't seem to be encapsulated inside of a function that is run at a time after the input element has had data inputted into it, so the code runs immediately.
You need to make sure that you are getting the value after a value has been inputted.
This is accomplished by adding an event handling function that fires at a particular time. There are a variety of events you can work with (keyup, keydown, input, the form's submit, a button click, etc.). Here's an example of getting the value when a button is clicked.
// Get a reference to the button that will trigger the event function
var btn = document.getElementById("btn");
// Get a reference to the input element (do this outside of the function that
// will need it so you don't wind up scanning the document for it over and over).
// Also, set the variable to the element itself, not a property of the element so
// that if you ever need a different property, you don't have to scan the document
// for the element again:
var input = document.getElementById("stack");
// If you intend to use the value of the element across several functions, declare a
// variable that will hold the value outside of all of them.
var stack = null;
// Set the button up to call a function when it gets clicked.
btn.addEventListener("click", function(){
// When clicked, get the value
stack = input.value;
// Do whatever you want with the stored value.
console.log(stack);
});
<input type="number" name="stack" id="stack" min="1" max="600" placeholder="Big Blinds" required>
<button id="btn">Get Value</button>

Related

How do I get the value of input tag using javascript

Why do I get a empty string "" when I try to get the value of my input field instead of the number I gave.When I type billAmount in the console window,I get "" returned.Why is that?
var billAmount = document.getElementById('bill-id').value;
<html>
<input type="number" id = "bill-id" class="bill-input" placeholder="0">
</html>
Your code only executes once.
If you want to update the variable everytime the user changes the value of the input, listen for the input event:
var billAmount;
document.getElementById("bill-id").addEventListener('input', function(){
billAmount = this.value;
console.log(billAmount);
})
<html>
<input type="number" id = "bill-id" class="bill-input" placeholder="0">
</html>
First, your webpage loads the input element in the DOM. Then, the javascripts starts running. It rapidly collects the input's value which is empty. Presuming the only line of JS is var billAmount = document.getElementById('bill-id').value;, it finishes its jobs. Your JS doesn't detect any change of the input's value. You should add an event listener and change the variable each time you enter something.

unable to fetch input from input field

I am not able to get the input, entered by the user, from the input field; please help me out with this.
I am not able to figure out what is wrong here.
var ftemp = document.getElementById("Farenheit").value;
<td>
<input type="number" id="Farenheit">
</td>
when entering value in input field in the web page, input value is not being fetched at all.
console.log-ing the variable just shows a blank line .
This line of code
var ftemp = document.getElementById("Farenheit").value;
gets you the current value of that input at the time that line of code gets executed.
It does not update when the user changes the inputs value.
If you want it to do just that, you need to add an event listener to the input element that executes whenever the input event occurs:
var ftemp;
document.getElementById("Farenheit").addEventListener('input', function() {
ftemp = this.value;
console.log(ftemp);
})
<input type="number" id="Farenheit">
Add an event listener to the input element.
document.querySelector('input').addEventListener('keyup',function() {
console.log(this.value);
});
<input type="number" id="Farenheit" >

Javascript - Display input inside div

So this is probably an easy one, but I'm just not doing it right. My goal is to send the user input from this textbox:
<input type='text' placeholder='Form Name...' id='formNameInput' required>
Into this Div:
<div id="code_output"></div>
I'm trying to make it appear in real time, and so far I used this to try and do so, but it doesn't work:
document.getElementById("code_output").innerHTML += document.getElementById("formNameInput").value;
Why doesn't it show? Does my code need something to trigger the Javascript?
You're close, but the issue is that you're not using an event handler. The script is executing your code once, as soon as possible (before you have the chance to enter anything into the text input). So, you have to add some sort of event listener so that the copying happens at the appropriate time. Something like below:
document.getElementById('formNameInput').addEventListener('keyup', copyToDiv);
function copyToDiv() {
document.getElementById("code_output").innerHTML = document.getElementById("formNameInput").value;
}
<input type='text' placeholder='Form Name...' id='formNameInput' required>
<div id="code_output"></div>
You need to do that whenever the value of formNameInput changes. For that you need an event.
Your code should look like:
document.getElementById("formNameInput").addEventListener('input', function () {
document.getElementById("code_output").innerHTML += this.value;
});
function change() {
document.getElementById("code_output").innerHTML = document.getElementById("formNameInput").value;
}
document.getElementById('formNameInput').onkeyup = change
maybe this is what you are trying?
You need to attach an event listener to your input that executes a function any time an input event occurs on the field:
formNameInput.addEventListener('input', function(e) {
code_output.textContent = e.target.value
})
<input type="text" placeholder="Form Name..." id="formNameInput" required />
<div id="code_output"></div>
Please note that the above code takes advantage of the fact that browsers automatically create a global variable for each element with a unique id attribute value, and this variable has the same name as the value of the id.
If the concept of events is new to you, this might be a good place to get started:
https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

How to retrieve the value of an input on keyup?

What I am trying to achieve is to output the actual value/text so that I can save it into a variable, but the console gives me a number indicator and it keeps adding to it each time I keyup.
<input id="usp-custom-3" type="text">
var country1 = $("#usp-custom-3").html();
$("#usp-custom-3").on("keyup", function() {
console.log(country1);
});
There's two issues with your code. Firstly you need to get the val() of the input, not it's html(). Secondly, you need to retrieve the value every time the event happens, so place it within the event handler, like this:
$("#usp-custom-3").on("keyup", function() {
var country1 = $("#usp-custom-3").val();
console.log(country1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="usp-custom-3" type="text">

How to call functions with variable parameters

I'm trying to type text into the textbox and when I click the button have it alert me the text. I can't seem to get the variable to work in the function. I'm not sure if "var i = document.getElementById('apple').value;" is correct.
document.querySelector("input[type=button]").addEventListener("click", function(event){
alert(i);});
<form>
Enter:<br>
<input type="text" name="inputbox" id="apple">
<input type="button" name="alert" value="alert">
</form>
<script>
var i = document.getElementById('apple').value;
document.querySelector("input[type=button]")
.addEventListener("click",function(event){
alert(i);});
</script>
Demo: http://codepen.io/michaelaharvey/pen/QyKvme
I also tried:
var i = form.inputbox.value;
but that didn't work either
document.querySelector("input[type=button]")
.addEventListener("click",function(event){
var i = document.getElementById('apple').value;
alert(i);
});
You need to query for the value at the time of click.
The problem is that you are storing the element's value in a variable when the DOM loads. Therefore when the click event is fired, the value property is an empty string (or whatever the value was when the DOM loaded).
Retrieve the value when the click event is fired instead:
Updated Example
document.querySelector("input[type=button]").addEventListener("click", function(event) {
var value = document.getElementById('apple').value
alert(value);
});

Categories