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)& ...
随机推荐
- easyui问题小结(转)
问题一:如何将easyui的west面板上的收缩箭头隐藏? 如图效果: 做法: <div data-options="region:'west'" style="w ...
- Redis集群之优化系统参数
1.最大打开文件数量 (1)编辑资源限制文件,针对redis用户做资源访问控制,在文件尾加入最后两行, sudo vim /etc/security/limits.conf (2) sudo vim ...
- Ubuntu 14.04下Redis安装报错：“You need tcl 8.5 or newer in order to run the Redis test”问题解决
Redis简介: Redis是一个开源的使用ANSI C语言编写.支持网络.可基于内存亦可持久化的日志型.Key-Value数据库,并提供多种语言的API.从2010年3月15日起,Redis的开发工 ...
- PhotoShop CS6安装教程
PhotoShop CS6安装教程... ===================== 安装包和激活码在最下面: ======================== =================== ...
- Andrew Ng机器学习课程笔记--week8(K-means&PCA)
Unsupervised Learning 本周我们讲学习非监督学习算法,会学习到如下概念 聚类(clustering) PCA(Principal Componets Analysis主成分分析), ...
- oracle之备份详解
1.冷备份(执行冷备份前必须关闭数据库) 物理备份(备份物理数据库文件) 2.热备份(热备份是当数据库正在运行时进行数据备份的过程.执行热备份的前提是:数据库运行在可归档日志模式.适用于24X7不间断 ...
- Virtualbox虚拟机Ubuntu共享文件夹设置 自动挂载
1. 安装增强功能包(Guest Additions) 安装好Ubuntu 14.04 后,运行Ubuntu并登录.然后在VirtualBox的菜单里选择"设备(D)" -> ...
- Java开源连接池c3p0的基本用法
前言:其实c3p0只是一个实现了javax.sql 接口 DataSource的一个工具集,使用c3p0可以帮我们管理宝贵的Connection资源,无须我们去创建连接(免去每次配置数据库驱动,url ...
- Keil报错failed to execute 'd:\Keil\C51\BIN\C51.EXE'
关于老师发的keil软件报错如下: --- Error: failed to execute 'd:\Keil\C51\BIN\C51.EXE' 错误是因为老师直接拷贝的安装目录,里面的文件路径设置仍 ...
- Grails笔记三：完整的文件上传实例
文件上传在web应用中是比较普遍的,相对于使用jsp等技术实现文件上传,Grails的文件上传着实让人喜爱,因为极其简单,让人看一遍就容易轻松记住!不多说,实例如下: 假设已有一个名为uploadFi ...