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);
});
Related
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.
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>
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">
I know it's simple and there's probably something wrong with my syntax but I just don't understated it. I'm talking about the following:
//declaration of a string
var str_input = "";
//this is supposed to get the new inputs and to store them in str_input
$(document).ready(function(){
str_input = $('input[name=po]').val();
});
//this is on html side, this should make an input field where the user to type in the needed
<input type"text" name = 'po' id="po" value="asd">
That's it, can you help me to sort it out? The problem so far is that str_input is undefined regardless of what is written in the input, though, it saves its initial value.
Your html tag is invalid:
<input type"text" name = 'po' id="po" value="asd">
Should be:
<input type="text" name = 'po' id="po" value="asd">
// ^ Missing this character (=)
Ok, Now I understood, you can do 2 things, first, you can create a button than when the user clicks it calls the function to store the value in the variable like this:
var str_input = "";
//this is supposed to get the new inputs and to store them in str_input
$(document).ready(function(){
$("#MyButton").click(function(){
str_input = $('input[name=po]').val();
})
});
//this is on html side, this should make an input field where the user to type in the needed
<input type"text" name = 'po' id="po" value="asd">
<input type="button" id="MyButton" value="Click Here" />
Or the blur function when the user lose focus of the input text like this:
var str_input = "";
//this is supposed to get the new inputs and to store them in str_input
$(document).ready(function(){
$('input[name=po]').blur(function(){
str_input = $('input[name=po]').val();
})
});
//this is on html side, this should make an input field where the user to type in the needed
<input type"text" name = 'po' id="po" value="asd">
Ok, so here is the solution, though it's a little bit in "from Alf to Alf" style. So, yes, the code I've posted in the main post uses correctly the 'by default' value of the input but the problem comes from that nothing is checking for further changes in the input text field. I'm using $(document).ready... which as far as I know runs during the web project is opened and of course enables the use of some jquery methods within it. There is an interesting function called .change() which actually put the whole thing up for me. Take a glance at the following:
$(document).ready(function(){
$('input[type="text"]').change(function(){
str_input = $('input[name=polynom]').val();;
});
str_input = $('input[name=polynom]').val();
});
The second, third and fourth line make the magic actually, where the code in the .change() method updates str_input on each time a change have appeared in the input box field, whereas the str_input = $('input[name=polynom]').val(); outside of change() takes into account the initial value of the input. That's it... I knew I was forgetting something and yeah...
P.S. Another approach is to use a function and a button (a.k.a. an event-triggered function) which to 'update' the str_input on event. For this way check the post bellow this one.
I want to write javascript code which will recognize which button has been clicked and change its label. There are multiple buttons on the web page so there is no possibility of referring to it by its id. It is identified only by the fact that it has been clicked.
I saw one discussion on stack overflow that suggested writing
<input type = "button" value = " " id ="3" onclick="click(event)">
on the web page, and then defining click as a function with one argument, let's call it
ev. Then I referred to it (inside the function) by
var button = ev.target;
and then tried to change the value of button. It didn't work. I just want a button's label to change when I click it without referring to it by id (I can't tell what it's id is since it's just the button that was clicked amongst many).
Can anyone explain how to do this?
onclick="clickMe(this)">
This will pass a reference to the element clicked on, then you can get/set anything that you normally can from the element e.g:
function clickMe(el) {
el.value = "Hi"; // set
alert(el.value); // get
}
Demo
Note: calling a function click() is not allowed as it is a reserved keyword (just like you wouldn't have a function called function(), which is why I made it clickMe()
Pass the this keyword as a parameter, and use a data attribute to hold the new value :
html :
<input type="button" value=" " id="a3" data-value="test" onclick="func(this)">
js
function func(elem) {
elem.value = elem.getAttribute('data-value');
}
FIDDLE
this is set to the button that is clicked by the browser:
<input type=button onclick=clickhandler>
<script>
function clickhandler() {
this.value = "foo"; // button’s label is now foo
console.log(this.id); // will print the button’s id
}
</script>