JavaScript+HTML简单实现字符串反转页面

因为纯html难以实现一些流程控制级别的操作，比如变量，循环，引入JavaScript，可以更为方便的进行交互的编写

DOM提取对象

使用特定的API可以提取标签对象，而这些对象需要有一些属性，比如文本输入框，value就是输入的值，而把变量引入一种便乘语言中，可以实现较为复杂的功能

下面看一看获取标签对象的方式

 		document.getElementById
        document.getElementsByClassName
        document.getElementsByName
        document.querySelector
// 通过id来获得对象，id唯一
var obj = document.getElementById();

// 通过class名获得对象，注意是获得一群
var obj = document.getElementsByClassName();

// 通过name来获得对象，获得一群，Element加不加s以和getElementById区分
var obj = document.getElementsByName();

// 通过标签名字来获取第一个标签
var obj = document.querySelector();

例子

因为对象比较少，就用getElementsById了，值得注意的是，获得文本框的输入，不管是input还是textarea标签，都是value，而不是innerText
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>javascript test</title>
</head>
<body>
    <div>
        输入一行<br />
        <textarea id="in1" name="in1" class="in1"></textarea>
    </div>
	<div>
        <button id="btn">点我转换</button>
        <button id="clr">点我清空</button>
    </div>	
	<div>
        反转后的字符串<br />
		<textarea id="ou1"></textarea>
	</div>
	<script type="text/javascript">
        // 获取各个标签对象
        var btn = document.getElementById('btn');   // 点我转换
        var clr = document.getElementById('clr');   // 点我清空
        var in1 = document.getElementById('in1');   // 输入框
        var ou1 = document.getElementById('ou1');   // 输出框
        // 反转字符串函数
		function reverse(s) {
		    return s.split("").reverse().join("");
		}
        // 配置‘点我反转’按钮回调函数
		btn.onclick = function () {
		    var s = in1.value;
		    ou1.innerText = reverse(s);
		}
		// 清空
		clr.onclick = function () {
		    in1.value = null;
		    ou1.innerText = null;
		}
	</script>
</body>
</html>

AkagiSenpai

发布了262 篇原创文章 · 获赞 11 · 访问量 1万+

私信关注

JavaScript+HTML简单实现字符串反转页面

DOM提取对象

例子

猜你喜欢