javascript & html: What am I doing wrong here?

Question

<html>
<head></head>
<body> 
<script>
    var image1 = newImage();
    image1.src = "./SkinnersLogo.png";
    document.getElementById("d").innerHTML = image1;
</script>
<img id="d"> </img>
</body>
</html>

I have set the value of image 1, to a source. I have then tried to innerHTML this image, and then display it within an img tag. However, all I see is a blank screen on the HTML window. Does anyone know what I am doing wrong here? I cannot spot any mistakes, thanks.

score 4 · Answer 1 · answered Aug 08 '18 at 11:58

You forgot the space between the new operator and the Image function name
You called getElementById before the element existed
You tried to assign a DOM node (the return value of new Image) as if it were a string of HTML (which it isn't). Use appendChild(your_node) not innerHTML = your_html.

Learn how to use the developer tools in your browser. You would have received a number of error messages in the Console which could have helped you debug this yourself.

Ah yes, thank you, silly me, however - after fixing all of that, still no luck. — Luke Robinson, Aug 08 '18 at 12:04

score 2 · Accepted Answer · answered Aug 08 '18 at 12:04

2

If the image tag is already there on the page you could simply assign the src attribute like below.

<img id="d"> </img>

<script>
    var source= "./SkinnersLogo.png";
    document.getElementById("d").src = source;
</script>

answered Aug 08 '18 at 12:04

ConsoleLog

501
3
12

javascript & html: What am I doing wrong here?

2 Answers2