Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.04.2019, 15:29
Интересующийся
Отправить личное сообщение для Dethlike Посмотреть профиль Найти все сообщения от Dethlike
 
Регистрация: 12.04.2019
Сообщений: 10

Передача значение с 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, 12.04.2019 в 20:14.
Ответить с цитированием
  #2 (permalink)  
Старый 12.04.2019, 18:53
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

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>
Ответить с цитированием
  #3 (permalink)  
Старый 12.04.2019, 19:26
Интересующийся
Отправить личное сообщение для Dethlike Посмотреть профиль Найти все сообщения от Dethlike
 
Регистрация: 12.04.2019
Сообщений: 10

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

Есть еще вопрос который никак не могу найти, можно ли сделать проверку на написания цвета? например если пишешь gren то цвет все равно меняется на green, а пользователю сообщается об ошибке? Если такое возможно подскажите как это правильно решить. Понимаю нужно самому разбираться и учиться но буду очень признателен если поможете.
Ответить с цитированием
  #4 (permalink)  
Старый 12.04.2019, 19:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

Dethlike,
добавить в строку 35
if(color == "gren") {color = "green";
 alert("err")
};
Ответить с цитированием
  #5 (permalink)  
Старый 12.04.2019, 21:22
Интересующийся
Отправить личное сообщение для Dethlike Посмотреть профиль Найти все сообщения от Dethlike
 
Регистрация: 12.04.2019
Сообщений: 10

Спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Передача значения input в функцию js wwonder Элементы интерфейса 7 15.03.2017 17:57
Получить значение календаря и вставить в input val kupidon jQuery 3 23.02.2017 19:47
Передача значение атрибута name в php по клику Tegev AJAX и COMET 5 06.05.2016 12:30
Передача значение переменной по клику Zhart Общие вопросы Javascript 4 27.10.2015 11:17
Как стереть значение input через функцию? qwe88 Элементы интерфейса 1 17.04.2015 18:31