前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >HTML中传递和引用JavaScript变量

HTML中传递和引用JavaScript变量

作者头像
明哥的运维笔记
发布于 2019-01-30 02:09:20
发布于 2019-01-30 02:09:20
5.6K00
代码可运行
举报
文章被收录于专栏:运维笔记运维笔记
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{.brush:html;toolbar: .true; .auto-links: .false;}
<html> 
 
<head> 
 
<title>HTML中传递和引用JavaScript变量</title> 
 
<script type="text/javascript"> 
 
  var foobar; //全局变量声明 
  
  function passvar(){ 
    foobar = document.getElementById('textfield').value; 
    //document.write('传递变量成功'); 
    alert('传递变量成功!'); 
 } 
  
 //显示变量 
 function displayvar(){ 
   alert('变量值为:'+foobar); 
 } 
  
 //引用变量 
 function varpass(){ 
    document.getElementById('textdispaly').value = foobar;  
    //foobar = document.getElementById('textdispaly').value ; 
 } 
</script> 
 
</head> 
 
<body> 
 
<center> 
<h1>HTML中传递JavasScript变量</h1><hr><br> 
<h5>单击相应按钮...</h5> 
 <form name="form1" method="post" action=""> 
  <p> 
  <label> 
   <input type="text" name="textfield" id="textfield"> 
  </label> 
  <label> 
  <!--绑定 onclick事件 --> 
  <input type="button" name="button1" value="传递变量" onclick="void passvar();"< /span> 
  </label> 
  <label> 
   <!--绑定 onclick事件 --> 
  <input type="button" name="button2" value="显示变量" onclick="void displayvar();"< /span>> 
   
  </label> 
 </p> 
 <p> 
  <label> 
   <input type="text" name="display" id="textdispaly"> 
  </label> 
  <label> 
   <!--绑定 onclick事件 --> 
   <input type="button" name="button3" value="引用输入变量" onclick="void varpass();"< /span>> 
  </label> 
  </p> 
 </form> 
 
</center> 
 
</body> 
 
</html>

原文来自:

