首页 > 试题广场 >

单向绑定

[编程题]单向绑定
  • 热度指数：43444 时间限制：C/C++ 3秒，其他语言6秒 空间限制：C/C++ 256M，其他语言512M
  • 算法知识视频讲解
请补全JavaScript代码，要求每当id为"input"的输入框值发生改变时触发id为"span"的标签内容同步改变。
注意：
1. 必须使用DOM0级标准事件（onchange）
算法知识视频讲解
添加回答
HTML/CSS/JavaScript
夜寻极光。头像 夜寻极光。
应该用oninput事件才对，onchange事件还得等输入框失去焦点才触发，而oninput当输入框value值改变时就会触发
发表于 2021-12-13 11:07:16 回复(0)
HTML/CSS/JavaScript
韩幸运头像 韩幸运
let id_input = document.querySelector('#input')
let id_span = document.querySelector('#span')
id_input.onchange = function() {
    id_span.innerText = this.value
}
这里一些不通过的原因可能是因为命名不规范，input、span不能用于命名。
发表于 2021-12-29 15:45:03 回复(2)
HTML/CSS/JavaScript
ProApe头像 ProApe
            var input=document.getElementById('input');
            var span=document.getElementById('span');
            input.onchange=function(e){
                // console.log(e.target.value);
                span.innerText=e.target.value;
            }

想问一下为什么e.target.value不可以 而this.value可以  这里this===e.target为true的
发表于 2022-03-17 11:11:30 回复(4)
HTML/CSS/JavaScript
7秒鱼🐟头像 7秒鱼🐟
            var input=document.getElementById('input')
            var span=document.getElementById('span')
            input.addEventListener('change',function(){
                span.innerHTML=this.value
            })
用监听器也能达到相同的效果，但是这道题只能用onchange事件才能通过
发表于 2021-12-06 15:41:35 回复(1)
HTML/CSS/JavaScript
HGHGHG头像 HGHGHG
这个题目的判定有点问题呀，我这样写它不给我过： 
// 补全代码
const input = document.querySelector('#input')
const span = document.querySelector('#span')
input.onchange = function() {
    span.innerText = this.value
}
改成这样之后才给过： 
// 补全代码
let ii = document.querySelector('#input')
let ss = document.querySelector('#span')
ii.onchange = function() {
    ss.innerText = this.value
}


发表于 2021-12-02 18:24:53 回复(5)
HTML/CSS/JavaScript
驊驊龔頾头像 驊驊龔頾 
let span = document.getElementById("span"),
     inp = document.getElementById("input");

inp.onchange = function(){
 span.innerText = inp.value
}

// 谁能解释一下这样为什么不行？不管是oninput 还是 onchange 都报错。。。

发表于 2023-03-28 17:31:16 回复(0)
HTML/CSS/JavaScript
牛客722503979号头像 牛客722503979号 
<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
    </head>
    <body>
            
    	<input id="input" type="text" onchange="changespan()"/>
        <span id="span"></span>

        <script type="text/javascript">
            // 补全代码  实时用oninput
            function changespan(){
                span.innerText = input.value;
            }
            
        </script>
    </body>
</html>

发表于 2022-03-21 14:11:55 回复(2)
小文同学在努力头像 小文同学在努力 
        <script type="text/javascript">
            // 补全代码
            // 1.获取DOM元素
            var input = document.getElementById('input');
            var span = document.getElementById('span');
            // 监听 input框值发生改变事件
            input.onchange = function() {
                span.innerHTML = input.value;
            }
        </script>

发表于 2022-03-20 12:49:12 回复(0)
HTML/CSS/JavaScript
牛客白小飞头像 牛客白小飞
解答评论区几点疑惑 
  • // 测试用例
