I tried .value , .textContent , innerText .... But nothing worked....
Below is my html
var input = document.getElementById('input').value
var button = document.getElementById('submit')
button.addEventListener('click', () => {
console.log(input) /// Output is always blank
})
<div class="input-section">
<input type="text" id="input" placeholder="Enter the word">
<button id="submit">Find</button>
</div>
You need to read the value property when the event fires, not before it.
let input = document.getElementById('input');
let button = document.getElementById('submit');
button.addEventListener('click',()=>{
console.log(input.value);
})
The reason why it is blank is because, you're initializing the input variable with the initial value inside input, i.e. nothing.
When you click the button, you want the "current" value of input, which means that you'd have to find value on each button click.
Do it like this :
var button = document.getElementById('submit')
button.addEventListener('click', () => {
var input = document.getElementById('input').value;
console.log(input);
})
<div class="input-section">
<input type="text" id="input" placeholder="Enter the word">
<button id="submit">Find</button>
</div>
Related
How do I link a button to an input field? I am trying to create something so that when I click on the button, it will add what was in the text field, to an array (shown below)
const userTags = [];
function addTags(event) {
userTags.push(event.target.__ what do I even put here to get the input data? __)
}
<label>
Tags: <input type="text" name="todoTags"/> <button>Create new tag</button>
</label>
Again, I am trying to link up the button so that when I click it, it will grab the data from the input field, and add that data to the 'userTag' array with the addTags() function.
You can use the event target within your callback function to get the label using const parent = e.target.closest('label'), then use querySelector() to get the input element that is grouped under that label tag using const input = parent.querySelector('input') then set a variable to that value like const inputValue = input.value, then push the value into your array.
Your callback function is placed into an event listener for click.
const btn = document.querySelector('.btn')
const userTags = []
function getValue(e) {
// get the label by traversing up the DOM tree to the closest label element
const parent = e.target.closest('label')
// get the input that lives inside the label element using querySelector
const input = parent.querySelector('input')
// get the inputs value and assign to variable
const inputValue = input.value
// only push values that are not empty
if (inputValue !== "") {
userTags.push(inputValue)
}
console.log(userTags)
}
//event listener for click on btn element
btn.addEventListener('click', getValue)
<label>
Tags: <input type="text" name="todoTags"/> <button class="btn">Create new tag</button>
</label>
let valueArray = []
function getValue(){
let value = document.getElementById("input").value
valueArray.push(value)
document.getElementById("Messages").innerHTML = valueArray
}
<body>
<input type="text" id="input">
<button onclick="getValue()">Click</button>
<div id="Messages"></div>
</body>
Get the element with document.getElementById and then take its value
document.getElementById("Put Id In Here").value
Why can't I insert the value of an input into another input? The following example doesn't work:
document.getElementById("input").oninput = () => {
const input = document.getElementById('input');
const output = document.getElementById('output');
// Trying to insert text into 'output'.
output.innerText = input.value;
};
<input id="input" placeholder="enter value of temperature" />
<br>
<input id="output" />
Thank you!
You should use .value instead of .innerText to set the value to an input element, like:
output.value = input.value;
document.getElementById("input").oninput = () => {
const input = document.getElementById('input');
const output = document.getElementById('output');
output.value = input.value;
};
<input id="input" placeholder="enter value of temperature" />
<br>
<input id="output" />
may be this will be helpful. as per my knowledge. your code will not work on IE. because arrow functions are not supported in IE. however error in your code is "value1.innerText" which is not a right property. because in your code you can see.
value1.innerText=currentValue.value
so if you are fetching value using 'value' property of input. you have to assign a same property for another input box.
so function will be something like this.
var convertTemperature = function convertTemperature() {
var currentValue = document.getElementById("currentValue");
var value1 = document.getElementById("value1");
value1.value = currentValue.value;
};
You can get real time value by below code,
jQuery('input#currentValue').change(function(){
var current_value = jQuery('input#currentValue').val();
jQuery('input#value1').val(current_value );
});
function getId(e){
var xid = e.target.id;
console.log(xid);
}
<form onclick="getId(event)">
<label for="name" id="I am an Span">Nombre</label><br>
<input type="text" name="name" id="tbx_nombre"> <br>
<span id="nombre"></span> <br>
</form>
<div id="result"></div>
When the user click on a texbox the function gets the id of the element, then the deleteSpan method is call with the splitted id of the textbox which is now the id of the span to be changed to an emply string.
I get this error Cannot set property 'onclick' of null at getId
<form onclick="getId(event)">
<input type="text" name="name" id="tbx_name"><br>
<span id="name"></span>
...MORE INPUTS AND SPAN TAGS...
</form>
JS
function getId(e){
var xid = e.target.id; // => tbx_name
var spanId = xid.split("_").pop(); // =>name
document.getElementById(xid).onclick = function(){deleteSpan(spanId)};
}
function deleteSpan(spanId){
document.getElementById(spanId).innerHTML = "";
}
You are getting that error because when you try to set the click handler on the span by ID, you don't currently have the correct ID. It's null, because the click target is currently the form (which doesn't have an ID) instead of the input.
As others mentioned, the click event listener should be attached to the input.
But you also don't need to set a separate click handler within getId--you can just call deleteSpan in the getId function. In fact, if you set it inside another handler like you have, it won't work the first time (unless that's your desired outcome).
function getId(e){
var xid = e.target.id; // => tbx_name
var spanId = xid.split("_").pop(); // =>name
deleteSpan(spanId);
}
function deleteSpan(spanId){
document.getElementById(spanId).innerHTML = "";
}
<form>
<input onclick="getId(event)" type="text" name="name" id="tbx_name"><br>
<span id="name">Span</span>
</form>
onclick attribute event handler should be at input instead of form
<form>
<input type="text" name="name" id="tbx_name" onclick="getId(event)"><br>
<span id="name"></span>
</form>
or even better, use addEventListener for the inputs which have id format as tbx_{{value}}
var allInputs = document.querySelectorAll("input[id^='tbx_']");
allInputs.forEach( s => s.addEventListener( "click", e => getId ));
You can invoke above code when the form has loaded (at document load or window load).
You have to set the attribute onclick in input instead of form to get the expected id. Otherwise you have to check if the target node is INPUT or not:
function getId(e){
if(e.target.nodeName == 'INPUT'){
var xid = e.target.id; // => tbx_name
var spanId = xid.split("_").pop(); // =>name
deleteSpan(spanId);
}
}
function deleteSpan(spanId){
document.getElementById(spanId).innerHTML = "";
}
<form onclick="getId(event)">
<input type="text" name="name" id="tbx_name"><br>
<span id="name">Span</span>
</form>
My HTML:
var searchInput = $("#searchField").val()
$("#searchButton").on("click", function() {
alert(searchInput)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="Search.." id="searchField">
<button type="submit" id="searchButton">Submit</button>
With this code, after I click the "Submit" button, I only get an empty alert.
You are defining the searchInput before any value is set..
Try this:
$("#searchButton").on("click", function() {
var searchInput = $("#searchField").val()
alert(searchInput)
})
https://jsfiddle.net/xpvt214o/110276/
You need to fetch the value inside the click handler:
$("#searchButton").on("click", function() {
alert($("#searchField").val())
})
Bring var searchInput = $("#searchField").val() calculation inside the onclick event.
I have an input tag:
<input id="data-value" name="name" type="text" placeholder="Enter a number" size="20" value="">
I try to get the input value, but I get different value in different places.
function listenForClicks(simpleStorage) {
var button = document.querySelector('button.set')
// (1)
var value = document.getElementById('data-value').value
button.addEventListener('click', function() {
// (2)
var value = document.getElementById('data-value').value
...
}
}
At (1), I get "".
At (2), I get the input value.
I want to know what the reason causes this difference.
If you run listenForClicks before you enter the value, you will get the value defined in the input.
In listenForClicks you bind click function to a button where you get the value when you clicked on the button at any time (most probably after you enter / modify the value).
function listenForClicks(simpleStorage) {
var button = document.querySelector('button.set');
// (1)
var value = document.getElementById('data-value').value;
console.log(value);
button.addEventListener('click', function() {
// (2)
var value = document.getElementById('data-value').value;
console.log(value);
} );
}
listenForClicks();
<input id="data-value" name="name" type="text" placeholder="Enter a number" size="20" value="default">
<button class="set">Click me</button>