Choose the photograph in a form with selects

Question

Choose the photograph in a form with selects

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)

2

I want to make a form that through selects, you can choose one of the three images available. I'm starting on this and I would like someone to tell me why my little program does not work.

In console appears // Uncaught ReferenceError: var img = form.escogerImg.selectedIndex; form is not defined. And I really do not understand why because it's already defined.

    <script>
    var galeria="";


    function inicio(){
        galeria=document.querySelectorAll("img");
        ocultar();
        galeria[0].style.display="block";
    }

    function ocultar(){
        galeria.forEach(function(enCadaImagen){
            enCadaImagen.style.display="none";
        });
    }


        var img= form.escogerImg.selectedIndex;

        if (form.escogerImg.options[img].value=="img1"){
            ocultar();
            galeria[0].style.display="block";
        }
        else if (form.escogerImg.options[img].value=="img2"){
            ocultar();
            galeria[1].style.display="block";
        }
        else if (form.escogerImg.options[img].value=="img3"){
            ocultar();
            galeria[2].style.display="block";
        }


    </script>
    </head>

    <body onload="inicio()">
        <center>
            <div>
                <h1>Galeria de imágenes</h1>
            </div>
           <form>
            <div id="galeriaImg">
                <img src="img/messi.jpeg" alt="">
                <img src="img/umtiti.jpg" alt="">
                <img src="img/iniesta.jpg" alt="">
            </div>

                <select size="1" name="escogerImg">
                    <option value="img1">Messi</option>
                    <option value="img2">Umtiti</option>
                    <option value="img3">Iniesta</option>
                </select>

            </form>
        </center>
</body>

javascript html

asked by Mario G. Lucas 17.04.2018 в 18:50

source

3 answers

download an element from the listView as footer Read reply json at Axios Laravel Vue

score 1 · Answer 1

1

Try changing this line:

var img= form.escogerImg.selectedIndex;

For this:

var img= document.forms[0].escogerImg.selectedIndex;

answered by 17.04.2018 в 19:04

score 1 · Answer 2

This line:

var img= form.escogerImg.selectedIndex;

You are trying to create the variable img with the value of an attribute of the variable form ... that you have not declared anywhere. You can add something like

just before

var form = document.querySelector('form');

But anyway the code will not do what you want because the check you have to do when the user chooses something, then you need to capture the event "select an option in your select:

var galeria="";


function inicio(){
    galeria=document.querySelectorAll("img");
    ocultar();
    galeria[0].style.display="block";

    // La parte que te faltaba: escuchar los cambios
    let select= document.querySelector('select');
    select.addEventListener('change',function (event) {
      let index=select.selectedIndex;
       if (select.options[index].value=="img1"){
            ocultar();
            galeria[0].style.display="block";
        }
        else if (select.options[index].value=="img2"){
            ocultar();
            galeria[1].style.display="block";
        }
        else if (select.options[index].value==="img3"){
            ocultar();
            galeria[2].style.display="block";
        }
    });
}

function ocultar(){
    galeria.forEach(function(enCadaImagen){
        enCadaImagen.style.display="none";
    });
}

inicio();

<center>
  <div>
      <h1>Galeria de imágenes</h1>
  </div>
  <form>
    <div id="galeriaImg">
      <img src="http://via.placeholder.com/350x150" alt="">
      <img src="http://via.placeholder.com/250x150" alt="">
      <img src="http://via.placeholder.com/150x150" alt="">
    </div>

    <select size="1" name="escogerImg">
      <option value="img1">Messi</option>
      <option value="img2">Umtiti</option>
      <option value="img3">Iniesta</option>
    </select>

  </form>
</center>

score 0 · Answer 3

0 vote against The problem may be that as the page is loaded, the script is before the form is loaded, it is good practice to always put the scripts and links to the .js files at the end of the body, just before the label . Try to do it like that.