JavaScript配合button.onclick()使用总结
Html加载顺序是从上往下加载，如果script中含有引用js脚本，则应该将此script放在head标签里面，这样可是保证此页面都可以引用js脚本内容。如果想在script中设置button.onclick()事件，则此script应放在button声明之后。
例子：index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head> <title>javaScript和button.onclick()事件</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 全文相关的script脚本（包括引用的script文件）放在head标签中 -->
<script type="text/javascript" src="include.js">
function fun1() {
alert("第一种script方式显示时间是：" + Date());
}
</script>
</head> <body>
<button id="button11" onclick="fun1()">第一种script方式显示时间</button>
<button id="button12" onclick="fun2()">通过引用js文件显示时间</button>
<button id="button2">第二种script方式显示时间</button>
<button id="button3">第三种script方式显示时间</button>
<script>
document.getElementById("button2").onclick = function() {
displayDate()
};
document.getElementById("button3").onclick = displayDate2;
function displayDate() {
document.getElementById("demo").innerHTML = "第二种script方式显示时间是："
+ Date();
}
function displayDate2() {
document.getElementById("demo2").innerHTML = "第三种script方式显示时间是："
+ Date();
}
</script>
<br>时间一：
<p id="demo"></p>
时间二：
<p id="demo2"></p>
</body>
</html>
include.js
function fun2() {
alert("通过引用js文件显示时间是：" + Date());
}
输入网址：http://localhost:8080/Test/index.jsp，截图如下
JavaScript配合button.onclick()使用总结的更多相关文章
- javascript 的button onclick事件不起作用的解决方法
在项目中遇到个问题:servlet向前端返回如下按钮,当course_ID为数字是onclick事件正常,但当course_ID含有字母时onclick事件就不起作用.网上找了很多方法都不管用,最后自 ...
- uGUI使用代码动态添加Button.OnClick()事件（Unity3D开发之十二）
猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/42705885 ...
- jsp button onclick
<input type="button" value="MD5哈希转换" onclick="javascript:document.getEle ...
- ASP.NET通过JavaScript实现Button 的Enabled=false
正常代码控制无法满足需求,所以记录一下方法: <input id="Button5" onclick=" CX()" type="button& ...
- href="javascript:function()" 和onclick的区别
href='javascript:function()'和onclick能起到同样的效果,一般来说,如果要调用脚本还是在onclick事件里面写代码,而不推荐在href='javascript:fun ...
- javascript 动态改变onclick事件
第一种:button.onclick = Function("alert('hello');"); 第二种:button.onclick = function(){alert(&q ...
- <a href="javascript:void(0)" onclick="ff()" ></a> 用法解析
javascript:void(0) 仅仅表示一个死链接 如果是个# javascript:void(#),就会出现跳到顶部的情况,搜集了一下解决方法 1:<a href="####& ...
- <a href='javascript:void(0)' onclick='my()'></a>
- javascript 多个onclick function 取对应值
方法1: 直接获取值 <button onclick="aa(1)">执行</button> <button onclick="aa(2)& ...
随机推荐
- Java中几种常量池的区分
转载自:https://tangxman.github.io/2015/07/27/the-difference-of-java-string-pool/ 在java的内存分配中,经常听到很多关于常量 ...
- Python下的OpenCV学习 02 —— 图像的读取与保存
OpenCV提供了众多对图片操作的函数,其中最基本的就是图片的读取与输出了. 一.读取图片 利用OpenCV读取一张图片是非常容易的,只需要用到 imread() 函数,打开shell或者cmd,进入 ...
- Ubuntu 安装和使用 Supervisor（进程管理）
服务器版本 Ubuntu 16.04 LTS. Supervisor 是一个用 Python 写的进程管理工具,可以很方便的对进程进行启动.停止.重启等操作. 安装命令: $ apt-get inst ...
- postman 第3节 API请求和查看响应结果(转)
请求 postman支持很多请求类型,界面左侧可以看到请求类型:get.post.put.patch等,右侧是发送和保存按钮,下方是请求支持的认证方式.信息头.信息体.私有脚本和测试结果.下面我们介绍 ...
- 浅析HTTP协议的请求报文和响应报文
1.HTTP协议与报文简介 HTTP(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则. 而客户端与服务端通信时 ...
- mvc中html导出成word下载-简单粗暴方式
由于工作需求,需要把html简历页导出成word下载.网上搜索了很多解决方案,基本都是用一些插件,然后写法也很麻烦,需要创建模板什么的. 固定替换值 代码一大堆.但是对于我的需求来说 并没有什么用 ...
- C++内存布局详解
一个由C/C++编译的程序除了存放函数二进制代码的程序代码段(code段)外,数据占用的内存大致分为以下几个部分: 1.栈区(stack) 存放局部变量.函数参数.返回数据.返回地址等.系统自动分配释 ...
- [C]成员运算符"."和间接成员运算符"->"浅析
成员运算符: . 成员运算符一般和结构或者联合名一起使用,指定结构或者联合中的某个成员. 举个栗子: 如果Ronz是一个结构的名称,linux是这个结构模板指定的一个成员名. struct{ //匿名 ...
- 详解HTTPS加速原理
HTTPS是什么? http叫超文本传输协议,使用TCP端口80,默认情况下数据是明文传送的,数据可以通过抓包工具捕获到,因此在interner上,有些比较重要的站点的http服务器需要使用PKI(公 ...
- struts2和spring mvc的比较
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt236 Struts2 Springmvc 机制 基于filt ...