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

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

1 个答案: