Форум

Ivan858 · #1 (**permalink**) 12.10.2017, 14:31

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

ksa · #2 (**permalink**) 12.10.2017, 14:38

Сообщение от Ivan858

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

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

Ivan858 · #3 (**permalink**) 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 · #4 (**permalink**) 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>

рони · #5 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript