Why the javascript image is not shown in html

Question

Why the javascript image is not shown in html

Navigation

#1 by (1 votes)

0

I have this:

<!DOCTYPE html>
<html>
<head>
  <title>EJEM</title>
</head>
<body>
  <div id="fordward">
    <img id="equipologos" src="">
    <h2 id="nameEquipo"></h2>
  </div>
  <br>
  <div id="backward">
    <img id="equipologos" src="">
    <span id="nameEquipo"></span>
  </div>
  <!-- <button id="backward">ATRAS</button><button id="fordward">ADELANTE</button> -->
  <!--  -->
  <span id="teamIndex" hidden="true">0</span>
  <script>
    function changeTeam (team,logoURL){
      document.getElementById('nameEquipo').innerText = team;
      document.getElementById('equipologos').src = logoURL;
    }
    function initializer(){
      var nameEquipo = ["Barcelona", "Real Madird"];
      var equipoLogos =['https://ssl.gstatic.com/onebox/media/sports/logos/paYnEE8hcrP96neHRNofhQ_96x96.png','https://es.futbol24.com/upload/team/Spain/Real-Madrid.png']
      var teamIndex = 0;
      var text = "";
      var i;
      for (i = 0; i < nameEquipo.length; i++) {
        text += nameEquipo[i] + "<br>";
      }
      document.getElementById('backward').innerHTML = text;
      document.getElementById('fordward').innerHTML = text;
      changeTeam(nameEquipo[0], equipoLogos[0]);
    }
    window.onload = initializer;
  </script>
  <span id="teamIndex" hidden="true">0</span>
</body>
</html>

That it would have to, first show the shield of the "barcelona" with a text below that says "Barcelona" and next to or below a shield of the "Real Madrid" and below "Real Madrid"

javascript

asked by MatiPHP 04.12.2018 в 22:46

source

1 answer

Error changing date Accept only 0,1,2 in an array c #

score 1 · Answer 1

The problem is that you are overwriting the HTML of the divs with innerHTML. Use .text in your place and it would work like this:

function changeTeam (team,logoURL){
		var e = document.getElementById("nameEquipo");
    e.innerText = team;
		document.getElementById("equipologos").src = logoURL;
		}
function initializer(){
var nameEquipo = ["Barcelona", "Real Madird"];
var equipoLogos =['https://ssl.gstatic.com/onebox/media/sports/logos/paYnEE8hcrP96neHRNofhQ_96x96.png','https://es.futbol24.com/upload/team/Spain/Real-Madrid.png']
var teamIndex = 0;
var text = "";
var i;
for (i = 0; i < nameEquipo.length; i++) {
    text += nameEquipo[i] + "<br>";
}


document.getElementById('backward').text = text;

document.getElementById('fordward').text = text;

				changeTeam(nameEquipo[0], equipoLogos[0]);
			}
			window.onload = initializer;

<!DOCTYPE html>
<html>
	<head>
		<title>EJEM</title>
	</head>
	<body>
		<div id="fordward">
		<img id="equipologos" src="">
		<h2 id="nameEquipo"></h2>
	</div>

<br>
		<div id="backward">
		<img id="equipologos" src="">
		<span id="nameEquipo"></span></div>

		<!-- <button id="backward">ATRAS</button><button id="fordward">ADELANTE</button> -->
<!--  -->

<span id="teamIndex" hidden="true">0</span>


<!--  -->
		<span id="teamIndex" hidden="true">0</span>

	</body>
</html>