Two click to change the item (slider)

Question

Two click to change the item (slider)

Navigation

#1 by (0 votes)

1

I'm practicing a bit of JavaScript and trying to make the bases of a slider I ran into a problem.

the problem is this:

When I click on the previous or next arrows, the function is not executed at the first click as it happens when you select it directly, it simply does not do anything and it is until the second click that is executed.

I attach the functions and the code in codepen at the end.

function previousItem() {

// si el indice es igual a 0
if(index == 0) {
    index = botones.length; //el indice es igual es igual a length de los botones
}

// El indice disminuye en cada click
index -= 1;

// Establece el indice activo donde el inicial es el 0
activeIndex = botones[index];


for (let i = 0; i < botones.length; i++) {
    const BOTON:any = botones[i];

    //si el Boton es igual el indice activo agrega estilo
    if(BOTON == activeIndex) {
        BOTON.style.color = "orange";
    } else {
        BOTON.style.color = "#4c4c4c"; // Si no lo resetea
    }

}

};

function nextItem() {

// si el indice es igual la length de botones
if(index == botones.length) {
    index = 0; //el indice es igual a 0
}

// Establece el indice activo donde el inicial es el 0
activeIndex = botones[index];


for (let i = 0; i < botones.length; i++) {
    const BOTON:any = botones[i];

    //si el Boton es igual el indice activo agrega el estilo
    if(BOTON == activeIndex) {
        BOTON.style.color = "orange";
    } else {
        BOTON.style.color = "#4c4c4c"; // Si no lo resetea
    }

}

// El indice aumenta en cada click
index += 1;

};

Here I enclose everything I try to do by codepen.

See the Pen Active without classes by Flixwick ( @Flixwick ) on CodePen .

Thanks to those who respond.

javascript html5 typescript ecmascript-6

asked by Alex Contreras 28.10.2018 в 03:23

source

1 answer

I need help with recursive functions HOW TO EXPORT PRIMARY KEYS TO MAKE RELATIONSHIP BETWEEN TABLES

score 0 · Accepted Answer

The problem was in nextItem() . What you were doing was to increase the index right at the end, when it should be the first thing to do. Taking it to the beginning of the function is solved. It would look like this:

// Seleccion de los botones
var botones = document.querySelectorAll('button');
//Variable Indice
var index = 0;
// Indice Activo
var activeIndex;
var _loop_1 = function (i) {
    botones[i].addEventListener('click', function () {
        var esto = this;
        for (i = 0; i < botones.length; i++) {
            if (esto !== botones[i]) {
                botones[i].style.color = "#4c4c4c";
            }
            else {
                esto.style.color = "orange";
                index = i;
                console.log(index);
            }
        }
    });
    out_i_1 = i;
};
var out_i_1;
//
// ─── ACTIVE ITEM ───────────────────────────────────────────────────────────────
//
for (var i = 0; i < botones.length; i++) {
    _loop_1(i);
    i = out_i_1;
}
//
// ────────────────────────────────────────────────────────────── FIN  ACTIVE ─────
//
//
// ─── ACTIVE CON FLECHAS ─────────────────────────────────────────────────────────
//
//Event Listeners
var flechaIzq = document.getElementById('flecha_i');
var flechaDer = document.getElementById('flecha_d');
flechaIzq.addEventListener('click', previousItem);
flechaDer.addEventListener('click', nextItem);
// ────────────────────────────────────────────────────────────────────────────────
//Funciones
//
// ─── ITEM ANTERIOR ──────────────────────────────────────────────────────────────
//
function previousItem() {
    // si el indice es igual a 0
    if (index == 0) {
        index = botones.length; //el indice es igual es igual a length de los botones
    }
    // El indice disminuye en cada click
    index -= 1;
    // Establece el indice activo donde el inicial es el 0
    activeIndex = botones[index];
    for (var i = 0; i < botones.length; i++) {
        var BOTON = botones[i];
        //si el Boton es igual el indice activo agrega estilo
        if (BOTON == activeIndex) {
            BOTON.style.color = "orange";
        }
        else {
            BOTON.style.color = "#4c4c4c"; // Si no lo resetea
        }
    }
}
;
//
// ─── ITEM SIGUIENTE ─────────────────────────────────────────────────────────────
//
function nextItem() {
    // El indice aumenta en cada click
    index += 1;
    // si el indice es igual la length de botones
    if (index == botones.length) {
        index = 0; //el indice es igual a 0
    }
    // Establece el indice activo donde el inicial es el 0
    activeIndex = botones[index];
    for (var i = 0; i < botones.length; i++) {
        var BOTON = botones[i];
        //si el Boton es igual el indice activo agrega el estilo
        if (BOTON == activeIndex) {
            BOTON.style.color = "orange";
        }
        else {
            BOTON.style.color = "#4c4c4c"; // Si no lo resetea
        }
    }
    
}
;

*{
  padding: 0;
  margin: 0;
}
button{
  padding: .5rem 1rem;
  margin: 1rem .5rem;
  background: lightgray;
  border: 1px solid #4c4c4c;
  color: #4c4c4c;
  font-size: 1.2rem;
  
  }
i{
  padding: .5rem 1rem;
  font-size: 2rem;
  font-weight: bold;
  color: red;
  cursor: pointer;
  }
.contenedor{
  display: flex;
  align-items: baseline;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/css/style.css">
    <title>Document</title>
</head>

<body>



    <div class="contenedor">
        <i id="flecha_i"> < </i>

        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>

        <i id="flecha_d">></i>
    </div>

    <script src="js/script.js"></script>
</body>

</html>

Greetings!