http://ivantian2008.blog.51cto.com/622133/1127456

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014-06-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
html & CSS & JavaScript的学习
一、HTML 1. 概念: 是最基础的网页开发语言 * Hyper Text Markup Language 超文本标记语言 * 超文本: * 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。 * 标记语言: * 由标签构成的语言。<标签名称> 如 html,xml * 标记语言不是编程语言 2. 快速入门: * 语法: 1. html文档后缀名为.html或者 .htm 2. 标签分为:
Rochester
2020/09/01
6K0
前端基础技术全解析:从HTML前端基础标签语言开始,逐步深入CSS样式修饰、JavaScript脚本控制、Ajax异步通信以及WebSocket持久通信
本文主要讲解了关于一些前端的基础知识,用来前端的扫盲,能够对于前端有一个大致的认识,不至于对前端如何运行,代码都一窍不通。下面是本文的主要讲解方向:
用户11316056
2025/01/09
1700
前端基础技术全解析:从HTML前端基础标签语言开始,逐步深入CSS样式修饰、JavaScript脚本控制、Ajax异步通信以及WebSocket持久通信
JavaScript 学习-29.HTML DOM 事件
前言 HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 常用的一些事件 事件名称 作用 onload 通常用于  元素,在页面完全载入后(包括图片、css文件等等。)执行脚本代码。 onunload 用户退出页面。(  和 ) onclick 当用户点击某个对象时调用的事件句柄。 onmouseover 鼠标移到某元素之上。 onmouseout 鼠标从某元素移开。 ondblclick 当用户双击某个对象时调用的事件句柄。 onkeydown 某个键盘按键被按下。
上海-悠悠
2022/05/30
1K0
JavaScript 学习-29.HTML DOM 事件
day03_js学习笔记_03_js的事件、js的BOM、js的DOM
day03_js学习笔记_03_js的事件、js的BOM、js的DOM ============================================================================= ============================================================================= 涉及到的知识点有: 五、js的事件 1、js的常用事件 onclick
黑泽君
2018/10/11
28.1K0
JavaScript学习笔记(一)
wdm,这个寒假越过越长… 寒假在家学习JavaScript的相关知识,写博客作为笔记 我是以清华大学出版社的《JavaScript从入门到项目实践》作为学习用书的
wsuo
2020/07/31
3.3K0
JavaScript学习笔记(一)
JavaScript 学习-30.HTML DOM0级事件和 DOM2级事件
# 前言 DOM0 级事件就是 html 元素添加onclick 属性,或者给元素添加onclick事件,但是同元素的同一事件只能绑定一个函数,否则后面的事件会覆盖前面的事件。 如果我们想一个元素绑定多次同一个时间,比如我想绑定2个onclick事件,2个都要生效,于是就有了DOM2 级事件,通过addEventListener绑定的事件。 为什么没有 DOM1 级事件,我也很好奇,DOM1 一般只有设计规范没有具体实现,所以一般没有所谓的DOM1 级事件。 DOM0 级事件 DOM0 级事件就是前面讲到的
上海-悠悠
2022/05/30
1.1K0
JavaScript 学习-30.HTML DOM0级事件和  DOM2级事件
JavaScript入门篇
快速认识JavaScript 熟悉JavaScript基本语法 窗口交互方法 通过DOM进行网页元素的操作 学会如何编写JS代码 运用JavaScript去操作HTML元素和CSS样式
达达前端
2019/07/29
1K0
DOM「建议收藏」
当创建了一个网页并把它加载到web浏览器中时,DOM就悄然而生。浏览器根据网页文档创建一个文档对象。
全栈程序员站长
2022/09/21
9700
DOM「建议收藏」
JavaScript-T2
JavaScript-T2 前言 本次主要讲解的知识点是: JavaScript自定义函数 JavaScript系统函数 JavaScript 事件 JavaScript 的常用事件 JavaScript自定义函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=
红目香薰
2022/12/05
3110
JavaScript-T2
HTML5 学习总结(二)——HTML5新增属性与表单元素
张果
2018/01/04
3.6K0
HTML5 学习总结(二)——HTML5新增属性与表单元素
第61节:Java中的DOM和Javascript技术
DOM是一门技术,是文档对象模型.所需的文档只有标记型文档,如我们所学的html文档(文档中的所有标签都封装成为对象了)
达达前端
2019/07/03
6230
第61节:Java中的DOM和Javascript技术
JavaScript 学习(1)
参考资料:http://www.w3school.com.cn/js/index.asp
lpe234
2020/07/28
7960
Web阶段:第三章:JavaScript语言
JavaScript介绍: 1.Javascript语言诞生主要是完成页面的数据验证。 2.它运行在客户端,需要运行浏览器来解析执行JavaScript代码。 3.JS是Netscape网景公司的产品,最早取名为LiveScript;为了吸引更多java程序员。更名为javascript。 4.JS是弱类型,Java是强类型。
Java廖志伟
2022/09/28
3.4K0
[Java面试九]脚本语言知识总结.
核心内容概述 1.JavaScript加强,涉及到ECMAScript语法、BOM对象、DOM对象以及事件。 2.Ajax传统编程。 3.jQuery框架,九种选择器为核心学习内容 4.JQuery UI插件 5.jQuery Ajax编程 6.jQuery第三方插件 7.反向Ajax编程(彗星) 一、JavaScript基础加强 JavaScript是在浏览器内容运行,无需编译、解释执行动态脚本语言,是一种弱类型语言,所有变量使用var定义。 JavaScript的3个组成部分分别为:核心(ECMAScr
一枝花算不算浪漫
2018/05/18
5.1K0
javascript入门笔记3-dom
1.通过ID获取元素 document.getElementById(“id”)
方志朋
2022/11/30
1.2K0
JAVA保姆式上手教程之免费JAVA 案例day02-js高级
bom: browser object model 浏览器对象模型 js希望和浏览器有一定的交互能力
用户9184480
2024/12/13
760
JavaScript 前端笔记总结(精简)
JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型,属于网络的脚本语言,现在已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果,现在随着node.js引擎的出现,使得JavaScript逐步成为了一种全栈开发语言了.
微软技术分享
2022/12/28
7.6K0
Javascript中DOM技术的的简单学习
别先生
2017/12/29
1.1K0
Javascript中DOM技术的的简单学习
JavaScript详细解析
我们之前的操作都是基于原生 JavaScript 的,比较繁琐。 JQuery 是一个前端框架技术,针对 JavaScript 进行了一系列的封装,使得操作变得非常简单! 期待吧……
全栈程序员站长
2022/09/09
1.5K0
React
被称为 JSX,它是 JavaScript 的语法扩展,JSX 产生 React “元素”,可渲染到 DOM 中
晚上没宵夜
2022/11/14
2.2K0
相关推荐
html & CSS & JavaScript的学习
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文