How can I increase marginLeft onclick in Javascript?

Question

I want to begin my onclick() function in javascript style.marginLeft=0 to be like start from '0px' to '-100%' to '-200%' and then at the end with '-200%', when It become '-200%' If you click It again, It will bring you back to .marginLeft='0' Code on Jsfiddle

var x = document.getElementsByClassName('box')[0];
var u = -100;
function addMargin() {
  var current = x.style.marginLeft = u + '%';
  if (x.style.marginLeft == -200) {
    x.style.marginLeft = '0';
  } else {}
}

#container { display: inline-block; position: relative; width: 100%; height: 150px; white-space: 
             nowrap; overflow: hidden; }
.box { width: 100%; height: 150px; 
       display: inline-block; position: relative; }
.box:nth-child(1) { background: lightblue; }
.box:nth-child(2) { background: red; }
.box:nth-child(3) { background: green; }

<div id='container'>
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
</div>
<input type="button" value="Next>" onclick="addMargin()" />

score 3 · Accepted Answer · answered Jan 08 '21 at 12:35

3

You can step-down with 100 at each iteration and use modulo operator (% 400) for a reset

Here is an example:

var x = document.getElementsByClassName('box')[0];
var u = -100;

function addMargin() {
  x.style.marginLeft = u + '%';
  u -= 100
  u %= 400
  console.log("margin-left:", x.style.marginLeft)
}

#container {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 150px;
  white-space: nowrap;
  overflow: hidden;
}

.box {
  width: 100%;
  height: 150px;
  display: inline-block;
  position: relative;
}

.box:nth-child(1) {
  background: lightblue;
}

.box:nth-child(2) {
  background: red;
}

.box:nth-child(3) {
  background: green;
}

.as-console-wrapper {
  max-height: 20px !important;
}

<div id='container'>
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
</div>
<input type="button" value="Next>" onclick="addMargin()" />

answered Jan 08 '21 at 12:35

Tibebes. M

6,940
5
15
36

You mean `%= 300`? – blex Jan 08 '21 at 12:37
2

@blex op has said "_when It become '-300%' If you *click It again*_".. so it should be 400 (to let -300 pass) – Tibebes. M Jan 08 '21 at 12:38
2

You're right, not sure whether that's what they want, but they did say it – blex Jan 08 '21 at 12:40
sorry guys, I'm wrong. but thank you all for all your help. It should go back to first div (box)(1) I misunderstood It should be "-200%" at div(box)(3)-> go to div(box)(1) – itti Jan 08 '21 at 13:25

prasanth · Answer 2 · 2021-01-08T13:16:01.057

Condition match was wrong you need validate with some external count variable instead of matching marginLeft

var x = document.getElementsByClassName('box')[0];
var u = -100;

var count = 1;

function addMargin() {
   count = count%3;
   x.style.marginLeft = count * u + '%';
   count++;
}

#container {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 150px;
  white-space: nowrap;
  overflow: hidden;
}

.box {
  width: 100%;
  height: 150px;
  display: inline-block;
  position: relative;
  transition:all 0.8s ease;
}

.box:nth-child(1) {
  background: lightblue;
}

.box:nth-child(2) {
  background: red;
}

.box:nth-child(3) {
  background: green;
}

<div id='container'>
  <div class='box'>1</div>
  <div class='box'>2</div>
  <div class='box'>3</div>
</div>
<input type="button" value="Next>" onclick="addMargin()" />

thank you so much. I misunderstood on marginLeft '-300%' but you're very intelligent! — itti, Jan 08 '21 at 13:34

score 1 · Answer 3 · answered Jan 08 '21 at 12:48

This is the cleanest/most compact implementation I could think right now. As other people said, the key is to use the Remainder Operator.

Additionally, please use addEventListener/removeEventListener API as it has been by many years the correct way to handle events.

const box0 = document.getElementsByClassName('box')[0];

box0._current = 0;

function addMargin() {
  box0.style.marginLeft = `-${++box0._current % 4 * 100}%`;
}

document.getElementById('button').addEventListener('click', addMargin);

#container {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 150px;
  white-space: 
  nowrap; overflow: hidden;
}

.box {
  width: 100%; height: 150px; 
  display: inline-block;
  position: relative;
}

.box:nth-child(1) {
  background: lightblue;
}

.box:nth-child(2) {
  background: red;
}

.box:nth-child(3) {
  background: green;
}

<div id='container'>
  <div class='box'>0</div>
  <div class='box'>1</div>
  <div class='box'>2</div>
</div>

<input id='button' type="button" value="Next>" />

How can I increase marginLeft onclick in Javascript?

3 Answers3