We Keep Coding

How can i get value using data.get() function

I am trying to get the value of a textarea that I have append into a fieldset of my form.
To do so, when I submit my form, the following code is triggered:
function handleSubmit(e) {
e.preventDefault();
console.log(document.getElementById('Observation_1').value);
const data = new FormData(e.target);
const value = data.get('Observation_1');
console.log(value);
}
const form = document.querySelector('form');
form.addEventListener('submit', handleSubmit);
<form>
<textarea id="Observation_1"></textarea><br>
<button type="submit">Test</button>
</form>
however, my console.log (value); returns me null, while my console.log(document.getElementById('Observation_1').value);
return me the content of my textarea.
Can someone explain me why i have a null return and help me to fix my code so i can get the actual content of my textarea please.

You probably don't have a name="Observation_1" attribute on the textarea.

Button not clicking in HTML and JavaScript

My question is the following in JavaScipt and HTML:
let submit = document.getElementById("button");
let text = document.getElementById("inputForm");
submit.addEventListener('сlick', function () {
let textValue = text.value;
console.log("The input is " + textValue)
});
I am sure I connected the HTML to JS correctly via the script attribute.
<div class="input">
<h3 id="inputText">Ввод:</h3>
<input id="inputForm" />
<button id="button">Добавить</button>
</div>
Here is the part of the Code I want to work, but the Button has no effects. Initially I was putting a lot of fonts on a button and input field in css, but then I deleted them and it still doesn't work. By work I mean to print the input of the input field to the console.

