多个 JavaScript 按钮(变量）

Multiple JavaScript Buttons (Variables)

本文关键字：变量 按钮 JavaScript 多个      更新时间：2023-09-26

我刚刚开始使用 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>
我

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

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替换为它们各自的功能

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

function alert_hi() {
    alert("Hi!");
}
<input type="button" onclick="alert_hi()" value="Button Two" />

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

让第二个按钮做某事与让第一个按钮做某事基本相同。 它只是两个功能和两个按钮。我想这就是你要问的。

<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>

如果你认真学习......你可以阅读事件注册模型。

在您的示例中。

.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" />
相关文章：