1

Доброе время суток всем . Ребята ,сижу ломаю голову как сделать чтоб нажимаешь на кнопку и она стала зеленого цвета и рядом в диве высветилась (1) ,второй раз нажимаешь и кнопка уже синего цвета ,высвечивается (0) .В интернете находил совсем не то что нужно или кнопка меняла цвет когда зажал , когда отжимаешь то она в исходный цвет возвращается ,а нужно чтоб фиксировано .

2 ответа 2

2

Для изучения AJAX рекомендую начать со статей из учебника Кантора: 1 статья и 2 статья

let result = 0;
let myEvent = function() {
  if (result == 0) {
    document.getElementById('my-button').style.backgroundColor = 'green';
    result++;
  } else {
    document.getElementById('my-button').style.backgroundColor = '#47a4ff';
    result--;
  }
  let xhr = new XMLHttpRequest();
  xhr.open('POST', url, false); //url по которому будет выполнятся запрос
  let body = 'result=' + result;
  xhr.send(body);
  if (xhr.status == 200) {
    document.getElementById('result').innerHTML = result;
  } else {
    alert('При отправке данных произошла ошибка');
  }
}
#my-button {
  background-color: #47a4ff;
}
<button id="my-button" onclick="myEvent()">Жмакни меня!</button>
<div id="result">0</div>

12
  • Блин ,Сергей извиняюсь за свою эмоциональность но вы просто Бог ) Я просто помню что в какой-то теме вы тоже меня уже выручали . Спасибо Вам огромное ) А кстати можно это все сделать на JSON чтоб можно было выводить данные с DB по принципу (нажал на кнопку и записалась единица в базу данных , еще раз нажал и записался ноль )
    – Karter
    27 июн 2018 в 6:09
  • Из клиентского JS-файла такое не возможно, для этого надо отправлять запрос на сервер, и сервер уже будет записывать/перезаписывать ваш JSON, для этого надо знать, на чем у вас написан сервер - php, nodeJS, asp.net и т.д. и т.п. 27 июн 2018 в 6:19
  • перепутал , не JSON ,а AJAX чтоб можно было в базу данных (в таблицу) записывать один или ноль при повторном нажатии .
    – Karter
    27 июн 2018 в 6:24
  • смотрел примеры с голосованием но наверное из-за того что я далек от темы AJAX особо не понял что к чему (
    – Karter
    27 июн 2018 в 6:25
  • Добавил отправку AJAX запроса, вам нужно только подставить свой URL и обратотку на сервере. Если возникнут еще какие-то вопросы, то лучше задать новый вопрос. 27 июн 2018 в 6:39
1

На простом js ответили выше. При помощи jquery:

var flag = 0;
$('.bt').click(function() {
  if (flag == 0) {
    $('.bt').css('background', 'green');
    flag++;
  } else {
    $('.bt').css('background', 'blue');
    flag--;
  }
  $('.res').text(flag);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="bt">Button</button>
<div class="res">0</div>

2
  • Спасибо Артем за столь быстрый ответ .
    – Karter
    27 июн 2018 в 6:25
  • @technoimpex technoimpex не за что) 27 июн 2018 в 6:26

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.