Develop Reference

How to change backgroundcolor of HTML element by using input from HTML form using JS EventListener

I'm fairly new to JS and i'm having trouble changing the background of a HTML element by using input from a HTML form and event listeners. This is what i've tried so far:
HTML:
<div class="item" id="taskThreeContainer">
<h2>Task 3</h2>
<p>When writing a valid CSS background color in the input below, the background of this item should change to that color.</p>
<input type="text" id="task3Input">
<script src="script.js" async defer></script>
JS:
//Task 3
const inputColor = document.getElementById("task3Input").value;
const taskThreeContainer = document.getElementById("taskThreeContainer");
function convertColor() {
taskThreeContainer.style.backgroundColor = inputColor;
};
document.getElementById("task3Input").addEventListener("input", convertColor);
Any help would be much appreciated
Solution (JS):
//Task 3
const taskThreeContainer = document.getElementById("taskThreeContainer");
function convertColor() {
const inputColor = document.getElementById("task3Input").value.toString();
taskThreeContainer.style.backgroundColor = inputColor;
};
document.getElementById("task3Input").addEventListener("input", convertColor);

Well, you need to read the value, being actual / valid at the time You want to apply it to style:
<script >
const inputColor = () => document.getElementById("task3Input").value.toString();
const taskThreeContainer = () => document.getElementById("taskThreeContainer");
function convertColor() {
console.log(inputColor())
taskThreeContainer().style.backgroundColor = `${inputColor()}`;
};
document.getElementById("task3Input").addEventListener("blur", convertColor);
</script>
https://plnkr.co/edit/0U8s8a4NUciwTgGt?open=lib%2Fscript.js

function getColor() {
let color = document.forms["colorForm"]["color"].value;
documen.getElementById("changeable_element").style.color = color;
}
<div id="changable_element">Something...</div>
<form name="colorForm" onsumit="getColor()">
<input type="text" name="color"/>
<input type="submit" name="Submit"/>
</form>
You will need to make something like this. It's also recommened to check the input if its a valid color.

how to button on click takes all the content from textarea, runs a function and then displays the final value inside new div?

I'm in the learning stages, can you please give me the answer with the explanation.
Also if possible, I would appreciate it if you could explain to me what I have done wrong here and then also show me the better way of doing it.
//ARROW FUNCTION
const reverseNumber = num => (num.toString().split("").reverse().join(""));
let textAreaEl = document.querySelector('#text-area');
let submitButtonEl = document.querySelector('#output-button');
let outputAreaEl = document.querySelector('#output');
submitButtonEl.addEventListener("click", () => {
textAreaValue = reverseNumber(textAreaEl)
outputAreaEl.innerHTML = textAreaValue.value;
});
<form action="">
<label for="object" title="object">JavaScript function that returns a passed string with letters in alphabetical order</label>
<textarea id="text-area" name="object-name" id="" cols="30" rows="5"></textarea>
<input type="button" value="RETURN" id="return-value" />
<div id="output"></div>
</form>

First of all, there is no element with #output-button. You need to fix that.
You are passing the element itself to the reverseNumber(), you should pass the value to function.
I will also suggest you use innerText or textContent instead of innerHTML if the text is plain text (not htmlString).
Demo:
const reverseNumber = num => (num.toString().split("").reverse().join(""));
let textAreaEl = document.querySelector('#text-area');
let submitButtonEl = document.querySelector('#output-button');
let outputAreaEl = document.querySelector('#output');
submitButtonEl.addEventListener("click", () => {
textAreaValue = reverseNumber(textAreaEl.value); //pass value here
outputAreaEl.textContent = textAreaValue; //no need to use value here
});
<form action="">
<label for="object" title="object">JavaScript function that returns a passed string with letters in alphabetical order</label>
<textarea id="text-area" name="object-name" id="" cols="30" rows="5"></textarea>
<input type="button" value="RETURN" id="output-button"/> <!--fix the id here-->
<div id="output"></div>
</form>

Your script should be like this
const reverseNumber = num => (num.toString().split("").reverse().join(""));
console.log(reverseNumber(54321));
let textAreaEl = document.querySelector('#text-area');
let submitButtonEl = document.querySelector('#return-value');
let outputAreaEl = document.querySelector('#output');
submitButtonEl.addEventListener("click", () => {
let textAreaValue = reverseNumber(textAreaEl.value);
outputAreaEl.innerHTML = textAreaValue;
});
First, your document.querySelector('#output-button') is not match with <input type="button" value="RETURN" id="return-value"/>.
Second, you have to use variable declaration keyword to get textAreaEl.value

