Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Button со скриптом (https://javascript.ru/forum/xhtml-html-css/81721-button-so-skriptom.html)

Сергей Ракипов 18.01.2021 12:13
Button со скриптом
 
Есть вот такой код. 

<!doctype html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>index</title>

	<meta name="viewport" content="width=device-width,initial-scale=1">
	<meta name="description" content="index">
	<meta name="Keywords" content="index"> 
    <style>
        .blok{
            width: 400px;
            height: 100px;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
        }
        .kvadrat{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
        #aktiv{
            border: 3px solid #0504aa;
        }
    </style>
</head>

<body>
    <div class="blok">
        <button class="kvadrat k1" id="aktiv"></button>
        <button class="kvadrat k2"></button>
        <button class="kvadrat k3"></button>
    </div>
<script>
    let k1 = document.querySelector(".k1");
    let k2 = document.querySelector(".k2");
    let k3 = document.querySelector(".k3");

    let aktiv_kvadrat1 = () => {
        document.querySelector(".k1").id = "aktiv";
        k2.removeAttribute("id");
        k3.removeAttribute("id");
    }
    k1.addEventListener("click", aktiv_kvadrat1);

    let aktiv_kvadrat2 = () => {
        document.querySelector(".k2").id = "aktiv";
        k1.removeAttribute("id");
        k3.removeAttribute("id");
    }
    k2.addEventListener("click", aktiv_kvadrat2);

    let aktiv_kvadrat3 = () => {
        document.querySelector(".k3").id = "aktiv";
        k2.removeAttribute("id");
        k1.removeAttribute("id");
    }
    k3.addEventListener("click", aktiv_kvadrat3);
</script>
</body>
</html>


И он отрабатывает как нужно, НО когда кликаю, почему border каким то не понятным светом накладывается.
И это именно с button если сделать с div то все будет хорошо работать.

рони 18.01.2021 12:29
Цитата:
Сообщение от Сергей Ракипов
почему border каким то не понятным светом накладывается.
 
.kvadrat:focus{
           outline: none;
       }

рони 18.01.2021 12:30
Цитата:
Сообщение от Сергей Ракипов
Есть вот такой код.
попробуйте не использовать id

Сергей Ракипов 18.01.2021 12:45
рони,
А почему не использовать?

рони 18.01.2021 12:50
Цитата:
Сообщение от Сергей Ракипов
А почему не использовать?
путь ваш не близкий ...
<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>index</title>

    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="index">
    <meta name="Keywords" content="index">
    <style>
        .blok{
            width: 400px;
            height: 100px;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
        }
        .kvadrat{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
        .kvadrat.aktiv{
            border: 3px solid #0504aa;
        }
       .kvadrat:focus{
           outline: none;
       }

    </style>
</head>

<body>
    <div class="blok">
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
<script>
    let blok = document.querySelector(".blok");
    let buttons = blok.querySelectorAll(".kvadrat");

    let aktiv = ({target}) => {
        target = target.closest(".kvadrat");
        if(!target) return;
        buttons.forEach(button => button.classList.toggle("aktiv", button === target))
    }
    blok.addEventListener("click", aktiv);

</script>
</body>
</html>

voraa 18.01.2021 12:51
Id это имя конкретного элемента, что бы обращаться именно к нему.
Ну это как людям менять имена, что бы обращаться к любому из них только по определенному имени.
В вашем случае вполне подойдет класс
.aktiv{
border: 3px solid #0504aa;
}

рони 18.01.2021 12:58
Сергей Ракипов,
или ещё проще ...
<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>index</title>

    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="index">
    <meta name="Keywords" content="index">
    <style>
        .blok{
            width: 400px;
            height: 100px;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
        }
        .kvadrat{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
        .kvadrat.aktiv{
            border: 3px solid #0504aa;
        }
       .kvadrat:focus{
           outline: none;
       }

    </style>
</head>

<body>
    <div class="blok">
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
<script>
    let blok = document.querySelector(".blok");
    let current = document.querySelector(".blok .kvadrat.aktiv");
    let aktiv = ({target}) => {
        target = target.closest(".kvadrat");
        if(!target) return;
        current && current.classList.remove("aktiv");
        current = target;
        current.classList.add("aktiv")
    }
    blok.addEventListener("click", aktiv);

</script>
</body>
</html>

voraa 18.01.2021 13:11
А так было бы еще проще

<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>index</title>
 
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="index">
    <meta name="Keywords" content="index">
    <style>
        .blok{
            width: 400px;
            height: 100px;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
        }
        .kvadrat{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
        .kvadrat.aktiv{
            border: 3px solid #0504aa;
        }
       .kvadrat:focus{
           outline: none;
       }
 
    </style>
</head>
 
<body>
    <div class="blok">
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
<script>
    let blok = document.querySelector(".blok");
    let aktiv = function ({target}) {
        target = target.closest(".kvadrat");
        if(!target) return;
        this.querySelector(".aktiv").classList.remove("aktiv");
        target.classList.add("aktiv")
    }
    blok.addEventListener("click", aktiv);
 
</script>
</body>
</html>

Сергей Ракипов 18.01.2021 13:21
рони,
voraa,
Спасибо за ответы

рони 18.01.2021 13:31
voraa,
:)

Сергей Ракипов 18.01.2021 14:54
Я сейчас попробовал все решение и они не работают если
Вот таких блоков 2

<div class="blok">
<button class="kvadrat aktiv"></button>
<button class="kvadrat"></button>
<button class="kvadrat"></button>
</div>

А у меня таких блоков вообще шесть штук

Сергей Ракипов 18.01.2021 14:54 
<div class="blok">
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
    <div class="blok">
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>


Вот если их два то все не работает.

рони 18.01.2021 15:21
Сергей Ракипов,
а подумать? если блоков много, может добавить цикл по блокам? или может клик поставить на родителя блоков?

рони 18.01.2021 15:34
делегирование
 
Сергей Ракипов,
<!doctype html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>index</title>

    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="description" content="index">
    <meta name="Keywords" content="index">
    <style>
        .blok{
            width: 400px;
            height: 100px;
            margin: 10px auto;
            display: flex;
            justify-content: space-around;
        }
        .kvadrat{
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }
        .kvadrat.aktiv{
            border: 3px solid #0504aa;
        }
       .kvadrat:focus{
           outline: none;
       }

    </style>
</head>

<body>
    <div class="blok">
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
    <div class="blok">
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
    <div class="blok">
        <button class="kvadrat aktiv"></button>
        <button class="kvadrat"></button>
        <button class="kvadrat"></button>
    </div>
<script>
    let body = document.body;

    let aktiv = ({target}) => {
        target = target.closest(".kvadrat");
        if(!target) return;
        let parent  = target.closest(".blok");
        let current = parent.querySelector(".kvadrat.aktiv");
        current && current.classList.remove("aktiv");
        target.classList.add("aktiv");
    }
    body.addEventListener("click", aktiv);

</script>
</body>
</html>

Сергей Ракипов 19.01.2021 05:52
рони,
Делегирование как то мне не далось в начале для понимание, сейчас его всяческий избегаю.
Нужно снова уделить этому время.
Спасибо.


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