第二个JS按钮触发第一个JS按钮

Question

我知道我必须做错了什么，但是我又完全不了解自己在做什么。 我正在创建一个表单，该表单将具有多个链接到JavaScript函数的按钮以执行操作。 我的基本要点是将两个按钮放在同一页面上，当您onMouseOver，onMouseDown，onMouseUp，onMouseOut时，它会更改我按钮的图像。

我知道还有其他方法（更好的方法），但是我正朝着这个方向努力，至少可以更好地了解JavaScript的工作方式。 我知道我要做一些更复杂的事情，可能需要类似这样的事情，并且我想确保自己到达那里后能理解。

我遇到的问题是，当您尝试使用第二个按钮时，它什么也没做。 第一个按钮可以正常工作，但是第二个按钮却不能。当您尝试使用第二个按钮时，它会使第一个按钮熄灭。 因此，如果我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

您要在第二个按钮处理程序中定位相同的元素，因此应该添加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';
}