Passing a parameter to a function in Javascript

Question

I need to create a Javascript function (using a loop) that receives a value as a parameter from a function call in HTML and in response passes back the image of the back of a playing card however many times the value of the parameter is.

For example, if I pass the value 5 to the function, I should get back 5 images of the back of the card from the function displayed on the HTML page inside an existing table.

Here is what I have so far. Can someone please point me in the right direction as to where I'm going wrong (Thank you in advance for any help).

JS

function showCards(numcards) { 
  var data = ""; 
  while (numcards < 5) {
    data += "<td><img src="http://www.college1.com/images/cards/gbCard52.gif" NAME="card0"></td>";
    numcards +=;
  }
  document.writeln(data);
}

HTML

<table border=0 style='margin:auto'>
  <tr> 
   <td>
     <form>
       <input type="BUTTON" onClick="Javascript:alert('Dummy Link')" value="Deal > > >">
     </form>
   </td> 
   <script type="text/javascript">showCards(5)</script>   
   <td>
     <form>
       <input type="BUTTON" onClick="Javascript:alert('Dummy Link')" value="< < < Hit Me">
     </form>
   </td>
 </tr>
</table> 

Answer 1

There are mainly syntax errors in your code.

1. Either escape the double quote inside a string (ie. "\\"" ) or use single quotes to declare your string.

2. You were trying to increment numcards using a wrong syntax. The correct syntax is numcards++ .

3. But that's not what you want, you want to decrement it to 0 (ie. numcard-- ) to get your number of cards or count up to numcards using a for loop for example.

 function showCards(numcards) { var data = ""; for (var i = 0; i < numcards; i++) { data += '<td><img src="http://www.college1.com/images/cards/gbCard52.gif" NAME="card0"></td>'; } document.writeln(data); } showCards(5); 

 <table border=0 style='margin:auto'> <tr> <td> <form><input type="BUTTON" onClick="Javascript:alert('Dummy Link')" value="Deal > > >"></form> </td> <td> <form><input type="BUTTON" onClick="Javascript:alert('Dummy Link')" value="< < < Hit Me"></form> </td> </tr> </table> 

Answer 2

 // where you want to append images tag var table = document.querySelector('tbody'); // you can call this method on click event function show(elem , param) { var i = 0; var data = document.createElement("tr"); var td = ""; while (param != i) { td += "<td><img src='http://www.college1.com/images/cards/gbCard52.gif' NAME='card"+i+"'></td>"; i++; } data.innerHTML = td; // append html tr node elem.appendChild(data); } // calling when the script is loaded show(table, 5); 

 <table> <tbody> </tbody> </table>