Develop Reference

how to make input null after submiting?

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 = '';

Why i am getting undefined my code output [duplicate]

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);

assign the value of `input ` to a variable but return blank in JS

I want to assign the value of input to a variable in Javascript, but I am not sure why the value of input is always blank.
Here is an example:
let input = document.getElementById('input').value
let val = 'not'
function check() {
//console.log(document.getElementById('input').value) will work
console.log(typeof input)
console.log(input)
}
<input id='input' type='text'>
<button onclick='check()'>Check</button>
The input value is blank (nothing), but the typeof input is string.
If I use document.getElementById('input').value, this will totally work which will display the value of input sucessfully.
Could anyone explain me a little bit why I assign it to a variable won't work?
Thanks for any responds!

Variable assignment val = 'not' takes place at the first time page load. When you need to assign dynamic value, like on a button click, you need an event handling mechanism (In your case, a click event). You are calling a function upon click, but not assigning any value to your variable there. Make assignment inside function like:
function check() {
val = document.getElementById('input').value
console.log(val)
}

Why is the value of my input always empty if I store it in a variable?

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);

How to click a button to add a value to an array and display it

I am currently stuck on trying to use an onclick button to push a value into an array.
let display = document.getElementById('screen');
let results = [];
display.innerHTML = results[0];
$(document).ready(() => {
$('.one').click(function() {
results.push(1);
});
})
I am trying to push 1 into the array when the button is pushed, then display it. However, my current code does not push the function.

It does work, but the line that shows the results must be inside of the click callback. As it is now, the display gets updated just once, before the click happens.
Also, JQuery deprecated "shortcut" event methods (.click()) a while back and recommends the use of .on().
Lastly, innerHTML has performance and security implications, so don't use innerHTML when the string in question doesn't contain any HTML. Instead, use .textContent. But, because you are already using JQuery, you can use .text().
// If you are going to use JQuery, then use it.
// Here, we can get the element with an id of "screen"
// into a JQuery wrapped set object very easily.
// Naming the variable that will hold that JQuery object
// with a $ is a standard convention to remind you that
// the variable holds a JQuery object and not a standard
// DOM object.
let $display = $('#screen');
let results = [];
// And, with JQuery, if you just pass a function directly
// to JQuery, that function is automatically understood to
// be a document.ready callback
$(() => {
$('.one').on("click" ,function() {
results.push(1);
$display.text(results[0]); // This must be in the callback to show the most up to date information
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="one" value="push">
<div id="screen"></div>