Title: How do i display an image when a variable reach a certain value?
Tags: javascript;image;if-statement
Question: So far i have made it so that when the variable &quot;poeng&quot; reaches a value over 12 it shows the message &quot;Hello World&quot;, but what if i want it to display an image?
The HTML





 5 
 7 
 +5 


The coding (javascript)
```var poeng = 0;


function myFunction() {

poeng = 5;

console.log(poeng)
check()
}

function myFunction2() {

poeng = 7;

console.log(poeng)
check()
}

function myFunction3() {

poeng = poeng + 5;

console.log(poeng)
check()
}

function check() {
 if(poeng &gt; 12) {

  console.log(&quot;Hello World&quot;);

//here i want it to display an image

 }
}
```

Comment: You have to create the Image element (see `document.createElemen()` [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)), set its attributes and append it to the DOM (see `ParentNode.append()` [on MDN](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append))

Comment: Unhide an HTML element? Create and append an HTML element to the page? There are many ways this could be implemented.

Here is the accepted answer: To display an image instead of just outputting to the console, you have to create an ```<img&gt;``` element, add it's ```alt``` and ```src``` attributes and then append it to an element inside your page.
Here's an example. The image is created with a little helper function and appended to the ```<body&gt;``` element inside the ```check()``` function:
```var poeng = 0;
var imgURL = 'https://fillmurray.com/1000/645'; // <-- URL of the image, using a placeholder service for now


// --- Image creation helper
function createImage(url) {
  var imgEl = document.createElement('img'); // <-- create an <img&gt; node/element
  imgEl.alt = '';                            // <-- add an alt-attribute
  imgEl.src = url;                           // <-- add it's source
  return imgEl;                              // <-- return the <img&gt; to the caller
}


function myFunction() {
  // ... elided for brevity ...
}

function myFunction2() {
  // ... elided for brevity ...
}

function myFunction3() {
  // ... elided for brevity ...
}

function check() {
  if(poeng &gt; 12) {
    console.log(&quot;Hello World&quot;);
    //here i want it to display an image

    var imgEl = createImage(imgURL);         // <-- create the <img&gt;
    document.body.appendChild(imgEl);        // <-- add it to the <body&gt; element
  }
}
```

Comment for this answer: Thank you David! I am really new to Javascript so it is nice that people like you are kind enough to help me with stuff like this.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:04/15/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><image><if-statement>', 'Title': 'How do i display an image when a variable reach a certain value?', 'ViewCount': 43, 'id': 67111023, 'user_AboutMe': None, 'user_AccountId': 21265311.0, 'user_DisplayName': 'carolinecarrot', 'user_Reputation': 7.0, 'user_Views': 10.0, 'user_id': 15645612.0}}