Loading and image with javascript. Where is my syntax wrong?

Question

I am learning MVC using vanilla Javascript. I am trying to load an image when a button is pressed, but I believe my syntax is off. Any ideas?

here are my scripts. I think the problem is in the View script, at the document.getElementById line.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="Controller.js"></script>
    <script src="View.js"></script>
    <script src="Model.js"></script>
    <title></title>
</head>

<body onload="buildImgArr()">

<div align="center">
<img id="imageFrame" >
</div>

<div  align="center">
<button id="loadImage" type="button" onclick="controlIMG()" >Click to load image</button>
</div>

</body>

</html>

control script

function controlIMG(){

var randImg = randomImg();

loadIMG(randImg);
}

Model script

var myImages = new Array(2);

function buildImgArr(){
    //alert("In Array");
    myImages[1] = "hiragana/A.PNG";
    myImages[2] = "hiragana/CHI.PNG";
}

function randomImg(){
    //alert("in model");
    var rand = myImages[Math.floor(Math.random() * myImages.length)];
    return rand;
}

View script

function loadIMG(imgsrc){
    alert("In view " + imgsrc);
    //text-align:center; margin: 0px auto; display:block
    document.getElementById("imageFrame").innerHTML = '<img src="imgsrc">';

}

What you think you get when you set innerHTML = '<img src="imgsrc">';? Is the variable name mysteriously extracted from the string to a live URL? + img can't have HTML, you need to put the image into another element, like div or sth. Or alternatively just set src of the existing image ... — Teemu
– Teemu, Commented Dec 11, 2017 at 5:12
So one of your problems is that your variable wont resolve in a string so this '<img src="imgsrc">' should be '<img src="'+imgsrc+'">'. Also array indexes start at 0 so myImages[1] = "hiragana/A.PNG" should probably be 0 unless i'm missing something! — iSZ
– iSZ, Commented Dec 11, 2017 at 5:29

brk · Accepted Answer · 2017-12-11 05:30:17Z

2

You will need to set the attribute of image using setAttribute. Here the use of innerHTML is wrong as it will try to add a html , but you just need to set the src of the img

function controlIMG() {
  var randImg = randomImg();
  loadIMG(randImg);
}

var myImages = new Array(2);

function buildImgArr() {
  myImages[1] = "https://media.istockphoto.com/photos/evening-in-the-forest-picture-id494297755?k=6&m=494297755&s=612x612&w=0&h=qn663JrZYf2hpu7SZc-SlrwrR5HjNr3yVcfyDqKHQmg=";
  myImages[2] = "https://d1ljaggyrdca1l.cloudfront.net/wp-content/uploads/2017/02/Header-luxury-glass-suite-at-andbeyond-phinda-forest-lodge-on-a-luxury-safari-in-south-africa-1600x900.jpg";
}

function randomImg() {
  var rand = myImages[Math.floor(Math.random() * myImages.length)];
  return rand;
}


function loadIMG(imgsrc) {
  // using setAttribute method to dynamically set the src
  document.getElementById("imageFrame").setAttribute('src', imgsrc);

}

.imageHolder {
  width: 100px;
  height: 100px;
}

img {
  width: 100%;
  height: 100%;
}

<body onload="buildImgArr()">

  <div align="center" class="imageHolder">
    <img id="imageFrame">
  </div>

  <div align="center">
    <button id="loadImage" type="button" onclick="controlIMG()">Click to load image</button>
  </div>

</body>

answered Dec 11, 2017 at 5:30

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Miles Over a year ago

That also solved a problem I had where Firefox, but not Chrome would load my image. Thank you so much @brk!

Collectives™ on Stack Overflow

Loading and image with javascript. Where is my syntax wrong?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related