第二個JS按鈕觸發第一個JS按鈕

Question

我知道我必須做錯什麼，但是我又不完全明白我在做什麼。 我正在創建一個表單，它將多個按鈕鏈接到JavaScript函數來完成任務。我在這兩個按鈕在同一頁面上的基本點，當你onMouseOver，onMouseDown，onMouseUp，onMouseOut它改變我的按鈕的圖像。

我知道還有其他方法可以做到這一點（更好的方法），但我正朝這個方向努力，至少可以更好地理解JavaScript的工作原理。我知道我會有更復雜的事情要做，可能需要這樣的事情，我希望當我到達那裏時能夠理解。

我遇到的問題是，當您嘗試使用它時，第二個按鈕不會執行任何操作。第一個按鈕工作正常，但第二個按鈕不正確當您嘗試使用第二個按鈕時，它會使第一個按鈕熄滅。所以如果我在小鼠過按鈕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

你在第二個按鈕處理程序中定位同一個元素，它應該是add2而不是像第一個那樣添加，這就是爲什麼第一個元素的src屬性被改變而不是另一個。

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'; 
}