Avatar billede tvilling53 Seniormester
10. juni 2021 - 16:28 Der er 2 kommentarer og
1 løsning

Vis et billede

Hej, jeg har brug for at vise et billede i stedet for tekst og jeg bruger følgende kode:
<script>
function vis_billeder(data ,x){
  var sti ='gallery/'+data[x].name;
  console.log('STI er = '+ sti);
  document.getElementById("demo").innerHTML = sti;
}
</script>
 
console.log('STI er = '+ sti); viser den rigtige url.
Hvad skal linien
        document.getElementById("demo").innerHTML = sti;
erstattes med for at der vises et billede??

Jeg håber at der er nogen der vil hjælpe mig, og på forhånd tak
VH Thomas V
Avatar billede olsensweb.dk Ekspert
10. juni 2021 - 18:22 #1

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<img src="gallery/Penguins.jpg" alt="små pingviner" width="500" height="600">
<div id="demo">
<!-- data kommer via js -->
</div>
 
<script type="text/javascript">
function vis_billeder(data ,x){
  var str =     '<img src="gallery/'+data[x].name+'" alt="'+data[x].alt+'" width="500" height="600">';     
  document.getElementById("demo").innerHTML = str;

}
var Pictures = [
  {name:"Penguins.jpg", alt:"sverige"},
  {name:"Lighthouse.jpg", alt:"danmark"},
  {name:"Koala.jpg", alt:"tyskland"},
  {name:"Jellyfish.jpg", alt:"xxx"}
];
vis_billeder(Pictures ,1); // Lighthouse.jpg
</script>
</body>
</html>
Avatar billede tvilling53 Seniormester
11. juni 2021 - 09:32 #2
Hej mange tak for indsatsen.
Avatar billede olsensweb.dk Ekspert
12. juni 2021 - 10:47 #3
#2 selvtak, selvom det er lukket kna du godt få et forbedrings forslag til #1

normalt har man functioner liggende i toppen, og laver ikke direkte udskrivning fra functionen, men retunerer data
i #1 tilfælde kan functionen ikke ligge i toppen pga du udskriver til et element det først skal oprettes i DOM træet (demo)

jeg ville lave det om til noget ala dette:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<title>Untitled Document</title>
<script type="text/javascript">
function vis_billeder(data ,x){
  return '<img src="gallery/'+data[x].name+'" alt="'+data[x].alt+'" width="500" height="600">';     
}

var Pictures = [
  {name:"Penguins.jpg", alt:"sverige"},
  {name:"Lighthouse.jpg", alt:"danmark"},
  {name:"Koala.jpg", alt:"tyskland"},
  {name:"Jellyfish.jpg", alt:"xxx"}
];
</script>


</head>
<body>
<br>
direkte
<br>
<img src="gallery/Penguins.jpg" alt="små pingviner" width="500" height="600">
<br>
enkelt via js
<br>
<div id="demo">
<!-- data kommer via js -->
</div>
<br>
loop via js
<br>
<div id="demo_loop">
<!-- data kommer via js -->
</div>
 
<script type="text/javascript">
document.getElementById("demo").innerHTML = vis_billeder(Pictures, 1); // Lighthouse.jpg

// som loop
var str = "";
for(i=0, lng=Pictures.length; i<lng;i++){
    str +=  vis_billeder(Pictures, i);
}
document.getElementById("demo_loop").innerHTML = str;
</script>
</body>
</html>


hvis jeg ville lave en function, den er lidt tyndbenet (sagde functions tossen :) )
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester