0

asi tengo mi script:

var imagenes = {
  "leon": 'imagenes/leon.gif',
  "burro": 'imagenes/burro.gif',
  "ballena": 'imagenes/ballena.gif',
  "gato": 'imagenes/gato.gif',
  "elefante":'imagenes/elefante.gif',
  "pato": 'imagenes/pato.gif',
  "hiena": 'imagenes/hiena.gif',
  "grillo": 'imagenes/grillo.gif',
  "pajaro": 'imagenes/pajaro.gif',
  "cabra": 'imagenes/cabra.gif',
  "jaguar": 'imagenes/jaguar.gif',
  "mono": 'imagenes/mono.gif',
  "oso": 'imagenes/oso.gif',
  "caballo":'imagenes/caballo.gif',
  "sapo": 'imagenes/sapo.gif',
  "perro": 'imagenes/perro.gif',
  "vaca": 'imagenes/vaca.gif'
}

function agregar() {
  var seleccion = document.getElementById("opcion").value;
    if(seleccion==0){
        alert("SELECCIONE UNA OPCION");
    } else{
    var imagen = document.createElement('img');
    imagen.src = imagenes[seleccion];
    document.getElementById("impresion").appendChild(imagen);               
    }

}

necesito que no se repita ningun animal en el select de html

2
  • Pero quien ejecuta a agregar? el 24 ago. 2018 a las 21:35
  • 1
    Creo que deberias ir agregando los animales que llegan en un arreglo, luego con un ciclo los vas validando para comprobar si ya esta.
    – srJJ
    el 24 ago. 2018 a las 21:35

1 respuesta 1

1

Otra opcion, podrias deshabilitar las opciones que vas escogiendo. Algo asi:

var imagenes = {
  "leon": 'imagenes/leon.gif',
  "burro": 'imagenes/burro.gif',
  "ballena": 'imagenes/ballena.gif',
  "gato": 'imagenes/gato.gif',
  "elefante": 'imagenes/elefante.gif',
  "pato": 'imagenes/pato.gif',
  "hiena": 'imagenes/hiena.gif',
  "grillo": 'imagenes/grillo.gif',
  "pajaro": 'imagenes/pajaro.gif',
  "cabra": 'imagenes/cabra.gif',
  "jaguar": 'imagenes/jaguar.gif',
  "mono": 'imagenes/mono.gif',
  "oso": 'imagenes/oso.gif',
  "caballo": 'imagenes/caballo.gif',
  "sapo": 'imagenes/sapo.gif',
  "perro": 'imagenes/perro.gif',
  "vaca": 'imagenes/vaca.gif"/>'
}

function agregar() {
  var seleccion = document.getElementById("opcion").value;
  var e = document.getElementById("opcion");
  e.options[e.selectedIndex].disabled = true;
  var imagen = document.createElement('img');

  //imagen.src = imagenes[seleccion];
  // descomentar la linea anterior, comentar la siguiente (es para que se vea el demo)
  imagen.src = "https://picsum.photos/500/?random&dblrand=" + seleccion;
  document.getElementById("impresion").appendChild(imagen);
}


function borrar() {
  document.getElementById("impresion").innerHTML = "";
}
#contenedor img {
  width: 100px;
  height: 100px;
  border-radius: 8000px;
  border: 1px solid black;
  overflow: hidden;
  margin: 10px;
}
<!DOCTYPE html>
<html>

<head>
  <title>ANIMALES</title>
  <link rel="stylesheet" type="text/css" href="animales.css">
  <script type="text/javascript" src="js/animales.js"></script>

</head>

<body>
  <select id="opcion">
    <option value="" disabled selected>--ELIGE UNA OPCION--</option>
    <option value="leon">LEON</option>
    <option value="elefante">ELEFANTE</option>
    <option value="grillo">GRILLO</option>
    <option value="cabra">CABRA</option>
    <option value="gato">GATO</option>
    <option value="caballo">CABALLO</option>
    <option value="mono">MONO</option>
    <option value="jaguar">JAGUAR</option>
    <option value="pajaro">PAJARO</option>
    <option value="oso">OSO</option>
    <option value="pato">PATO</option>
    <option value="perro">PERRO</option>
    <option value="sapo">SAPO</option>
    <option value="vaca">VACA</option>
    <option value="burro">BURRO</option>
    <option value="hiena">HIENA</option>
    <option value="ballena">BALLENA</option>
  </select>
  <button onclick="agregar()">AGREGAR</button>
  <button onclick="borrar()">BORRAR</button><br><br>
  <div id="contenedor">
    <div id="impresion"></div>
  </div>
</body>

</html>

1
  • 1
    buena idea amigo muchas gracias ya editare mi codigo mil gracias
    – user97805
    el 24 ago. 2018 a las 21:55

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.