Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Взаимодействие кнопок, перенимание стилей. (https://javascript.ru/forum/misc/70926-vzaimodejjstvie-knopok-perenimanie-stilejj.html)

Ivan858 12.10.2017 14:31

Взаимодействие кнопок, перенимание стилей.
 
Всем привет.
В следствии моих, довольно, скудных познаний у меня возникли трудности.
Имеется несколько кнопок, необходимо, что бы при нажатии на кнопку 1, у случайной кнопки, кроме первой менялся стиль, допустим, изменилась кнопка 3, нужно, что бы при нажатии на неё, так же изменялся стиль случайной кнопки, при этом, что бы кнопка 3, возвращала первоначальный стиль, можно и без рандома, можно по заданному правилу. Хотя, можно обойтись задачей по проще:
есть две кнопки, при нажатии на одну кнопку, меняется стиль другой и наоборот.

ksa 12.10.2017 14:38

Цитата:

Сообщение от Ivan858
Хотя, можно обойтись задачей по проще:
есть две кнопки, при нажатии на одну кнопку, меняется стиль другой и наоборот.

Для начала сам покажи как ты решаешь эту задачу. А то пока только слова о немощи и скудности... :D

Ivan858 12.10.2017 14:44

function nextBtn(btn) {
    var n = btn.id;
    if(btn.id=="b1") n = "b2";
    else
			n = "b1";
    return document.getElementById(n);
}
function btnclick() {
    activebtn.style.backgroundColor = disactiveclr;
	activebtn.style.fontFamily = disactivefont;
	activebtn.style.fontSize = disactivesize;
    activebtn.onclick = null;
    activebtn = nextBtn(activebtn);
    activebtn.style.backgroundColor = activeclr;
    activebtn.onclick = btnclick;
}
var disactivesize = "20px";
var disactivefont = "Georgia";
var disactiveclr = "white";
var activeclr = "red";
var activebtn = null;
function ld(){
    (activebtn = document.getElementById("b1")).onclick=btnclick;
}

Только сильно не бейте

Dilettante_Pro 12.10.2017 15:15

<input type="button" value="Первая">
<input type="button" value="Вторая">
<input type="button" value="Третья">
<script>
 var btns = document.querySelectorAll('input[type=button]');
for(var i = 0; i < btns.length; i++) {
    btns[i].onclick = function(){
       for(var j = 0; j < btns.length; j++) {
           btns[j]==this? btns[j].style.color = 'red': btns[j].style.color = 'green'; 
      }
   }
}
</script>

рони 12.10.2017 15:35

Ivan858,
Цитата:

Жёлтый, Красный, Голубой, Hе угнаться За тобой!
:)
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .act{
    background-color: rgba(255, 0, 255, 1);
    transition: 1s;
  }
  button{
    height: 100px;
    width: 100px;
    border-radius: 50%;
  }
button:focus {
 outline: 0;
 border: 0;

 }

  </style>

 <script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>

  <script>

window.addEventListener("DOMContentLoaded", function() {
    var nav = document.querySelector("nav"),
        button = nav.querySelectorAll("button");
    nav.addEventListener("click", function(event) {
        var target = event.target;
        if ((target = target.closest("button")) && target.classList.contains("act")) {
            target.classList.remove("act");
            target.style.backgroundColor = "";
            var siblings = [].filter.call(button, function(child) {
                return child !== target
            });
            target = siblings[siblings.length * Math.random() | 0];
            target.classList.add("act");
            target.style.backgroundColor = "#" + ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6)
        }
    })
});
  </script>

</head>

<body>
<nav>
<button class="act">01</button>
<button>02</button>
<button>03</button>
<button>04</button>
<button>05</button>
<button>06</button>
<button>07</button>
<button>08</button>
<button>09</button>
<button>10</button></nav>
</body>
</html>


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