переместить круг обратно на втором клике

Рейтинг: 0Ответов: 2Опубликовано: 30.05.2023

Это див с кружочком

помогите реализовать элемент переключения сделан через div и кружочек

"div class="chec1" id="box" onclick="this.style.margin='0'"

может второй клик отслеживать

html
Источник: Stack Overflow на русском

Ответы

▲ 0

Если прям сильно не париться, то так

let button = document.querySelector(".container");
let clickOn = document.querySelector(".circle");

let i = 0;
button.onclick = function click() {
      if(i == 0){
        num1();
      }else {
        num2()
        i=0;
      }
    
}

function num1() {
  clickOn.style.right = "-100px";
  i++;
}

function num2() {
  clickOn.style.right = "0px";
}
body {
  margin:0;
  padding:0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  border: 2px solid black;
  width: 200px;
  height: 100px;
  cursor: pointer;
  display: flex;
  border-radius: 50px;
}
.circle {
  position: relative;
  width: 100px;
  height: 100px;
  background: black;
  border-radius: 50px;
}
 <div class="container">
    <div class="circle"></div>
  </div>
</body>

▲ 0

спасибо навело меня на правильную мысль

function clicked(){
    const drag=document.getElementById("box");
    if(i == 0)
    {
        drag.style.margin="0";
        i++;
      
    }
    else 
    {
        drag.style.marginLeft="20px";
        i=0;
    }
 
    

}