JS每日一题——DAY4单项绑定

最新推荐文章于 2024-07-25 09:24:40 发布

会写代码的金毛

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量403

点赞数 6

分类专栏： JS每日一题文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/m0_74427119/article/details/135016546

版权

JS每日一题专栏收录该内容

7 篇文章 0 订阅

订阅专栏

题目描述

如图：

思路&知识点

首先我们确定一下我们要操作的是id为input的输入框以及id为span的标签，当输入框值发生改变的时候span内的内容也要发生改变，那我们在js中可以先使用document.querySelector()方法选中这两个元素，然后为输入框绑定一个"onchange"方法，在方法内部我们将输入框的内容赋值到span元素中即可。

过程中需要用到的方法

在JS内部引用HTML元素

使用document.querySelector()，可以直接根据css选择器来选择匹配的第一个元素，使用方法如下：

let a = document.querySelector(".a1")//选择类目
let a = document.querySelector("#a1")//选择id
let a = document.querySelector("a")//选择元素

如果想要返回全部匹配元素，请使用document.querySelectorAll() 函数

为输入框绑定一个"onchange"方法

使用xxx.onchange =()=>{}表示每次触发这个事件会执行一个箭头函数，箭头函数是一种函数的简写方式。

//匿名函数的定义
var xxx = function(){
......
}
//转化为箭头函数
var xxx = ()=>{
.....
}

将输入框的内容赋值

这里我们使用输入框的.value方法，可以获取输入框的值，将其赋值到元素中我们使用元素的.innerHTML方法。

代码&总结

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
    	<input id="input" type="text" />
        <span id="span"></span>

        <script type="text/javascript">
            // 补全代码
            var input = document.querySelector("#input");
            input.onchange = ()=>{
                var span = document.querySelector("#span");
                span.innerHTML = input.value;
            }
        </script>
    </body>
</html>

总结：主要考察了如何在JS选中并监听HTML中的元素，以及根据元素变化通过JS去改变HTML内容，还是挺基础的。

会写代码的金毛

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS每日一题——DAY4单项绑定

首先我们确定一下我们要操作的是id为input的输入框以及id为span的标签，当输入框值发生改变的时候span内的内容也要发生改变，那我们在js中可以先使用document.querySelector()方法选中这两个元素，然后为输入框绑定一个"onchange"方法，在方法内部我们将输入框的内容赋值到span元素中即可。
复制链接

扫一扫