HTML按钮的onclick事件

Question

HTML按钮的onclick事件

26

3 buttons 3 onclick events

这可能是一个非常基础的问题；相信我，在互联网上很难找到这个问题的答案。我在我的服务器（本地Tomcat）中存储了3个HTML页面，我希望通过单击按钮打开这些HTML页面。任何帮助将不胜感激。

这是我的代码，

<!DOCTYPE html>
<html>
  <head>
      <meta charset="ISO-8859-1">
      <title>Online Student Portal</title>
  </head>
<body>
  <form action="">
      <h2>Select Your Choice..</h2>
      <input type="button" value="Add Students">
      <input type="button" value="Add Courses">
      <input type="button" value="Student Payments">
  </form>
</body>
</html>

- codezoner

1

window.location 是答案。 - Mr. Alien

1

你能展示一下这些按钮的HTML代码吗？ - Ashis Kumar

5

你没有找到为HTML按钮添加点击处理程序的任何示例？我很难相信。 - Barmar

谷歌“JavaScript 点击窗口位置” - Praveen Lobo

1

<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>在线学生门户网站</title> </head> <body> <form action=""> <h2>选择您的操作..</h2> <input type="button" value="添加学生"> <input type="button" value="添加课程"> <input type="button" value="学生缴费"> </form> </body> </html> - codezoner

如原文所述，这将向一个空URL提交表单。但由于发布者使用了“Javascript”标签，@Rahul Tripathi的回答是合适的，展示了如何向按钮元素添加Javascript点击处理程序。非Javascript答案需要定义表单操作；发布的按钮名称将在那里提交到服务器。 - Suncat2000

6个回答

28

你们应该都知道这是内联脚本，而这并不是一个好的实践方式... 话虽如此，你应该明确使用JavaScript或jQuery来完成这种类型的任务：

HTML

<!DOCTYPE html> 
<html> 
 <head> 
    <meta charset="ISO-8859-1"> 
    <title>Online Student Portal</title> 
 </head> 
 <body> 
    <form action="">
         <input type="button" id="myButton" value="Add"/>
    </form> 
 </body> 
</html>

jQuery

var button_my_button = "#myButton";
$(button_my_button).click(function(){
 window.location.href='Students.html';
});

JavaScript

  //get a reference to the element
  var myBtn = document.getElementById('myButton');

  //add event listener
  myBtn.addEventListener('click', function(event) {
    window.location.href='Students.html';
  });

请查看评论为什么要避免内联脚本以及为什么内联脚本不好

- d1jhoni1b

7

在第一个按钮上添加以下内容。

onclick="window.location.href='Students.html';"

同样的方式操作其余两个按钮。

<input type="button" value="Add Students" onclick="window.location.href='Students.html';"> 
<input type="button" value="Add Courses" onclick="window.location.href='Courses.html';"> 
<input type="button" value="Student Payments" onclick="window.location.href='Payments.html';">

- Mansoorkhan Cherupuzha

谢谢，您帮了我大忙！但是<form>的方法好像不太适用于IE8/SharePoint。 - Michael Carn-Bennett

我们可以使用location.href代替window.location.href。 - Lova Chittumuri

2

这个例子将会帮助你：

<form>
    <input type="button" value="Open Window" onclick="window.open('http://www.google.com')">
</form>

您可以通过以下方式在同一页上打开下一页：

<input type="button" value="Open Window" onclick="window.open('http://www.google.com','_self')">

- AmanS

谢谢，Aman。但是这段代码会让HTML在单独的页面中打开。我能不能在同一个浏览器窗口中打开它呢？ - codezoner

2

在jsfiddle中遇到按钮onclick事件的问题吗？

如果是，请参见 jsfiddle.net上的Onclick事件无法触发。

- David Winiecki

1

<body>
"button" value="Add Students" onclick="window.location.href='Students.html';"> 
<input type="button" value="Add Courses" onclick="window.location.href='Courses.html';"> 
<input type="button" value="Student Payments" onclick="window.location.href='Payments.html';">
</body>

- Ramu Uncle

3

请问是否需要将以下内容翻译成中文："Could you explain some more about the code snippet and what details you've added and how they solve the problem. Add a reference to any relevant documentation/reading material if possible." - StuperUser

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rahul Tripathi · Accepted Answer

试试这个：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="ISO-8859-1"> 
    <title>Online Student Portal</title> 
</head> 
<body> 
    <form action="">
         <input type="button" value="Add Students" onclick="window.location.href='Students.html';"/>
         <input type="button" value="Add Courses" onclick="window.location.href='Courses.html';"/>
         <input type="button" value="Student Payments" onclick="window.location.href='Payment.html';"/>
    </form> 
</body> 
</html>