2017-08-07 20 views
0

入力フィールドに入力された数字に応じて、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); 
} 

答えて

0

奇妙な、JSフィドル現時点で盗聴ようです。 とにかく、私たちはかなり近いですが、作成したいキャンバスごとにdocument.createElement()を呼び出さなければならないという事実は考慮していませんでした。あなたのコードを少し並べ替え、ハードコードされたidを動的なものに置き換えました。

function drawCanvas() { 
 
    var canvasBlock = document.getElementById('canvasblock'); 
 
    var quantity = document.queueform.quantity.value; 
 
    for (var i = 0; i < quantity; i++) { 
 
     var canvas = document.createElement('canvas'); 
 
     canvas.id = 'canvas'+('0' + i).slice(-2) // generate name dynamically. ('0' + i).slice(-2) is a trick to add a zero if the current number is < 10 
 
     canvas.width = 70; 
 
     canvas.height = 70; 
 
     canvas.style.border = '1px solid'; 
 
     canvasBlock.appendChild(canvas); 
 
    } 
 
    var c1 = document.getElementById('canvas01'); 
 
    console.log(c1); 
 
}
<div id='canvasblock'> 
 
    </div> 
 
    
 
<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>

+1

AAAAH。あなたが素晴らしいです。 動的な名前の生成は、実行方法を把握できなかった部分でした。少なくとも私がこれの球場にいたことを知ってうれし!手伝ってくれてどうもありがとう! – sheradon

関連する問題