2

It's a simple question. If I click the box , I want to move 200px to the left. but it's hard to me Please help me! where's the problem?

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
  .playing {
    transform: translate(200px);
  }
</style>
<title>Document</title>
</head>
<body>
<div class="box"></div>
<script>
const move = document.getElementsByClassName("box");
move.addEventListener("click", _move);

  function _move(e) {
    move.classList.add("playing");
  }

woongb
  • 37
  • 1
  • 3

6 Answers6

4

document.getElementsByClassName() returns a HTMLCollection, not a single element, so you have to attach the event listener to every element in the collection.

const move = document.getElementsByClassName("box");

[...move].forEach(m => m.addEventListener("click", _move));

function _move() {
  this.classList.add("playing");
}
.box {
  width: 200px;
  height: 200px;
  background-color: red;
}

.playing {
  transform: translate(200px);
}
<div class="box"></div>
Robby Cornelissen
  • 91,784
  • 22
  • 134
  • 156
1

getElementsByClassName returns array so you need to give index 

var move = document.getElementsByClassName("box");
move[0].addEventListener("click", _move);

function _move(e) {
  move[0].classList.add("playing");
}
.box {
  width: 200px;
  height: 200px;
  background-color: red;
}

.playing {
  transform: translate(200px);
}
<div class="box"></div>
p u
  • 1,395
  • 1
  • 17
  • 30
1

Your css property for moving it to the left isn't right. It should be 

.playing {
transform: translateX(200px);
}
Nengak dakup
  • 88
  • 2
  • 11
  • 1
    If you mention only one value then it'll be taken as translateX. For example, `translate(2)` is equivalent to `translate(2, 0)`. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate – Sifat Haque Jun 04 '19 at 07:47
0

You can also use that. instead of using document.getElementsByClassName, use document.querySelector

const move = document.querySelector(".box");
move.addEventListener("click", _move);
function _move(e) {
  move.classList.add("playing");
}
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
  .playing {
    transform: translate(200px);
  }
<div class="box"></div>
Tonmoy Nandy
  • 371
  • 4
  • 9
0

As this question is already solved but i was just experimenting if any one wants to move the box continuously by clicking on the box then this code will be helpful.

<head>
  <style>
    .box {
      position: relative;
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style>
  <title>Document</title>
</head>
<body>
  <div class="box"></div>
  <script>
  let offset = 0;  
  const move = document.getElementsByClassName("box")[0];

  move.addEventListener("click", _move);

    function _move(e) {
      offset += 200;
      move.style.left = offset + 'px';

    }
  </script>
</body>
Sifat Haque
  • 5,357
  • 1
  • 16
  • 23
0

$(document).ready(function(){
  $('#button-one').click(function(){
    $('#box-one').css("transform","translate(200px,0)");
  });
});

$(document).ready(function(){
  $('#button-two').click(function(){
    $('#box-two').css("transform","translate(250px,0)");
  });
});

$(document).ready(function(){
  $('#button-three').click(function(){
    $('#box-one, #box-two').css("transform","translate(0px,0)");
  });
});
#box-one,
#box-two
{
  width: 100px;
  height: 100px;
  background-color: blue;
}

#box-two
{
  transition: transform 0.6s ease;
}

#button-three
{
  position: relative;
  left: 100px;
}

body
{
  background-color: #E1E7E8;
}
<h2>Translation on click by using jQuery</h2>
<div id="box-one"></div>
<button id="button-one">translate</button>
<hr/>
<h2>Smooth translation on click by using jQuery</h2>
<div id="box-two"></div>
<button id="button-two">translate</button>
<br/>
<button id="button-three">reset</button>