ボタンをおすごとに、加点、減点を画像で表す方法

Question

ボタンを押した時に、点数の加点、減点はできたのですが、
加点の代わりに、ボタンをおすごとに、画像を増やす、減らすことのできるようにしたいのですが、
いい方法が思いつきません。
よろしくお願い申し上げます。

<p class="point" id="point">0</p>
<form name="form" id="id_form">
	<input type="button" value="加点" onclick="countUp();">
	<input type="button" value="減点" onclick="countDown();">
    <input type="button" value="リセット" onclick="countReset();">
</form>

var $countB = 0;
function countUp2() {
    document.getElementById( "point" ).innerHTML = ++$countB;
}
function countDown2() {
    document.getElementById( "point" ).innerHTML = --$countB;
}
function countReset2() {
    document.getElementById( "point" ).innerHTML = $countB = 0;
}
function onButtonClick2() {
	target = document.getElementById("output");
	target.innerText = document.forms.id_form.id_textBox2.value;
}

Comments

[m.ts10806]

画像を増やす減らすとはどういう動きのイメージでしょうか

[kyonN]

現在はボタンをクリックした時に数字が１、２、３...とカウントアップするのを、
ボタン(クリック)を押したら、●、●、●と画像を横に増やしていくイメージです。

[m.ts10806]

そのままですね。「JavaScriptでHTMLに画像を追加」が出来たらあとは追加して削除してを行うだけです。回答もついてますね。

Answer 1

• 画像を増やす・・・imgをdomでappendChildする
• 画像を減らす・・・けつのimgをremoveChildする