4

estoy desarrollando un pequeño ejemplo de una clase, donde los alumnos tienen un sistema de puntaje y este se puede incrementar a través de botones + o -, pero me surge el problema que al darle un cierto puntaje a uno y luego a otro, el segundo toma los puntos del primero y se van acumulando, así y así para otro alumno. Este es mi código HTML y el script:

var i = 1;
var b = [ {id:0, alumno: "Alonso", puntos: 0}, {id:1, alumno: "Sebas", puntos: 0}, {id:2, alumno: "Juan", puntos: 0} ];

document.getElementById('btnVerAlumnos').addEventListener	('click', function() {
    var text= "";
    long = b.length;
    if(long) {
        for (var c=0;c<long;c++) {
            text+= `<li class="card">
            ${b[c].alumno}
            <button onclick="contadormenos(${c})">-</button>
            <input id="${c}" type="text" style="text-align: center; width: 30px;" value="${i}">
            <button onclick="contadormas(${c})">+</button>
            </li>`
        }
    }
    document.getElementById('lista_alumnos_conectados').innerHTML = text;
});

function contadormas(index) {
    i = i + 1;
    var cant = document.getElementById(`${index}`);
    cant.value = i;
    if(cant.value == 1){
        i=1;
        cant.value=1;
    }
}

function contadormenos(index) {
    if (i >= 2) {
        i = i - 1;
        var cant = document.getElementById(`${index}`);
        cant.value = i;
        if (cant.value == 1) {
            i=1;
            cant.value=1;
        }
    }
}
<a id="btnVerAlumnos">Lista de alumnos</a>
<ul id="lista_alumnos_conectados"></ul>

Si alguien tiene una mejor idea o que es lo que pasa me ayudaría mucho. Gracias.

3 respuestas 3

1

Según lo que noto, i es una variable global, por lo tanto cada vez que hagas la comparación estos se irán acumulando en 1 sola variable, por eso cada vez que sumas agregas la cantidad total de votos en 1 solo alumno. Para solucionar tu problema deberías declarar un contador aparte en cada uno de las funciones contadormas y contadormenos.

Me cuentas como te va.

1
  • Hola, si estuve analizándolo luego y me percaté de eso, más bien lo que hice fue eliminar la variable i y reemplazarlas todas por el atributo de los objetos llamado puntos como b[indice].puntos donde el indice es el parámetro de las funciones contadormas y contadormenos. Ahora estoy tratando de poder mantener dichos valores porque al colocarlos en un modal, vuelven a cero. el 25 jun. 2019 a las 21:51
1

Tus funciones de contadormenos y contadormas están calculando sobre una variable compartida (i). Pero en su lugar, cada vez que se presione el botón querrás ver qué valor hay y añadir o quitar uno a ese valor. Tus funciones contadormas y contadormenos podrían ser así:

function contadormas (index) {
    document.getElementById(`${index}`).value++;
}

function contadormenos (index) {
    var cant = document.getElementById(`${index}`).value--;
}

Luego puedes añadirle la lógica que quieras, por ejemplo para que no bajen de 0 los números. Así quedaría:

var i = 1;
var b = [ {id:0, alumno: "Alonso", puntos: 0}, {id:1, alumno: "Sebas", puntos: 0}, {id:2, alumno: "Juan", puntos: 0} ];

document.getElementById('btnVerAlumnos').addEventListener	('click', function() {
    var text= "";
    long = b.length;
    if(long) {
        for (var c=0;c<long;c++) {
            text+= `<li class="card">
            ${b[c].alumno}
            <button onclick="contadormenos(${c})">-</button>
            <input id="${c}" type="text" style="text-align: center; width: 30px;" value="${i}">
            <button onclick="contadormas(${c})">+</button>
            </li>`
        }
    }
    document.getElementById('lista_alumnos_conectados').innerHTML = text;
});

function contadormas (index) {
    document.getElementById(`${index}`).value++;
}

function contadormenos (index) {
    var cant = document.getElementById(`${index}`).value--;
}
<a id="btnVerAlumnos">Lista de alumnos</a>
<ul id="lista_alumnos_conectados"></ul>

1
  • Gracias amigo, por la rapidez de tu respuesta y tu aporte. Ahora veré como puedo mantener los datos en memoria porque eso está en un modal y cada vez que lo vuelvo a abrir, se reinicia. el 25 jun. 2019 a las 21:54
0

aquí tengo un buen ejemplo utilizando menos codigo y con una sola función

function cantidad( id_input, operacion){
  var numero=$('#'+id_input).val();
  if(operacion=='1'){
    numero++;
  } else{
    numero--;
  }
  $('#'+id_input).val(numero);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="cantidad(3,0)">-</button>
<input id="3" type="text" style="text-align: center; width: 30px;" value="1">
<button onclick="cantidad(3,1)">+</button>

<button onclick="cantidad(5,0)">-</button>
<input id="5" type="text" style="text-align: center; width: 30px;" value="1">
<button onclick="cantidad(5,1)">+</button>

2

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.