2番目のJSボタンが最初のJSボタンをトリガーします

Question

私は間違ったことをしなければならないことを知っていますが、やり直しています。 JavaScript関数にリンクされた複数のボタンを持つフォームを作成しています。私は、同じページにこれらの2つのボタンを持つことの非常に基本的な時点で、あなたonMouseOver、onMouseDown、onMouseUp、onMouseOutボタンの画像を変更します。

私はこれを行うための他の方法があることを知っていますが（もっと良い方法）、JavaScriptの仕組みをより深く理解するためにはこの方向に突っ張っています。このようなことが必要な路面をやり直すにはもっと複雑なことがいくつかあり、私がそこに着くと理解してもらいたいと思っています。

問題は、使用しようとすると2番目のボタンが何もしないことです。最初のボタンは正常に動作しますが、2番目のボタンは動きません。2番目のボタンを使用しようとすると、最初のボタンが消えます。したがって、私はonMouseOverボタン2、ボタン1が影響を表示します。画像ファイルを新しいセットにコピーして、同じ画像を使用しないようにしましたが、ボタン2を使用するとボタン2に設定されている機能がボタン1に適用されていることがわかりました。

とにかく、ここにHTMLコードがあります....

<input type="hidden" value="0" id="theValue" /> 
<p><a href="javascript:addElement()" ><img id="button" onMouseOver="hover_over()" 
onMouseOut="hover_off()" onMouseDown="click_add()" onMouseUp="release()" 
src="images/add_default.png" name="add" width="43" height="21"></a></p> 


<input type="hidden" value="0" id="theValue2" /> 
<p><a href="javascript:addProduct()" ><img id="button2" 
onMouseOver="hover_over_second()" onMouseOut="hover_off_second()" 
onMouseDown="click_add_second()" onMouseUp="release_second()" 
src="images/add_default2.png" name="add2" width="43" height="21"></a></p> 

そして、ここではJavaScriptです....

//// 
//----------------Button Animation 1------------------- 
//// 

function hover_off() { 
document.images.add.src='images/add_default.png'; 
} 

function hover_over() { 
document.images.add.src='images/add_hover.png'; 
} 

function click_add() { 
document.images.add.src='images/add_click.png'; 
} 

function release() { 
document.images.add.src='images/add_hover.png'; 
} 
//// 
//--------------------------------------------------- 
//// 

//// 
//----------------Button Animation 2------------------- 
//// 
function hover_off_second() { 
document.images.add.src='images/add_default2.png'; 

} 
function hover_over_second() { 
document.images.add.src='images/add_hover2.png'; 
} 
function click_add_second() { 
document.images.add.src='images/add_click2.png'; 
} 
function release_second() { 
document.images.add.src='images/add_hover2.png'; 
} 
//// 
//--------------------------------------------------- 
//// 

私はここで間違って何をしているのですか？どのようにこれらのリンクを実際にお互いに別々に動作させるのですか？

私に賢明なものを教えてください。私はこれが愚かな単純でなければならないことを知っています。

Answer 1

2番目のボタンハンドラで同じ要素を対象としています。最初の要素のsrc属性が他の要素のsrc属性に変更されているため、最初の要素と同じようにadd2を追加する必要があります。

function hover_off_second() { 
document.images.add2.src='images/add_default2.png'; 
} 
function hover_over_second() { 
document.images.add2.src='images/add_hover2.png'; 
} 
function click_add_second() { 
document.images.add2.src='images/add_click2.png'; 
} 
function release_second() { 
document.images.add2.src='images/add_hover2.png'; 
}