入力フィールドに入力された数字に応じて、1〜10のHTMLキャンバスを描画する必要があるプロジェクトが進行中です。入力値に応じたHTMLキャンバスの描画
おそらく、これを行う簡単な方法は、描画する前にDOMにキャンバスを既に持っていることですが、この関数のすべてが動的に行われる必要があるため、JavaScript関数を使用してキャンバス自体を描画する必要があります。私はスイッチのステートメントでより良い進歩を得ていたが、forループがより適切であるように感じる。
何らかの理由でフィドルが正常に動作していないが、ボタンが私のCloud9環境でうまく1つのキャンバスを描画する。今は、入力値に対応するいくつかのキャンバスを描くだけです。
JSフィドル: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);
}
AAAAH。あなたが素晴らしいです。 動的な名前の生成は、実行方法を把握できなかった部分でした。少なくとも私がこれの球場にいたことを知ってうれし!手伝ってくれてどうもありがとう! – sheradon