+ Ответить в теме
Показано с 1 по 2 из 2

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

  1. #1
    Новичок Dethlike на пути к лучшему Аватар для Dethlike
    Регистрация
    12.04.2019
    Сообщений
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

  2. #2
    Местный Degradator скоро придёт к известности Аватар для Degradator
    Регистрация
    02.07.2012
    Сообщений
    1,995
    Thanks
    141
    Thanked 147 Times in 147 Posts
    <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>

+ Ответить в теме

Похожие темы

  1. Передача значения переменной в input value.
    от Live4music в разделе JavaScript
    Ответов: 3
    Последнее сообщение: 23.02.2017, 14:22
  2. Ответов: 3
    Последнее сообщение: 13.01.2017, 12:45
  3. Ответов: 6
    Последнее сообщение: 04.04.2013, 22:52
  4. Ответов: 10
    Последнее сообщение: 08.07.2011, 04:51
  5. Передача текста из input в label
    от Breezz в разделе JavaScript
    Ответов: 3
    Последнее сообщение: 08.06.2011, 22:33

Социальные закладки

Социальные закладки

Ваши права

  • Вы не можете создавать новые темы
  • Вы не можете отвечать в темах
  • Вы не можете прикреплять вложения
  • Вы не можете редактировать свои сообщения