I'm having some trouble getting my input value to change when I type a value inside it.
var t = document.createElement('div');
t.innerHTML = '<input type="text" id="myText">';
document.getElementById("news").appendChild(t);
var x = document.getElementById("myText").value; //Grabs the value of the input.
t.onchange = function(){myFunction()} //Input. Onchange..
function myFunction() {
console.log(x); //Logs the value of "x"
}
My problem is when I type some string in the input. "Hello world" as a example. It should print "Hello world" to the console. Instead it prints nothing. Just a blank line. How could I make it to print what I type inside the input box?
Using my script.
The 'change' event fires only when you leave the input field. You probably want an 'input' event here which fires immediately and the listener is registered with oninput
x is a variable that's initialized just once and variables are not bound to the current value of whatever you used to initialize them so you need to read the element's value again
bind a function directly to the the event so it can use this to access the element directly
add the event on the input element, not on the div
document.getElementById("myText").oninput = myFunction;
function myFunction() {
console.log(this.value)
}
Since we don't have onchange on div, it's on input element.
Difference between onchange & onkeyup. (MDN)
onkeyup — The keyup event fires when the user releases a key that was previously pressed.
So, whenever you change value it gets triggered.
onchange — change events fire when the user commits a value change to a form control. This may be done, for example, by clicking outside of the control or by using the Tab key to switch to a different control.
So, unless you tab or click outside of input your function won't get called.
You should replace your code with following.
var t = document.createElement('div');
t.innerHTML = '<input type="text" id="myText">'
document.getElementById("news").appendChild(t);
var input = document.getElementById('myText');
input.onkeyup = myFunction
function myFunction() {
var x = document.getElementById("myText").value; //Grabs the value of the input.
console.log(x); //Logs the value of "x"
}
<div id="news"/>
Related
function insertText(elemID, text) {
var elem = document.getElementById(elemID);
elem.innerHTML += text;
}
This function works well to use buttons to add strings to a textarea in order to create a complex paragraph.
However, if the user adds/deletes/modifies that text with the keyboard, the function will no longer work until the form is refreshed, which loses the text changes.
Is there a way to modify the function to allow resuming use of the function after any keyboard edits without losing the text that has been added and modified?
Basically a non-jQuery duplicate of Why is my text not being added to the textarea after the second change event? .
innerHTML sets the default value of the textarea. Once the textarea was edited by the user, the current value is stored in the value property.
Use
elem.value += text;
instead.
I'm developing a web app that needs to change colour of HTML canvas based on the values of colorpicker.
I have a colorpicker in HTML that I need to get value from every time it updates.
<input type="color" value="#ff0800" id="color">
Currently, this is the code that is associated with the colorpicker in my javascript file.
var backRGB = document.getElementById("color").value;
I am really not sure how this can be achieved.
I have tried other stack exchange question but none of them really meet my requirements so I would really appreciate if someone could show me how this can be achieved.
Adding to the answers already given, We can also attach oninput event handler instead of onchange event. This is another way we can monitor the color picker events from the user.
This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed, while onchange occurs when the element loses focus, after the content has been changed. The other difference is that the onchange event also works on elements. Here is an example:
const backRGB = document.querySelector(".backRCB");
const color = document.querySelector(".color");
color.addEventListener("input",(event)=>{
backRGB.style.backgroundColor = color.value;
// You can also do it with the event object as event object holds the value of the current color
// backRGB.style.backgroundColor = event.target.value;
});
Hope that would be helpful to many users.
You just need to update the value of backRGB variable when the colorpicker value is changed.
To achieve that, you need to attach a handler to the onchange event of your colorpicker:
document.getElementById("color").onchange = function() {
backRGB = this.value;
}
Demo:
This is a working demo:
var backRGB = document.getElementById("color").value;
document.getElementById("color").onchange = function() {
backRGB = this.value;
console.log(backRGB);
}
<input type="color" value="#ff0800" id="color">
Solution with pure javascript:
//listen to the "change event" attached to your color input
document.getElementById("color").addEventListener("change", onChangeColor);
function that get fired after the input value change:
function onChangeColor() {
console.log(this.value); //this.value contains the hexadecimal value of your input
//change your canvas color
}
to change the canvas color check here
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>
I need some clarification, as I have managed to confuse myself. Let's say we have the following code:
var textarea = document.getElementById("myTextarea");
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
var words = textarea.value;
console.log(words);
}
This code runs by first gathering the DOM elements (the button and textarea) into their respective variables. Later in the code, when the button is pressed, textarea.value is placed into the variable words. Fair enough right?
My question is why isn't nothing logged into the console? The textarea variable is created and stored from the DOM after the page loads, which pressumably would be before the user had time to write anything into the textarea. This would mean that textarea.value should equal '' (nothing), as opposed to the string in the textarea at the time that the button was pressed by the user.
If anyone could clear this up for me that would be greatly appreciated.
Thanks :)
This would mean that textarea.value should equal '' (nothing), as opposed to the string in the textarea at the time that the button was pressed by the user.
Nope!
The value property of an input element updates dynamically based on user input or other code that changes it. It matters when you access the value property. Because you access it when the button is clicked, the value set on the element is read when the button is clicked.
If however you did something like this:
var textarea = document.getElementById("myTextarea");
var words = document.getElementById("myButton").value;
button.addEventListener("click", function() {
console.log(words);
}
Then the value would be read earlier (likely being blank, but could be a default value, and auto-save variable, or something else it was set to earlier), and changes by the user would be ignored.
Look at the 2 jsfiddles.
<input id = "myTextarea"/>
<button id= "myButton" type="submit"> test </button>
var textarea = document.getElementById("myTextarea");
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
var words = textarea.value;
console.log(words);
});
In the first one, you are capturing the value of the text area inside the on click event. Thus, you get the value that has already been entered.
<input id = "myTextarea"/>
<button id= "myButton" type="submit"> test </button>
var textarea = document.getElementById("myTextarea");
var button = document.getElementById("myButton");
button.addEventListener("click", function() {
console.log(words);
});
In the second fiddle, you are capturing the value as soon as the DOM is loaded without waiting for the click event to happen. Thus, the value that prints in console is blank.
Thus, whether you will see the value entered or nothing at all depends on when you capture the value, after the event happens or right after the DOM is loaded. Hope this helps.
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);
});