sri*_*tno 7 html javascript function button
所以..我有几天这个问题不知道怎么做,我需要帮助.
我有多个按钮,然后单击所有按钮将我重定向到相同的功能,并从该功能转到另一个为该按钮指定的功能.知道我怎么能知道哪些功能知道单击了哪个按钮？例如:
<html>
<button type="button" onclick="myFunction()" id="1">Button1</button>
<button type="button" onclick="myFunction()" id="2">Button1</button>
<button type="button" onclick="myFunction()" id="3">Button1</button>
<script>
function myFunction()
{
var x=0;
if (button 1){
x=1;
myFunction1(x);}
if (button 2){
x=2;
myFunction2(x);}
if (button 3){
x=3;
myFunction3(x);}
...
myFunction3(x){
alert(x);
}
}
</script>
</html>
Joe*_*nos 18
最简单的方法可能是将元素传递给函数:
<button type="button" onclick="myFunction(this)" id="1">Button1</button>
<button type="button" onclick="myFunction(this)" id="2">Button1</button>
<button type="button" onclick="myFunction(this)" id="3">Button1</button>
function myFunction(elem) {
alert(elem.id);
}
无需考虑事件参数或类似的东西.
Dav*_*mas 14
最简单的:
<button type="button" onclick="myFunction(this)" id="1">Button1</button>
<button type="button" onclick="myFunction(this)" id="2">Button1</button>
<button type="button" onclick="myFunction(this)" id="3">Button1</button>
function myFunction (button) {
var x = button.id;
switch (x) {
case '1':
myFunction1(x);
break;
case '2':
myFunction2(x);
break;
case '3':
myFunction3(x);
break;
default:
return false;
}
}
虽然我修改了上面的内容以使用不引人注目的JavaScript,但是从元素的HTML标记中移动JavaScript事件处理:
var buttons = document.getElementsByTagName('button');
for (var i = 0, len = buttons.length; i < len; i++) {
buttons[i].onclick = function (){
myFunction (this);
}
}
或者,使其更容易(并将事件处理添加到一个元素,而不是三个):
function myFunction (event) {
var x = event.target.id;
console.log(event.target, x);
switch (x) {
case '1':
myFunction1(x);
break;
case '2':
myFunction2(x);
break;
case '3':
myFunction3(x);
break;
default:
return false;
}
}
var parent = document.getElementById('parentElementID');
parent.addEventListener('click', myFunction);
顺便提一下,虽然它有效(在HTML 5下,而不是在HTML 4下)有一个id以数字字符(0-9)开头,但在CSS中很难定位这些元素(前导数字字符需要转义,在任何一种中方法); 因此,仍然建议为这些ids 提供可预测的字母前缀.
参考文献: