Question

我刚开始使用JavaScript，我想知道如何让不同的按钮做不同的事情。到目前为止，我可以制作一个按钮做一件事，但是我如何制作第二个按钮呢？这是编码：

<html>
<head>
<script type="text/javascript">
function show_prompt()
{
var name=prompt("Your Name");
if (name!=null && name!="")
  {
  alert("Thanks for clicking " + name + "!");
  window.top.location.replace("http://www.google.com");
  }
}
</script>
</head>
<body>
<ul>
<li>
<input type="button" onclick="show_prompt()" value="Button One" />
</ul>
</body>
</html>

Answer 1

我猜你的意思是用不同的按钮做同样的事情但是来自同一个功能：

<强> JavaScript的：

function myFunction(str) {
    if(str.length > 3){
        alert("big");
    }else{
        alert("small");
    }
}

<强> HTML：

<input type="button" onclick="myFunction('test');" value="Button 1" />
<input type="button" onclick="myFunction('hi');" value="Button 2" />

如果我的假设是错误的，只需创建不同的功能并将按钮的onclick替换为各自的功能

Answer 2

定义另一个函数并将第二个按钮绑定到它！

function alert_hi() {
    alert("Hi!");
}

<input type="button" onclick="alert_hi()" value="Button Two" />

如果引起您的兴趣，我强烈推荐Eloquent Javascript。

Answer 3

使第二个按钮执行某些操作与首先执行某些操作基本相同。它只是两个功能和两个按钮。我想这就是你要问的问题。

<html>
    <head>
    <script type="text/javascript">
        function doSomething()
        {
           // Do something when button one is clicked
        }

        function doSomethingElse() 
        {
           // Do something else when button two is clicked
        }
    </script>
</head>
<body>
    <input type="button" onclick="doSomething()" value="Button One" />
    <input type="button" onclick="doSomethingElse()" value="Button Two" />
</body>
</html>

Answer 4

如果你认真学习......你可以阅读Event Registration models。

就你的例子而言。

JS

var btn1 = document.getElementById('btn1'),
    btn2 = document.getElementById('btn2');
btn1.addEventListener('click', show_me, false); // i am not IE friendly
btn2.addEventListener('click', show_me, false); // you can replace show_me with any function you would like.
function show_me() {
    alert(this.value + ' was clicked'); // this references the element which the click event was invoked on.
}

HTML

<input type="button" id="btn1" value="Button One" />
<input type="button" id="btn2" value="Button Two" />

多个JavaScript按钮（变量）

4 个答案: