2

hoy les quisiese pedir ayuda en un pequeño proyecto que estoy realizando resulta que estoy haciendo una especie de pokedex con imágenes. bueno el principal problema radica que yo agregue un botón donde si le doy click este me agrega al pokemon que yo selecciono a mi equipo, al yo darle click este se me agrega en la posición 1 de mi equipo todo bien, pero al darle nuevamente se agrega nuevamente a la posición 1 de mi equipo, cuando debería ser la posición 2 y luego la 3 sucesivamente. y todo esto lo tengo que hacer a puro javascritp.

Por si no me explico bien dejare un vídeo para que se vea mas gráficamente lo que pido.

Video: https://www.youtube.com/watch?v=ZowuLKj2UW0

Proyecto: https://mega.nz/#!CrAFCCDQ!seMg3E4ysC26IYI3GDnF7IxawqidLRjwfQXtOCp-RJg

Y aca todo el codigo JavaScript Y el Html

function pokeimagen(id){
 let pokeimg=document.getElementById('pokedes');
 let pokechange =document.getElementById("pokechange");
 //alert(this.id)

 if(id=="bullbasaur"){
  pokeimg.src="img/bullbasaur.jpg";
  pokechange.setAttribute("name","bullbasaur");
 }

 if(id=="pikachu"){
  pokeimg.src="img/PikachuDex.jpg";
  pokechange.setAttribute("name","pikachu");
 }

 if(id=="charmander"){
  pokeimg.src="img/charmander.jpg";
  pokechange.setAttribute("name","charmander");
 }

 if(id=="snorlax"){
  pokeimg.src="img/snorlax.jpg";
  pokechange.setAttribute("name","snorlax");
 }

 if(id=="eevee"){
  pokeimg.src="img/eevee.jpg";
  pokechange.setAttribute("name","eevee");
 }

 if(id=="psyduck"){
  pokeimg.src="img/psyduck.jpg";
  pokechange.setAttribute("name","psyduck");
 }

 if(id=="squirtle"){
  pokeimg.src="img/squirtle.jpg";
  pokechange.setAttribute("name","squirtle");
 }

 if(id=="jigglypuff"){
  pokeimg.src="img/jigglypuff.jpg";
  pokechange.setAttribute("name","jigglypuff");
 }
}

var i=1;

function change(name){

 /*
  aca probe otro metodo:
  
  var pokethead= document.getElementsByTagName("thead")[0];
 let filas=pokethead.getElementsByTagName("tr");
 let columna=filas[i].getElementsByTagName("td");
 let pokeimg=columna[i].getElementsByTagName("img");

 if(name=="pikachu"){
  pokeimg.src="img/pikachu.png";
  i++;
 }
 if(name=="charmander"){
  pokeimg.src="img/charmander.png";
  i++;
 }
 */


 if(i=1){
  if(name=="pikachu"){
   let pokeimg=document.getElementById("poke1");
   pokeimg.src="img/pikachu.png"
   i++;
   return 1;
  }
  if(name=="bullbasaur"){
   let pokeimg=document.getElementById("poke1");
   pokeimg.src="img/bullbasaur.png"
   i++;
   return 1;
  }
  if(name=="eevee"){
   let pokeimg=document.getElementById("poke1");
   pokeimg.src="img/eevee.png"
   i++;
   return 1;
  }
  if(name=="charmander"){
   let pokeimg=document.getElementById("poke1");
   pokeimg.src="img/charmander.png"
   i++;
   return 1;
  }
  if(name=="jigglypuff"){
   let pokeimg=document.getElementById("poke1");
   pokeimg.src="img/jigglypuff.png"
   i++;
   return 1;
  }
  if(name=="squirtle"){
   let pokeimg=document.getElementById("poke1");
   pokeimg.src="img/squirtle.png"
   i++;
   return 1;
  }
  if(name=="snorlax"){
   let pokeimg=document.getElementById("poke1");
   pokeimg.src="img/snorlax.png"
   i++;
   return 1;
  }
  if(name=="psyduck"){
   let pokeimg=document.getElementById("poke1");
   pokeimg.src="img/psyduck.png"
   i++;
   return 1;
  }
 }

 if(i=2){
  if(name=="pikachu"){
   let pokeimg=document.getElementById("poke2");
   pokeimg.src="img/pikachu.png"
   i++;
   return 1;
  }
  if(name=="bullbasaur"){
   let pokeimg=document.getElementById("poke2");
   pokeimg.src="img/bullbasaur.png"
   i++;
   return 1;
  }
  if(name=="eevee"){
   let pokeimg=document.getElementById("poke2");
   pokeimg.src="img/eevee.png"
   i++;
   return 1;
  }
  if(name=="charmander"){
   let pokeimg=document.getElementById("poke2");
   pokeimg.src="img/charmander.png"
   i++;
   return 1;
  }
  if(name=="jigglypuff"){
   let pokeimg=document.getElementById("poke2");
   pokeimg.src="img/jigglypuff.png"
   i++;
   return 1;
  }
  if(name=="squirtle"){
   let pokeimg=document.getElementById("poke2");
   pokeimg.src="img/squirtle.png"
   i++;
   return 1;
  }
  if(name=="snorlax"){
   let pokeimg=document.getElementById("poke2");
   pokeimg.src="img/snorlax.png"
   i++;
   return 1;
  }
  if(name=="psyduck"){
   let pokeimg=document.getElementById("poke2");
   pokeimg.src="img/psyduck.png"
   i++;
   return 1;
  }
 }



}
<!DOCTYPE html>
<html>
<head>
 <title >Pokeproyect</title>
 <link rel="icon" type="image/png" href="img/pokecel.png"/>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="css/Estilo.css">
 <script type="text/javascript" src="js/pokejs.js"></script>
</head>
<body>
<header>
 <a name="pokedex"></a>
 <img src="img/camera.png">
 PokeCheap
</header>
<main>
 <div class="pokediv">
  <table>
   <tr>
    <td class="pokedes">
     <img src="img/PikachuDex.jpg" class="pokeimagen" id="pokedes">
    </td>
    <td style="text-align: center;">
     <div style="text-align:center; font-size:20px; color:white; margin-top:20px">  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Agregar </div>
     <img src="img/fight.png" class="pokecambio"  id="pokechange" onclick="change(this.name)" name="pikachu" onmouseover="this.width=60;this.height=60;" onmouseout="this.width=64;this.height=64;">
    </td>
    <td>
     <table class="pokeback">
      <thead>
       <tr>
        <td class="pokeball">
         <img src="img/pokeball.png" id="poke1">
        </td>
        <td class="pokeball">
         <img src="img/pokeball.png" id="poke2">
        </td>
       </tr>
       <tr>
        <td class="pokeball">
         <img src="img/pokeball.png" id="poke3">
        </td> 
        <td class="pokeball">
         <img src="img/pokeball.png" id="poke4">
        </td>
       </tr>
       <tr>
        <td class="pokeball">
         <img src="img/pokeball.png" id="poke5">
        </td>
        <td class="pokeball">
         <img src="img/pokeball.png" id="poke6">
        </td>
       </tr>
      </thead>
     </table>
    </td>
   </tr>
  </table>
 </div>
 <section>
  <table class="pokemovimiento">
   <div style="text-align:center;">
    <img src="img/backpack.png" > Poke-Mochila
   </div> 
   <tr>
    <td class="pokeamigos" onclick="pokeimagen(this.id)" id="pikachu">
     <a href="#pokedex"><img src="img/pikachu.png" onmouseover="this.width=60;this.height=60;" onmouseout="this.width=64;this.height=64;"></a>
    </td>
    <td class="pokeamigos" onclick="pokeimagen(this.id)" id="charmander">
     <a href="#pokedex"><img src="img/charmander.png" onmouseover="this.width=60;this.height=60;" onmouseout="this.width=64;this.height=64;"></a>
    </td>
    <td class="pokeamigos" onclick="pokeimagen(this.id)" id="snorlax">
     <a href="#pokedex"><img class="img" src="img/snorlax.png" onmouseover="this.width=60;this.height=60;" onmouseout="this.width=64;this.height=64;"></a>
    </td>
    <td class="pokeamigos" onclick="pokeimagen(this.id)" id="eevee">
     <a href="#pokedex"><img src="img/eevee.png" onmouseover="this.width=60;this.height=60;" onmouseout="this.width=64;this.height=64;"></a>
    </td>
   </tr>
   <tr>
    <td class="pokeamigos" onclick="pokeimagen(this.id)" id="bullbasaur">
     <a href="#pokedex"><img src="img/bullbasaur.png" onmouseover="this.width=60;this.height=60;" onmouseout="this.width=64;this.height=64;"></a>
    </td>
    <td class="pokeamigos" onclick="pokeimagen(this.id)" id="psyduck">
     <a href="#pokedex"><img src="img/psyduck.png" onmouseover="this.width=60;this.height=60;" onmouseout="this.width=64;this.height=64;"></a>
    </td>
    <td class="pokeamigos" onclick="pokeimagen(this.id)" id="squirtle">
     <a href="#pokedex"><img src="img/squirtle.png" onmouseover="this.width=60;this.height=60;" onmouseout="this.width=64;this.height=64;"></a>
    </td>
    <td class="pokeamigos" onclick="pokeimagen(this.id)" id="jigglypuff">
     <a href="#pokedex"><img src="img/jigglypuff.png" onmouseover="this.width=60;this.height=60;" onmouseout="this.width=64;this.height=64;"></a>
    </td>
   </tr>
  </table>
 </section>
</main>

</body>
</html>
JaimepaOK
  • 101
  • 7
  • el código que has subido me devuelve un error y no funciona el botón Agregar. Deberías actualizar los archivos sino no puedo ayudarte ya que falta parte del código JS. – JRCode Jan 14 '19 at 10:38
  • 1
    Listo! Ya debería estar bien el codigo. disculpa los inconvenientes. – JaimepaOK Jan 14 '19 at 14:24

