How to make an image and text appear when clicking on an option?

Asked

Viewed 744 times

2

I’m having trouble asking a question:

A small library has only fiction and textbooks (Mathematics, Portuguese, etc.). You are building the system of loans from that library. On the first page of the system, you should there is a select for the user to choose between the genre of fiction or didactics. If the genre of fiction is chosen, the system should show, just below, the image of the book cover, the author and the summary of a book from the Harry Potter saga and a book by Sidney Sheldon.

<!DOCTYPE html>
<html>

<head>
    <h1>Biblioteca </h1>
    <script>
        var harry = document.getElementById('imagem-harry');

        function mostrarFoto(ficcao) {
            var fic = document.getElementById(ficcao);
            var foto = "img.src='livroharry.jpg'"
            if (genero.value == 'ficcao') {
                document.getElementById('ficcao').value) {

                alert(imagem);

                harry.innerHTML = "Harry Potter (Daniel Radcliffe) retorna à Escola de Magia e Bruxaria de Hogwarts, para cursar o 5º ano letivo. ... Além disto, o Ministro da Magia Cornélio Fudge (Robert Hardy) impõe à escola a presença de Dolores Umbridge (Imelda Staunton), que torna-se a nova professora de Defesa Contra as Artes das Trevas.";

            }

        }


        }
    </script>
</head>

<body>
    <select id="genero" onchange="(mostrarFoto)">
        <option value="ficcao" id="ficcao"> Ficcao </option>
        <option value="didatico" "id="didatico "> Didatico </option>
    </select>
    <div id="imagem ">
      <img src="livroharry.jpg "  />
    </div>
  </body>
</html>
javascript html5

1 answer

3


You set the location where you want to show the image this way:

<div id="imagem">

But in your code, you ask him to take the element imagem-harry (which does not seem to exist):

var harry= document.getElementById('imagem-harry');

In addition, the call to the method mostrarFoto, need to be in parentheses for the script to understand as a method of fact, e.g..: mostrarFoto():

<select id="genero" onchange="(mostrarFoto)"> // precisaria ser mostrarFoto()

I modified your code with these suggestions, please take a look below (click Run).

function mostrarFoto(a) {
/*
* aqui chamamos as duas divs do nosso html:
* "imagem" e "descricao"
*/
  var element = document.getElementById("imagem");
	var element2 = document.getElementById("descricao");

/*
* mostrarFoto() está recebendo uma variavel, 'a'
* que nos dirá o que o usuário escolheu
*/
    if (a == "ficcao") {
		element.innerHTML = "<br><img src='http://i.imgur.com/Md05F0E.png'</img>";
		element2.innerHTML = "<p>Harry Potter (Daniel Radcliffe) retorna à Escola de Magia e Bruxaria de Hogwarts, para cursar o 5º ano letivo. ... Além disto, o Ministro da Magia Cornélio Fudge (Robert Hardy) impõe à escola a presença de Dolores Umbridge (Imelda Staunton), que torna-se a nova professora de Defesa Contra as Artes das Trevas.</p>";
	}

	else if (a == "didatico") {
		element.innerHTML = "<br><img src='http://i.imgur.com/AreoXA1.jpg' width='245'</img>";
		element2.innerHTML = "<p>Papai e mamãe decidiram contar aos filhos como são feitos os bebês. E inventaram um monte de besteiras, sem saber que as crianças já sabiam de toda a verdade.</p>";
	}
}
<html>
<head>
    <h1>Biblioteca </h1>
</head>

<body>
    <select id="genero" onchange="mostrarFoto(value)">
        <option value="escolha"> Escolha... </option>
        <option value="ficcao"> Ficcao </option>
        <option value="didatico"> Didatico </option>
    </select>
 <div id="imagem"></div>
 <div id="descricao"></div>
</body>
</html>

  • Thank you very much <3 Now I understand what I should do. I can’t tell you how grateful I am that you helped me and that I was able to understand you correctly :D

  • @Mikeliguedes I’m glad it worked out! If you can, mark the answer as accepted by clicking on the left side of the text - then it leaves the "unanswered questions" queue (and I get dots that are worth more than gold!) O________O - Ah, and welcome to Stack Overflow! :)

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.