How do you make an image and text appear when you click on an option?

Question

How do you make an image and text appear when you click on an option?

Navigation

#1 by (3 votes)

2

I can not ask a question that asks:

A small library has only fiction and textbooks (Mathematics, Portuguese, etc.). You are building the library loans. On the first page of the system, you should there is a select for the user to choose between the genre of fiction or didactic. If the genre of fiction is chosen, the should show, just below, the cover image of the book, the author and the Summary of a book in 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

asked by anonymous 16.06.2017 / 01:24

1 answer

Problem with repetition structure while How to call a script with arguments?

score 3 · Accepted Answer

You have defined where you want to display the image this way:

<div id="imagem">

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

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

In addition, calling the mostrarFoto method must be enclosed in parentheses for the script to understand as a de facto method, eg mostrarFoto() :

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

I have 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>