Передача значение с input в js и его обработка.

Подскажите пожалуйста, только не давно начал изучать js и есть такая проблема:
Нужно поменять цвет круга после ввода в input и нажатии на кнопку(например написать цвет red и при нажатии на change круг должен менять цвет)

<div id="prompt-form-container">
<form id="prompt-form">
<div id="prompt-message">Введите, пожалуйста...
<br>Цвет круга..</div>
<input name="text" type="text" placeholder="Example: red, blue, black" id="name" value="">
<input type="submit" value="Change" onclick="changeColor(color)">

</form>
</div>
<div id="circle"></div>

<style>
#circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: aqua;
margin: 0 auto;
transition: all 2s;
}
</style>

<script>
var circle = document.getElementById("circle")
var color = document.getElementById("name").value;
function changeColor(color) {
circle.style.backgroundColor = color;
}
window.onload = function () {
changeColor(color);
};
</script>

<div id="prompt-form-container">

<form id="prompt-form">

<div id="prompt-message">Введите, пожалуйста...

<br>Цвет круга..</div>

<input name="text" type="text" placeholder="Example: red, blue, black" id="name" value="">

<input type="submit" value="Change" onclick="changeColor(e)">



</form>

</div>

<div id="circle"></div>



<style>

#circle {

width: 200px;

height: 200px;

border-radius: 50%;

background-color: aqua;

margin: 0 auto;

transition: all 2s;

}

</style>



<script>

var circle = document.getElementById("circle")

var color = document.getElementById("name").value;

function changeColor(e) {

e.preventDefault();

var color = document.getElementById('name').value;

circle.style.backgroundColor = color;

}

window.onload = function () {

changeColor("red");

};

</script>