0

onclickでは、一意の ID とランダムな位置を持つ複数のボックスを生成する必要があります。

これまでの私の努力は次のとおりです。

<h1>The Amazing Box App</h1>
<form id="data">
<ol>
<li>Pick a name for your Amazing Box: <br>
<label for="name">Name: </label>
<input type="text" id="name" size="20" placeholder="My Amazing Box ..">
</li>
<li>Pick a color for your Amazing Box: <br>
<select id="color">
<option value="">Pick a color</option>
<option value="red">Red</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="indigo">Indigo</option>
<option value="violet">Violet</option>
</select>
</li>
<li>How many Amazing Boxes do you want to create?<br>
<input type="radio" id="five" name="amount" value="5">
<label for="five">5</label><br>
<input type="radio" id="ten" name="amount" value="10">
<label for="ten">10</label><br>
<input type="radio" id="fifteen" name="amount" value="15">
<label for="fifteen">15</label><br>
</li>
</ol>
<p>
<input type="button" id="generateButton" value="Generate My Amazing Boxes">
<input type="button" id="clearButton" value="Clear My Amazing Boxes">
</p>
</form>
<div id="scene">
</div>

JavaScriptのみのソリューションを探しています。

4

1 に答える 1

0

生成するには、div「シーン」または使用したい他の空の div タグを使用する必要があります。

関数は次のようにする必要があります。

function generateboxes(num, color) {
    clearboxes(); //first clear them
    for (var i=0; i<num; i++) {
        var top = Math.floor(Math.random()*300); //300 is the max vertical offset
        var left = Math.floor(Math.random()*200); //200 is the max horizontal offset
        var boxstyle = "position:absolute; top:"+top+"px; left:"+left+"px; background-color:"+color+";"; //Definition of box styles (you must set width and height for them to be visible)
        document.getElementById('scene').innerHTML += "<div style=\""+boxstyle+"\"></div>"; //Add one more box to the group
    }

function clearboxes() {
    document.getElementById('scene').innerHTML = ""; //By resetting the HTML of the div, we remove the boxes.
}

また、関数のパラメーターについても忘れないでください。また、表示されているボックスのコメントを読む必要があります。

于 2012-06-07T12:54:27.563 に答える