Javascript-форум - Передача значение с input в js и его обработка.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Передача значение с input в js и его обработка. (https://javascript.ru/forum/misc/77271-peredacha-znachenie-s-input-v-js-i-ego-obrabotka.html)

Передача значение с 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>

Dethlike,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>

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

 function changeColor() {
 var color = document.getElementById("name").value;
 circle.style.backgroundColor = color;
 return false
 }

 </script>
</body>
</html>

Спасибо большое!! насчет форматирования извиняюсь, исправлю.

Есть еще вопрос который никак не могу найти, можно ли сделать проверку на написания цвета? например если пишешь gren то цвет все равно меняется на green, а пользователю сообщается об ошибке? Если такое возможно подскажите как это правильно решить. Понимаю нужно самому разбираться и учиться но буду очень признателен если поможете.

Dethlike,
добавить в строку 35

if(color == "gren") {color = "green";
 alert("err")
};