Develop Reference

Reset (reset to previous value) only the form fields that are changed

I need to reset only the form fields that are changed (reset to previous value).
I tried to use the reset but it completely resets the entire form and I don't need this.
How can I do this?
function clearResult() {
document.getElementById("save").reset();
}
<div class = "container">
<form method="post" id="save" onload="onLoad()">
<div class="field">
<label for="id"> ID:</label>
<input type="number" id="id" name="id" />
</div>
<div class="field">
<label for="type"> Fragment Type: </label>
<input type="text" id="type" name="type" />
</div>
<div class="button">
<button type="submit" class="full">Save changes</button>
<input type="button" value="Cancel" onclick="clearResult()" />
</div>
</form>
</div>

First of all you should to store the predefined values of form elements to set them back when you want to reset them back.
Then you can use this globally defined initial values to set them back whnever reset event occurs.
var id, type;
const form = document.getElementById('save');
document.onload = (event) => {
id = form.id.value;
type = form.type.value;
};
function clearResult() {
form.id.value = id;
form.type.value = type;
};

It was simple. When page load just get values from that fields.
Make with document.onload:
var firstValue = document.getElementById("yourFieldId").value;
After form submit get values like below:
var currentValue = document.getElementById("yourFieldId").value;
And after submit in reset check if CURRENT VALUES equal with VALUES FROM FIRST TIME
Example
if(firstValue != currentValue){
document.getElementById("yourFieldId").value = firstValue;
}

Getting an input from user,store and log that input

I am trying to get a value from the user (taskName input),save that value in a variable and then print the value to the console when a button (taskAdd button) is clicked.However,Once I click the button I don't get the value in my browser console window.
HTML:
<label for="taskName">New Task</label>
<input type="text" id="taskName" name="task" placeholder="What is your task name?">
<input id="taskAdd" type="submit" value="Add task">
JavaScript:
function getInputValue () {
let userInput = document.getElementById("taskName").value;
console.log(userInput);
}
let addTask = document.querySelector("#taskAdd");
addTask.addEventListener("click", getInputValue());

Replace
addTask.addEventListener("click", getInputValue());
with:
addTask.addEventListener("click", getInputValue);

Modifying an input value before submitting it with Javascript or HTML

So essentially, I have an input and I want to modify the value before the user submits it. All I want to do is add a string to the end of this inputs value. I thought it would be something like:
<form action="myURL" onsubmit="myFunction" method="POST">
<input id="myID" value="someValue" />
<button type="submit">Press Me!</button>
</form>
<script>
myFunction()
{
var x = document.getElementById("myID").value;
document.getElementById("myID").value = x + "myString";
}
</script>
However, when the form is submitted the appended string is not sent and only the original string makes it. Does anyone know why this is happening?

You can submit the form using JavaScript:
Please Note: The function name should be preceded by the function keyword.
document.getElementById('myForm').onsubmit = myFunction;
function myFunction(){
var x = document.getElementById("myID").value;
document.getElementById("myID").value = x + "myString";
}
<form id="myForm" action="myURL" method="POST">
<input id="myID" value="someValue" />
<button type="submit">Press Me!</button>
</form>

You can do the changes in onclick event of the submit button instead of onsubmit.
<form action="myURL" id="myForm" method="POST">
<input id="myID" value="someValue" />
<button type="submit" onclick="myFunction(event)">Press Me!</button>
</form>
<script>
myFunction(event)
{
event.preventDefault();
var x = document.getElementById("myID").value;
document.getElementById("myID").value = x + "myString";
document.getElementById("myForm").submit();
}
</script>

You need to invoke the function in the submit event handler with brackets i.e. onsubmit="functionToCall()" instead of onsubmit="functionToCall".
You need the function keyword in front of the name of the function: you would write function functionName(){} instead of just functionName(){}.
You should set the variable x to equal the input element, not the input element's value so you will not need to query the DOM again.
<form action="myURL" onsubmit="myFunction()" method="POST">
<input id="myID" value="someValue" />
<button type="submit">Press Me!</button>
</form>
<script>
function myFunction()
{
event.preventDefault();//for demonstrative purposes
var x = document.getElementById("myID");
x.value += "myString";
}
</script>

Submit button with textbox and JS

I want to create a textbox with a submitt button, and then store the data in the textbox into a js variable. How can I do that?

You can do this using HTML forms and then take the value attribute using JavaScript:
var myValue;
function submit() {
myValue = document.getElementById("myTextArea").value;
console.log(myValue);
}
<form action="javascript:submit()">
<textarea id="myTextArea"></textarea>
<input type="submit">
</form>
The final value is contained in the myValue variable.

//get value in console log
var a = document.getElementsByTagName('textarea')[0];
document.getElementsByTagName('input')[0].addEventListener('click',function(e){
e.preventDefault()
console.log(a.value)
})
//or get value in specific div
document.getElementsByTagName('input')[0].addEventListener('click',function(e){
e.preventDefault()
document.getElementById('val').innerHTML = a.value;
})
<form>
<textarea></textarea>
<input type="submit">
<br/>
</form>
<div id='val'></div>

Changing innerHTML based on input value

This is the HTML code:
<body>
<form>
<input id="input" type="text" name="input" value="Enter Here">
<input type="submit" value="Submit">
</form>
<div id="display">
</div>
</body>
This is the JavaScript:
input = document.getElementById("input");
if (input.value == "Hello") {
display.innerHTML = "Hello";
} else {
display.innerHTML = "Type";
}
When I change the input value by clicking on the input field and typing "Hello", it does not display "Hello" in display.innerHTML. I would like it to display "Hello" when "Hello" is typed into the input field. That's a lot of "Hello"'s! Any help would be great! Thanks in advance.

var input = document.getElementById("input"),
display=document.getElementById("display");
input.oninput=function(){
if (input.value === "Hello") {
display.innerHTML = "Hello";
} else {
display.innerHTML = "Type";
}
};
<input id="input" type="text" name="input" value="Enter Here">
<div id="display">
</div>

Your javascript code only gets executed once before you have entered anything in the input field.
You need to either setup a change handler for the input field or a submit handler for the form and set display.innerHTML.
Also, did you miss a display = document.getElementById("display");?

If you want use your button for submit the value of your textbox (your input type text-field) use onclick event as follows:
function displayData() {
var div_display = document.getElementById('display');
/* This is your input, but you shoud use another Id for your fields. */
var textValue = document.getElementById('input').value;
/* Change the inner HTML of your div. */
div_display.innerHTML = textValue;
}
<input id="input" type="text" name="input" value="Enter Here" />
<input type="submit" value="Submit" onclick="displayData();" />
<div id="display">
</div>
Hope it helps.