I've got an ongoing project where I need to draw a number of HTML canvases (from 1 to 10) according to a number that is typed into the input field.
Perhaps an easier way to go about this would be to already have the canvases in the DOM before drawing, but everything in this function needs to happen dynamically, so the canvases themselves need to be drawn using the JavaScript function. I was getting better progress with a switch statement but I feel like a for loop would be more appropriate.
For some reason the Fiddle isn't working properly, but the button draws a single canvas just fine in my Cloud9 environment. Now I just need it to draw a number of canvases corresponding with the input value.
JS Fiddle: https://jsfiddle.net/m4hys8tr/
HTML:
<form action='#' method='get' name=queueform id=queue><div id='queueblock'><div class='formblock'><div class='row'><div class='cell'><strong>Quantity:</strong><br><hr><label for='items'>Items:</label><input id='quantity' size='2' type='text'><br><br><strong><p>Enter a maximum of 10 items</p></strong></div><div class='cell'><br><br><div><button onclick='drawCanvas()' id='getitemsbutton' class='button' type='button'>Get Items</button><button id='clearbutton' class='button' type='reset'>Clear</button><button id='queuebutton' class='button' type='submit'>Send to Queue</button></div></div> JS:
function drawCanvas() { var canvasBlock = document.getElementById('canvasblock'); var canvas = document.createElement('canvas'); var quantity = document.queueform.quantity.value; canvas.id = 'canvas01', 'canvas02', 'canvas03', 'canvas04','canvas05', 'canvas06', 'canvas07', 'canvas08','canvas09', 'canvas010'; canvas.width = 70; canvas.height = 70; canvas.style.border = '1px solid'; for (var i = 0; i < quantity; i++) { canvasBlock.appendChild(canvas); } var c1 = document.getElementById('canvas01'); console.log(c1);}