First of all textarea id is incorrect so querySelector is returning undefined and click event is not attached. I have corrected the button id in html.
You need to use textAreaEl.value to find the textarea text and pass it to reverseNumber function.
//ARROW FUNCTION
const reverseNumber = num => (num.toString().split("").reverse().join(""));
let textAreaEl = document.querySelector('#text-area');
let submitButtonEl = document.querySelector('#output-button');
let outputAreaEl = document.querySelector('#output');
submitButtonEl.addEventListener("click", () => {
textAreaValue = reverseNumber(textAreaEl.value)
outputAreaEl.innerHTML=textAreaValue;
});
<form action="">
<label for="object" title="object">JavaScript function that reverses a number</label>
<textarea id="text-area" name="object-name" id="" cols="30" rows="5"></textarea>
<input type="button" value="RETURN" id="output-button"/>
<div id="output"></div>
</form>

How to use removeChild method?

const toDoForm = document.querySelector(".todo__form"),
toDoInput = document.querySelector(".todo__input");
toDoList = document.querySelector("li");
let toDoArray = [];
function addToDoList() {
toDoForm.addEventListener('submit', event => {
toDoArray.push(toDoInput.value);
toDoList.innerHTML += `<ul>${toDoArray[toDoArray.length-1]}</ul>`;
event.preventDefault();
toDoInput.value = "";
});
}
function clearList() {
const toDoUl = document.querySelector("ul");
toDoForm.addEventListener('click', event => {
toDoArray = [];
toDoUl.parentNode.removeChild(toDoUl);
});
}
function init() {
addToDoList();
clearList();
}
init();
<h1>To-Do List</h1>
<div class="todo">
<form class="todo__form">
<input class="todo__input" type="text">
<input class="todo__submit" type="submit" value="Submit">
<input class="todo__clear" type="button" value="Clear">
</form>
</div>
<div class="todo-list">
<li></li>
</div>
I'm making a to-do list with javascript and i tried to use removeChild method to clear to-do list but when i run the code, it keeps getting an error like this -> Uncaught TypeError: Cannot read property 'parentNode' of null at HTMLFormElement. How can i solve it?

The query document.querySelector("ul"); is returning undefined because there is no ul element in the HTML. Try changing the div to ul tag
<ul class="todo-list">
<li></li>
</ul>

First, I thought you want remove one item at a time, then I made some changes which may be useful but you if you don't need it, you could remove delete function.
For adding an item, you enter a job name, for example 'Job1' an then press "Submit" button.
For deleting an item, you enter a job name, for example 'Job1' an then press "Delete" button.
Press 'Clear' to clear all items.
JavaScript:
<script>
let toDoArray = [];
let toDoForm;
window.onload = () => {
toDoForm = document.querySelector(".todo__form"),
toDoInput = document.querySelector(".todo__input");
toDoList = document.querySelector("ul");
clearButton = document.querySelector(".todo__clear");
deleteButton = document.querySelector(".todo__delete");
init();
};
function addToDoList() {
toDoForm.addEventListener('submit', event => {
toDoList.innerHTML += `<li>${toDoInput.value}</li>`;
event.preventDefault();
toDoInput.value = "";
});
}
function deleteItem() {
deleteButton.addEventListener('click', event => {
const toDoUl = document.querySelector("ul");
let allLi = document.querySelectorAll('li');
allLi.forEach(li => {
if (li.innerHTML === toDoInput.value)
toDoUl.removeChild(li);
});
toDoInput.value = "";
});
}
function clearList() {
clearButton.addEventListener('click', event => {
const toDoUl = document.querySelector("ul");
toDoUl.innerHTML = '';
});
}
function init() {
addToDoList();
deleteItem();
clearList();
}
</script>
HTML:
<body>
<h1>To-Do List</h1>
<div class="todo">
<form class="todo__form">
<input class="todo__input" type="text">
<input class="todo__submit" type="submit" value="Submit">
<input class="todo__delete" type="button" value="Delete">
<input class="todo__clear" type="button" value="Clear">
</form>
</div>
<div class="todo-list">
<ul></ul>
</div>
<script src="todo.js"></script>
</body>

First, you need to change <li></li> to <ul></ul>. You can get help from w3school link.
There is a StackOverflow answer about this issue Stackoverflow. You can check that.

Getting value of input field in jquery

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.

Display span tag value in a textfiled

I am displaying a value using span tags;
JS
<script>
window.onload = function () {
document.getElementById('tag').innerHTML = 122;
};
</script>
HTML
<div id="tag"></div>
The value 122 gets displayed on the screen. But what i want is to display the value 122 in a text filed. How can i do this ?

Change your html to:
<input type="text" id="tag">
And your js to:
window.onload = function () {
document.getElementById('tag').value = 122;
};

You can simply add an input to the DOM as <input type="text" id="tag"> and keep your
javascript as window.onload = function () {
document.getElementById('tag').value = 122;
};
This will do the job for you.
OR
Keeping your code same , you can do it as below:
HTML:
<div id="tag"></div>
JS:
<script type="text/javascript">
window.onload = function(){
// create a textfield dynamically, say it is "text"
document.getElementById('tag').appendChild(text);
}
</script>