CODEWITHSUNDEEP
javascripthtml
mohit
mohit

Reputation: 23

How to display image using javascript

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>

Upvotes: 1

Views: 3708

Answers (4)

Thatkookooguy
Thatkookooguy

Reputation: 7012

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.

Upvotes: 1

Michelangelo
Michelangelo

Reputation: 5948

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.

Upvotes: 0

gdyrrahitis
gdyrrahitis

Reputation: 5968

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

Upvotes: 0

jfriend00
jfriend00

Reputation: 707328

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>

Upvotes: 0

Related Questions