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