I don't know what it was, but you had some weird character in there I think... all I did was removing the click and the bracket from the AddEventListener function and rewrite it. Strange, I have to admit. Just textValue.Value is wrong it needs to be lowercase textValue.value otherwise it was completely fine.
For all reading, this create a snippet and try run with textValue.value this was not the mistake. The event listener wasn't set up somehow.
let submit = document.getElementById("button");
let text = document.getElementById("inputForm");
submit.addEventListener("click", function () {
let textValue = text.value;
console.log("The input is " + textValue)
});
<div class="input">
<h3 id="inputText">Ввод:</h3>
<input id="inputForm" />
<button id="button">Добавить</button>
</div>
Edit: so I couldn't leave this open, because many of you and myself were confused by which char could it be. I analyzed it in Notepad++ and wanted to see all chars but there was no invisible char like CR or LF. My next thought was the encoding because #vnikonov_63 was writing cyrillic chars inside his html. What I did was transform the code to Windows-1251 (https://de.wikipedia.org/wiki/Windows-1251) and there you can see the result...
submit.addEventListener('СЃlick', function () {
Everything is the same but not the c. I compared Windows-1251 (cyrillic) and Windows-1250 (https://de.wikipedia.org/wiki/Windows-1250 Middle European) Encodings and the c has the exact same Position. So all of this is just some encoding issue. Surely a cwhich is not really a c as javascript expects it, won't set up a eventlistener because javascript doesn't know a event called СЃlick. As I am not an expert with encodings i can't explain to you why the СЃ shows up as an c but i am pretty sure that was the problem.

I would work with the form tag. There is an event for submit when you click the submit button which is type of submit.
code:
document.querySelector("form").addEventListener("submit", (e) => {
var text = document.querySelector("#inputForm");
console.log(text.value);
});
<form action="javascript:void(0);">
<h3 id="inputText">Ввод:</h3>
<input id="inputForm" />
<button type="submit">Добавить</button>
</form>

The issue is with the Value property. It should be .value.
let submit = document.getElementById("button");
let text = document.getElementById("inputForm");
submit.addEventListener('click', function () {
let textValue = text.value;
console.log("The input is : " + textValue);
});

How do I wait for input to be filled in an html page and then print it's value to the console in javascript?

I have a HTML page with an input field
Someone enters some text into it
They click a button
I want to grab the value of the input field AFTER they click the button with some JS code(client-side) and then print it to the console/save it to a file.
How would I go about doing this?
I've tried looking but I can't find anything like this at all :/
Thanks! :)

This example should help you to achieve your goals.
const inputNode = document.getElementById('input');
const buttonNode = document.getElementById('button');
buttonNode.addEventListener('click', () => {
const inputValue = inputNode.value;
// do what ever you wan't
});
<input id="input" type="text" />
<button id="button">Click</button>

Try this:
// This function is called by the HTML code onclick on the button
var get_content_of_input = function(){
var user_input = document.getElementById("text_field").value;
// Now you can use the variable user_input containing the text
}
<input id="text_field">Please enter Text</input>
<button id="button" onclick="get_content_of_input()">Click here to sumbit</button>
The content of the text field will now be saved in the variable "user_input".

Showing form input on submit

I have a form with one input field and when I press enter I would like to see this input written under the form. I would like to have as many inputs as possible, each new one to be displayed under the previous one.
I tried it like this but I failed.
<form>
<input type="text" name="" value="" id="form-input">
</form>
<ul>
<li id="form-list"></li>
</ul>
And then inside my <script> tag:
var formInput = document.getElementById("form-input")
var formOutput = document.getElementById("form-list")
formOutput.innerHTML = formInput.value;
formInput.onsubmit = function() {
formOutput.innerHTML = this.value;
}
When I press enter it refreshes the page, if I change onsubmit to oninput it displays what I'm writing but it is not saved.
Is it possible to display multiple inputs like this? Thanks

I'm not sure if I understood your question correctly but here is one way to listen for the 'enter' key press on an input element and create a dynamic list of input elements with the entered value.
var inputEl = document.getElementById("in");
var targetList = document.getElementById("list");
function createItem(text){
var listItem = document.createElement('li');
var input = document.createElement('input');
input.type = 'text';
input.value = text;
listItem.appendChild(input);
targetList.appendChild(listItem);
}
inputEl.addEventListener('keydown', function(e) {
if (e.keyCode == 13) {
createItem(inputEl.value);
inputEl.value = '';
e.preventDefault();
return false;
}
})
<form>
<input id="in" type="text" name="" value="">
</form>
<ul id="list">
</ul>

When I press enter it refreshes the page, if I change onsubmit to
oninput it displays what I'm writing but it is not saved.
You can use cookies to store and persist data on every refresh
https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie
or WebStorage/Application Storage
https://www.w3schools.com/html/html5_webstorage.asp
But I really advise that learn to use server-side scripting with a database so your data will have permanent persistence across browser sessions
https://www.w3schools.com/php/default.asp

You can make your code run with these changes in HTML and your Javascript:
var formInput = document.getElementById("form-input")
var formOutput = document.getElementById("form-list")
function AddElement() {
var NewValue = formInput.value;
var li = document.createElement('li');
var text = document.createTextNode(NewValue);
li.appendChild(text);
formOutput.appendChild(li);
return false;
}
<form onsubmit="return AddElement();">
<input type="text" name="" value="" id="form-input">
</form>
<ul id="form-list"></ul>

Add form input to array with javascript using unshift()

I am trying to add elements to an array via a form. I am using the unshift() method. The code below doesn't work and I would like to know why.
<form>
<input id="input"> </input>
<input type = "button" id="button"> Click me </input>
</form>
<script>
var input = document.getElementById("input").value;
var button = document.getElementById("button");
var myArray = [];
myArray.unshift(input);
button.onclick = function alerted (){
alert(myArray);
};
</script>

Your quoted code runs immediately when the page is loaded. The form field won't have anything in it then, so its value will be ''. When you alert that, the default toString operation on the array will result in '' and the alert will be blank.
You want to run your unshift code in response to a user event, such as the button being clicked, rather than right away. You can do that by setting input to be the element (remove .value from that line) and then moving your line with unshift into the function you're assigning to onclick, adding the .value there:
button.onclick = function alerted (){
myArray.unshift(input.value);
alert(myArray);
};
Other notes:
You never write </input>. Normally you don't close input tags at all. If you're writing XHTML (you probably aren't), you'd put the / within the main input tag like this: <input id="input" />. But again, you're probably not writing XHTML, just HTML.
The value (caption) of an input button goes in its value attribute, not content within opening and closing tags. (You would use opening and closing tags with the button element, not input.)
Taking all of that together, here's a minimalist update: Live copy | source
<form>
<input id="input"><!-- No ending tag -->
<input type = "button" id="button" value="Click me"><!-- No ending tag, move value where it should be -->
</form>
<script>
var input = document.getElementById("input"); // No .value here
var button = document.getElementById("button");
var myArray = [];
button.onclick = function alerted (){
myArray.unshift(input.value); // Moved this line, added the .value
alert(myArray);
};
</script>

DEMO
You need to a) get the value in the click and b) return false if you want the button to not submit. I changed to button. Alternative is <input type="button" value="click me" id="button" />
You may even want to empty and focus the field on click...
<form>
<input id="input" type="text"/>
<button id="button"> Click me </button>
</form>
<script>
var input = document.getElementById("input"); // save the object
var button = document.getElementById("button");
var myArray = [];
button.onclick = function alerted (){
myArray.unshift(input.value); // get the value
alert(myArray);
return false;
};
</script>​

You're not getting the new value in the onclick function.
Try this: http://jsfiddle.net/SeqWN/4/
var button = document.getElementById("button");
var i = document.getElementById("input");
var myArray = [];
button.onclick = function alerted (){
myArray.unshift(i.value);
alert(myArray);
};​