JavaScript点击button更改内容，清空页面

效果展示如图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">body.input.div.p{marging:0;padding: 0;}body{font-size: 14px;font-font: 微软雅黑;line-height: 25px;}.content img{float: left;width: 150px;}.r{float: left;width: 400px;}input[name="changeBook"]{width: 100px;height: 30px;line-height: 30px;text-align: center;font-size: 14px;font-family: 微软雅黑;margin: 10px 0 10px 0;}input[name="season"]{width: 50px;text-align:center;}</style>
</head>
<body>
<div class="content"><img src="data:image/English.jpg" alt="English"><div class="r"><div id="book">书名：English</div><input name="changeBook" value="换换名称" type="button" onclick="alterBook()"><br>四季名称：<input name="season"type="text" value="春"><input name="season"type="text"value="夏"><input name="season"type="text" value="秋"><input name="season"type="text"value="冬"><br><input name="b1" type="button" value="input内容" onclick="all_input()"><input name="b2" type="button" value="四季名称" onclick="s_input()"><input name="b3" type="button" value="清空页面" onclick="cleanAll()"><p id="replace"></p></div>
</div></body>
<script>function alterBook() {//换掉标题var divObj=document.getElementById("book");divObj.innerHTML="现象级英语畅销书";}function all_input(){//点击就展示一段文本内容var st="xxxxxxxxxxxxxinput内容xxxxxxxxxxxxxxxxxx";document.getElementById("replace").innerHTML=st;}function s_input() {//展示四季的内容var season=document.getElementsByName("season");var strs="";for (var i=0;i<season.length;i++){//season[i].valueOf出现的是乱码//season[i].nodeValue出现的是null空值strs+=season[i].value+" ";}document.getElementById("replace").innerHTML=strs;}function cleanAll() {/*无效代码var str="";document.getElementsById("content").innerHTML=str;*///先获取content的divvar elem = document.getElementsByClassName('content');//移除所有的子元素elem[0].parentNode.removeChild(elem[0]);}
</script>
</html>

结果展示

JavaScript点击button更改内容，清空页面相关推荐

点击button会自动刷新页面??
前言: 今天用了原生的html与js写页面,突然发现,在form标签里写的button,点击button标签会刷新页面.显而易见,对于半路出家,基础知识薄弱的我来说,这实在是unbelivablely ...
H5页面苹果手机点击输入框输入内容时页面自动放大
问题:H5页面苹果手机点击输入框输入内容时,页面会自动放大,导致用户体验不好解决:<meta name="viewport" content="width=dev ...
vue项目H5页面在苹果手机点击输入框输入内容时页面自动放大
遇到的问题用vue写H5页面时,iPhone手机点击input搜索框,输入内容时,页面会自动放大. 解决方法在public文件夹下找到html文件,打开后加上user-scalable=no 就行 ...
H5页面iphone(苹果)手机点击输入框输入内容时页面自动放大
问题: H5页面,iPhone手机点击input搜索框,输入内容时,页面会自动放大. 解决: 方法一: html文件中加上移动端元信息 <meta name="viewport&qu ...
jbutton可以设置id吗_如何点击BUTTON更改BUTTON名字？
该楼层疑似违规已被系统折叠隐藏此楼查看此楼附上源代码 import javax.swing.*; import java.awt.*; public class MainScreen { publ ...
PHP——0128练习相关2——js点击button按钮跳转到另一个新页面
js点击button按钮跳转到另一个新页面投稿:whsnow 字体:[增加减小] 类型:转载时间:2014-10-10 我要评论点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎 ...
EditText控件的基本使用（点击Button按钮，Toast提示EditText中的内容）
EditText是程序用于和用户进行交互的另一个重要控件,它允许用户在空间里输入和编辑内容,并可以在程序中对这些内容进行处理.EditText的应用场景非常普遍,在进行发短信.发微博.聊QQ等操作时, ...
这个例子主要展示了通过点击button实现viewflipper页面切换
这个例子主要展示了通过点击button实现viewflipper页面切换转载于:https://blog.51cto.com/creator0hacker/1270968
爬虫-模拟点击，实现加载页面全部内容
爬虫-模拟点击,实现加载页面全部内容完成页面加载: 目标分析:在爬取页面数据时,如果是遇到这个不进行点击,会导致数据爬取不全. 解决方法:可以采取模拟点击来进行避免. 一,它对应的xpath是二, ...

JavaScript点击button更改内容，清空页面

JavaScript点击button更改内容，清空页面相关推荐

最新文章

热门文章