function() {
    document.querySelector('#input').value = 'nowcoder';
    document.querySelector('#input').onchange();
    return document.querySelector('#span').innerText === 'nowcoder'
}
    1. e.tartget.value为什么不行：    
        从测试用例看到，onchange是通过Dom元素触发的，并非点击或者失去焦点等事件触发。所以没办法获取到Event对象，e为undefined。
    1. 为什么箭头函数不行。
    箭头函数this指向windows，this.value为undefined.
    非箭头函数this指向input dom元素，this.value即为测试用例第二行语句赋值语句的赋值"nowcoder"
    1. const input和const span命名。
    两个元素id均为"input"和"span"，所示windows会创建两个变量（input和span),所以，直接引用"input"和"span"也是可以的，所以有一些就不推荐使用id选择器，会污染变量空间。
    • 发表于 2023-06-16 11:53:27 回复(1)
    晓晨学前端头像 晓晨学前端
     不知道为啥使用addEventListener通过不了
    使用oninput改变value span的值就跟着改变 
    使用onchange需要失去焦点才会改变
      <script type="text/javascript">
            // 补全代码
            var input = document.querySelector('#input');
            var span = document.querySelector('#span')
            input.onchange = function () {
                span.innerText = this.value
            }
            // input.addEventListener('input', function () {
            //     span.innerText = this.value
            // })
        </script>


    发表于 2022-04-16 21:41:07 回复(2)
    HTML/CSS/JavaScript
    JiXiang头像 JiXiang
            const ipt = document.querySelector("#input")
            const span = document.querySelector("#span")
            ipt.onchange = function () {
                span.innerText = ipt.value
            }
    我用的是onchange事件但是不知道为什么不通过
    发表于 2021-12-11 16:44:56 回复(4)
    HTML/CSS/JavaScript
    sirokuma2024头像 sirokuma2024
    有毒，要这样写才行，不能用变量名接……这里没有执行上下文 
                document.getElementById('input').onchange = (event) => {
                document.getElementById('span').textContent = document.getElementById('input').value;
            };


    编辑于 2024-03-14 12:59:49 回复(0)
    牛客630086915号头像 牛客630086915号 
    let input = document.querySelector('#input')
            input.onchange = function() {
                document.querySelector('#span').innerText = this.value

            }
这样为什么不能通过

    发表于 2023-11-26 01:00:28 回复(0)
    HTML/CSS/JavaScript
    小刘要努力呀头像 小刘要努力呀
                let inpt=document.getElementById("input")
                let spa=document.getElementById("span")
                inpt.addEventListener("change",(e)=>{
                    spa.innerHtml=e.target.value
                })为啥不行啊
    发表于 2023-10-07 16:58:32 回复(0)
    HTML/CSS/JavaScript
    TyphonRookie头像 TyphonRookie
    运行环境很扯淡
    发表于 2023-09-25 15:04:21 回复(0)
    Fortaro头像 Fortaro
         input.onchange = function(e){
             span.innerText = input.value;
        }
    发表于 2023-08-13 11:38:38 回复(0)
    HTML/CSS/JavaScript
    烟花十里头像 烟花十里
    这道题好像不支持ES6的写法。用 let不行，用var就行了
    也不支持 addEventListener 的change 事件写法 
    const span = document.getElementById('span');
const input = document.getElementById('input');
input.addEventListener('change', function(event){
    span.innerHTML = `${event.target.value}`;
});


    发表于 2023-05-30 22:46:34 回复(0)
    QiuYeDx头像 QiuYeDx
    一用let就报错。。只能这样写了 
    <!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');
            var span = document.querySelector('#span');
            input.onchange = function(){
                span.innerHTML = input.value;
            }
        </script>
    </body>
</html>


    发表于 2023-05-29 14:49:50 回复(0)
    HTML/CSS/JavaScript
    飞天猪02头像 飞天猪02
                // 补全代码
                let a = document.getElementById('input')
                let b = document.getElementById('span')
                a.addeventlistener('input', (e) => {
                    b.innerText = e.target.value
                })
    发表于 2023-04-19 15:40:37 回复(0)
    天子笑了头像 天子笑了
    不支持 const / let，要用 var，莫非在线解释器/编译器用的是 ES5 语法？！

    <!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.getElementById('input');
        var span = document.getElementById('span');

        input.onchange = (e) => {
          span.innerText = input.value
        }
      </script>
    </body>

    </html>

    发表于 2023-04-13 15:21:45 回复(0)
    提交观点

    问题信息

    难度：
    58条回答 468浏览

    热门推荐

    通过挑战的用户

    查看代码

    相关试题

    扫一扫，把题目装进口袋

    求职之前，先上牛客

    扫描二维码，进入QQ群

    扫描二维码，关注牛客公众号