Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Обработка button (https://javascript.ru/forum/dom-window/28788-obrabotka-button.html)

snoop1q 02.06.2012 20:31

Обработка button
 
Привет, я делаю виджет для win7 пишу на javascript
Есть такой вопрос у меня есть к примеру две кнопки
<button style="background-color:white">
Выполнено
</button>
<button style="background-color:white">
Не выполнено
</button>

Можно ли сделать что бы когда я нажимал на "Выполнено" начинала светится красным цветом, а "Не выполнено" белым и наоборот

devote 02.06.2012 20:39

<button style="background-color:white" onclick="this.style.backgroundColor='#f00'; this.nextElementSibling.style.backgroundColor='#fff';">
Выполнено
</button>
<button style="background-color:white" onclick="this.style.backgroundColor='#f00'; this.previousElementSibling.style.backgroundColor='#fff';">
Не выполнено
</button>

snoop1q 02.06.2012 20:45

Цитата:

Сообщение от devote (Сообщение 178327)
<button style="background-color:white" onclick="this.style.backgroundColor='#f00'; this.nextElementSibling.style.backgroundColor='#fff';">
Выполнено
</button>
<button style="background-color:white" onclick="this.style.backgroundColor='#f00'; this.previousElementSibling.style.backgroundColor='#fff';">
Не выполнено
</button>

спасибо, а что нужно добавить что бы когда ещё раз нажимаешь возращалось обратно на белый цвет?

devote 02.06.2012 20:52

Цитата:

Сообщение от snoop1q
спасибо, а что нужно добавить что бы когда ещё раз нажимаешь возращалось обратно на белый цвет?

<button style="background-color:white" onclick="this._store==1?(this.style.backgroundColor='#fff',this._store=0):(this.style.backgroundColor='#f00',this._store=1); this.nextElementSibling.style.backgroundColor='#fff';this.nextElementSibling._store=0;">
Выполнено
</button>
<button style="background-color:white" onclick="this._store==1?(this.style.backgroundColor='#fff',this._store=0):(this.style.backgroundColor='#f00',this._store=1); this.previousElementSibling.style.backgroundColor='#fff';this.previousElementSibling._store=0;">
Не выполнено
</button>

bes 03.06.2012 11:53

Для произвольного количества элементов

<style>
  button {background: white}
</style>

<div id="myDiv">
  <button>World</button>
  <button>Wide</button>
  <button>Web</button>
</div>

<script>
window.onload = function () {
  var myDiv = document.getElementById('myDiv');
  var firstColor = 'white';
  var secondColor = 'red';
  var cur = myDiv.children[0];

  setBackground = function (element, color) {
    element.style.background = color;
  }

  myDiv.onclick = function (e) {//onclick begin
    e = e || event;
    var target = e.target || e.srcElement;

    if (target.parentNode == myDiv) {

      if (target != cur) {
        setBackground(target, secondColor);
        setBackground (cur, firstColor);
        cur = target;
        cur.flag = 1;
      } else if (target.flag != 1) {
          setBackground(target, secondColor);
          target.flag = 1;
        } else {
          setBackground(target, firstColor);
          target.flag = 0;
        } 

    }

  }//onclick end

}
</script>


Часовой пояс GMT +3, время: 21:37.