How to display image using javascript

Question

How to display an image as many times as input(number) given by the user in html using javascript? There seem to be an error in my code,dont know how to rectify.

<!DOCTYPE html>
<html>
<body>

<p>Click the button to add a new element to the array.</p>
<input type="number" id="myNumber" value="">
<button onclick="imag(c,x)">Try it</button>


<p id="demo"></p>

<script>
function imag(c,x) {
var x = document.getElementById("myNumber").value;
var c="<img src='C:/Users/Akhil/Desktop/New folder/G.jpg'/>";
    
  var arr = [];
  for (var i = 0; i < x; i++) {
    arr.push(c);
  
  document.getElementById("demo").innerHTML = arr;

}
}


</script>

</body>
</html>

@Alex After i put a number in the textbox and click on 'try it' button,there is no response.Nothing is displayed. Is the code right? Logically and syntax wise — mohit
– mohit, Commented Apr 5, 2015 at 9:26

Nimantha · Accepted Answer · 2021-10-28 13:28:29Z

Try this:

<!DOCTYPE html>
<html>
<body>

<p>Click the button to add a new element to the array.</p>
<input type="number" id="myNumber" value="">
<button onclick="imag()">Try it</button>


<p id="demo"></p>

<script>
function imag() {
  var x = document.getElementById("myNumber").value;
  var c = '\<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg"\/\>';

  var arr = [];
  for (var i = 0; i < x; i++) {
    arr.push(c);

    document.getElementById("demo").innerHTML = arr;

  }
}


</script>

</body>
</html>

Notice that I just changed <button onclick="imag(c,x)">Try it</button> to <button onclick="imag()">Try it</button>; and I switched your apostrophes here: var c="<img src='C:/Users/Akhil/Desktop/New folder/G.jpg'/>";

You told javascript that imag() should get two variables. but you never gave the function actual variables (and you filled them inside the function). so I removed the variables from the function's deceleration.

second thing I did was change the Quotation marks and Apostrophes since HTML standards require Quotation marks for the tags' content. switching between them allows you to keep the HTML standard.

jfriend00 · Accepted Answer · 2015-04-05 09:18:58Z

0

The .innerHTML property takes a string. So, you need to convert your array to a single string like this:

document.getElementById("demo").innerHTML = arr.join("");

Note that 'C:/Users/Akhil/Desktop/New folder/G.jpg' is generally not a valid URL to refer to your image so you may need to fix that too. You can read here to see how file URLs work: http://en.wikipedia.org/wiki/File_URI_scheme

And, there's no reason to pass two empty variables to your imag() function. You can change this:

<button onclick="imag(c,x)">Try it</button>

to this:

<button onclick="imag()">Try it</button>

answered Apr 5, 2015 at 9:18

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

2 Comments

mohit Over a year ago

Superb. It worked. Thanks. One more thing, is it possible to display a diff number below each image.Below the first image '1' then second image '2'?

jfriend00 Over a year ago

@mohit - yes, that is possible. You'd have to create the right HTML to make that display. If, after trying to come up with the right HTML yourself, you need help with that, I'd suggest you describe the problem and what you tried in a new question.

gdyrrahitis · Accepted Answer · 2015-04-05 09:23:10Z

0

Firstly, you call imag function with the c and x, but the code doesn't know anything about them. That's why you get a TypeError. You should create an event handler for the click event of the button, not this inline handler, where you can pass whatever you like at values of x and c.

Check this plunk here

And lastly, the innerHTML property takes a string (HTML or plain text). But in this case it will join all your values, comma separated, because the toString method of the array is invoked. Reference here

answered Apr 5, 2015 at 9:23

gdyrrahitis

6,0183 gold badges26 silver badges37 bronze badges

Comments

Michelangelo · Accepted Answer · 2015-04-05 09:28:39Z

Your variables x and c are undefined, there is nothing in it so your code breaks. This is how parameters work, you give them a value and pass them to the function, so c becomes 'hello' and x becomes 5, fiddle:

<p>Click the button to add a new element to the array.</p>
<input type="number" id="myNumber" value="">
<button onclick="imag('hello',5)">Try it</button>


<p id="demo"></p>

Javascript

function imag(c,x) {

  var arr = [];
  for (var i = 0; i < x; i++) {
    arr.push(c);

  document.getElementById("demo").innerHTML = arr;

}

}

But this is not very flexible right? So your solution is already stated in other answers. You don't pass in parameters and make the variables in the function everytime you click on the button and please stop using inline calls. It is really outdated, messy and unnecessary! Learn how to use eventhandlers.

Collectives™ on Stack Overflow

How to display image using javascript

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related