hello I made a to do list app and I want to clear input after submit here is my code but it doesn't workenter image description here
I expect input section to be null after I submit but every time I have to use backspace then write a new task
First, I would change class="myinput" to id="myinput".
You are assigning user_input to the value of the input at that moment.
Replace your code line to get value by id:
let user_input=document.getElementById("myinput");
let user_input_value=user_input.value;
compare: if(user_input_value!='')
clear with: user_input.value='';
Hi
You just need to save the input element in a variable and set the value property to empty string rather than directly setting user_input = ''.
Also, unless there many inputs you need to loop through, it's better to use id and document.getElementById to identify the input you want rather than document.querySelectorAll
Save the input element as const
const user_input = document.getElementById('myInputId');
// get the value and use as needed
let user_input_value = user_input.value;
After, when you need to reset, set the input elements value to ''
user_input.value = '';
Related
I’m trying to get the value property from my <input> field so I can later use it to fetch data from a specific API URL.
The problem is that my <input> value is always empty no matter what I type in it.
I tried to use document.querySelector() and document.getElementById(); both yield the same result.
const searchBtn = document.querySelector("#searchBtn");
//const inpuValue = document.querySelector("#inputField").value;
const inputValue = (document.getElementById("inputField")).value;
const testing = () => alert(inputValue);
searchBtn.addEventListener("click", testing);
The alert just appears blank, but it doesn’t if I specify a value in the HTML field. So I guess I’m triggering the right button and <input> field. (I use alert because none of my browsers show me the console.log in the console).
The testing function handler is called every time the button is clicked.
In contrast, the inputValue variable is evaluated only once when the code is firstly executed, at initial script evaluation during page load, and never again. The input value gets stored inside the variable and it never gets updated after that. (Strings are immutable in JavaScript: once you store a string in a variable, it won’t change unless you assign that variable to another value.)
If you want to refresh the value every time you click the button, you have to query the element every time:
const testing = () => {
const inputValue = document.getElementById("inputField").value;
alert(inputValue);
}
Or you can keep just a reference to the element and query the value property every time:
const inputElement = document.getElementById("inputField");
const testing = () => alert(inputElement.value);
I’m trying to get the value property from my <input> field so I can later use it to fetch data from a specific API URL.
The problem is that my <input> value is always empty no matter what I type in it.
I tried to use document.querySelector() and document.getElementById(); both yield the same result.
const searchBtn = document.querySelector("#searchBtn");
//const inpuValue = document.querySelector("#inputField").value;
const inputValue = (document.getElementById("inputField")).value;
const testing = () => alert(inputValue);
searchBtn.addEventListener("click", testing);
The alert just appears blank, but it doesn’t if I specify a value in the HTML field. So I guess I’m triggering the right button and <input> field. (I use alert because none of my browsers show me the console.log in the console).
The testing function handler is called every time the button is clicked.
In contrast, the inputValue variable is evaluated only once when the code is firstly executed, at initial script evaluation during page load, and never again. The input value gets stored inside the variable and it never gets updated after that. (Strings are immutable in JavaScript: once you store a string in a variable, it won’t change unless you assign that variable to another value.)
If you want to refresh the value every time you click the button, you have to query the element every time:
const testing = () => {
const inputValue = document.getElementById("inputField").value;
alert(inputValue);
}
Or you can keep just a reference to the element and query the value property every time:
const inputElement = document.getElementById("inputField");
const testing = () => alert(inputElement.value);
I’m trying to get the value property from my <input> field so I can later use it to fetch data from a specific API URL.
The problem is that my <input> value is always empty no matter what I type in it.
I tried to use document.querySelector() and document.getElementById(); both yield the same result.
const searchBtn = document.querySelector("#searchBtn");
//const inpuValue = document.querySelector("#inputField").value;
const inputValue = (document.getElementById("inputField")).value;
const testing = () => alert(inputValue);
searchBtn.addEventListener("click", testing);
The alert just appears blank, but it doesn’t if I specify a value in the HTML field. So I guess I’m triggering the right button and <input> field. (I use alert because none of my browsers show me the console.log in the console).
The testing function handler is called every time the button is clicked.
In contrast, the inputValue variable is evaluated only once when the code is firstly executed, at initial script evaluation during page load, and never again. The input value gets stored inside the variable and it never gets updated after that. (Strings are immutable in JavaScript: once you store a string in a variable, it won’t change unless you assign that variable to another value.)
If you want to refresh the value every time you click the button, you have to query the element every time:
const testing = () => {
const inputValue = document.getElementById("inputField").value;
alert(inputValue);
}
Or you can keep just a reference to the element and query the value property every time:
const inputElement = document.getElementById("inputField");
const testing = () => alert(inputElement.value);
I am very new to Javascript, so sorry if I don't use the correct terminology.
I have a form that can dynamically grow. In other words I have buttons that will add labels and input fields to whenever the user clicks it.
At the end of the form, I'd like to have some "done" button that runs another JavaScript function.
However I notice that all of the input fields have the same id (since the function makes the id the same each time).
What is the correct way to access these variables???
Below is the function to dynamically create the fields.
I havent written the function to use the form yet.
function buildDefaultFields(){
// Define container
var chargeItem_container = document.getElementById("chargeItem_container");
// INPUT Start Date
chargeItem_container.appendChild(document.createTextNode('Start Date: '));
var startDate = document.createElement("input");
startDate.type = 'date';
startDate.name = 'startDate';
startDate.id = 'startDate';
chargeItem_container.appendChild(startDate);
chargeItem_container.appendChild(document.createElement("br"));
}
Don't use an id if its not going to uniquely identify a single element, instead use a class
startDate.className = 'startDate';
then use getElementsByClassName to retrieve them
var elements = document.getElementsByClassName ('startDate');// then loop through the elements
You should dynamically add the elements such that each element gets a new id. You could use a simple counter to append to your id names.
For example, if you keep a global var count = 0, then your first id could be 'startDate-' + count which will be startDate-0, then perform an increment on count, so that the next time you add an element, it will get the id 'startDate-' + count = startDate-1.
Hope that helps.
is it possible to check whether default value (set using value="abcdef") of a field with id="someidset" have changed without having info about this default value? Hope it's kind of clear...
When you update the content of an element, the value property changes. However, the value attribute does not. This means that, presuming the value was defined in the value attribute in the original HTML, you can compare the two to see if the one has changed:
var el = document.getElementById('someidset');
if (el.value != el.getAttribute('value')) {
// value has changed
}
Note that this will only reliably work with type="text" inputs.
Well there are attributes and properties.
var someInput = document.getElementById('someInput');
someInput.value; // inputs value right now
someInput.getAttribute('value'); // inputs value set at start
Try this demo: http://jsfiddle.net/maniator/wVazC/
change the value right after the alert and wait 10 seconds
Sure, you can use the defaultValue property. It should work for most types of <input /> elements. Just check it against the value property.
Here's an example.