2 Answers2

5

Hay varios problemas en tu código:

  1. No estás comparando el valor de i (if(i===1) ó if(i==1)) sino que se lo estás asignando (if(i=1), fíjate que sólo has puesto un = por lo que i pasa a tener el valor 1)

  2. La variable i empieza en 0 por lo que nunca va a entrar en los if.

  3. Sólo la primera de tus pokeballs de tu inventario tiene id, el resto no tiene:

<img src="img/pokeball.png"> (sin id)

  1. Si pulsas el botón añadir sin haber seleccionado un pokemon antes (cuando tienes por defecto a Pikachu) no funciona ya que la variable name está vacía.

  2. Ojo con las variables globales. Estás manejando tu inventario con la variable global i y eso es peligroso. Creo que lo ideal sería que tuvieras un array de objetos con el inventario al cual vayas añadiendo o quitando elementos según pulsas el botón añadir.

Por lo demás, ánimo porque está quedando bonito :)

Kiko_L
  • 6,455
  • 1
  • 11
  • 25
  • Hola! :3.. gracias por tus recomendaciones.. pero fijate que si tiene las id cada imagen.. estas se llaman poke1, poke2 y asi sucesivamente... en cuanto a la variable name no se si te fijes que hice al raro ahi.. que fue asignarle un atributo al boton agregar con Name="" segun que pokemon. Al darle yo a las caretas de la mochila.. y en cuanto al arreglo lo malo esque mi maestro es poco explicativo y nos ha enseñado poco sobre eso pero vere que puedo hacer.. gracias denuevo. – JaimepaOK Jan 14 '19 at 14:23
  • bueno creo que ya se que fue lo que paso si descargarte el proyecto del enlace.. yo lo subí una versión anterior a donde trate de hacer los cambios.... este ya debería estar actualizado. algunos errores siguen ahí pero ya corregi unos cuantos. – JaimepaOK Jan 14 '19 at 14:35
2

Ahora si tengo una respuesta. Creo una nueva porque la otra pone que se convirtió en comentario y no se si se ven los cambios. He modificado tú código espero que no te importe.

¿Hay alguna razón para que uses el comando LET en las declaraciones? Me generaba un error en en JS y lo he quitado. Hay mucho código que optimizar y muchos casos que controlar pero supongo que lo tendrás en cuenta ya que el proyecto está empezando.

Te muestro lo que he hecho:

En la función change(name) he comentado el código que tenías y añadido lo siguiente:

//Utiliza este comando para ver como funciona tu código en el navegador. Sabiendo el 
//valor de i puedes saber que posición se va a rellenar

console.log('i es igual a: '+i);


//Este IF sirve para controlar que no se añadan más cuando no queda hueco
if (i<7){
    var pokeimg=document.getElementById("poke"+i);  
    switch(name){
        case "pikachu":
            pokeimg.src="img/pikachu.png"
            break;
        case "bullbasaur":
            pokeimg.src="img/bullbasaur.png"
            break;

        case "eevee":
            pokeimg.src="img/eevee.png"     
            break;

        case "charmander":
            pokeimg.src="img/charmander.png"        
            break;

        case "jigglypuff":
            pokeimg.src="img/jigglypuff.png"                
            break;

        case "squirtle":
            pokeimg.src="img/squirtle.png"              
            break;

        case "snorlax":
            pokeimg.src="img/snorlax.png"               
            break;

        case "psyduck":
            pokeimg.src="img/psyduck.png"               
            break;                                              
    }
    i++;
    //He añadido el return 1 aunque no se exactamente para que lo usas. Si es importante solo tienes que descomentarlo
    //return 1 
}else{
    alert('¡Pokeback llena!');  
}

Se puede simplificar más aún pero creo que es un buen avance para que puedas continuar. Mi consejo, si estás empezando, es que utilices "console.log" para saber como funciona tu código. Es muy útil y te ahorrará muchos dolores de cabeza.

Un saludo.

JRCode
  • 168
  • 13
  • ¿Qué error te daba let? Depende del contexto pero, en general, es más seguro utilizar let que var. [https://es.stackoverflow.com/questions/106042/var-let-const-o-nada-en-javascript] – Kiko_L Jan 15 '19 at 09:06
  • Tal vez no era un error pero si me salía un warning y la línea en rojo. Acabo de probar mi código cambiando var por let y funciona correctamente y no hay errores en la consola. – JRCode Jan 15 '19 at 09:14
  • 1
    wow! amigo muchas gracias.. fue una respuesta tan simple que no se como no se me ocurrió.. yo me estaba quebrando la cabeza haciendo arreglos y entrando en cada columna de cada fila.. pero fue tan simple. gracias de nuevo. eres lo mejor. :D – JaimepaOK Jan 16 '19 at 01:15