我要招人

去企业版

首页 > 试题广场 >

单向绑定

[编程题]单向绑定

热度指数：43185 时间限制：C/C++ 3秒，其他语言6秒空间限制：C/C++ 256M，其他语言512M
算法知识视频讲解

请补全JavaScript代码，要求每当id为"input"的输入框值发生改变时触发id为"span"的标签内容同步改变。
注意：
1. 必须使用DOM0级标准事件（onchange）

算法知识视频讲解

HTML/CSS/JavaScript

sirokuma2024

有毒，要这样写才行，不能用变量名接……这里没有执行上下文

            document.getElementById('input').onchange = (event) => {
                document.getElementById('span').textContent = document.getElementById('input').value;
            };

编辑于 2024-03-14 12:59:49 回复(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

运行环境很扯淡

发表于 2023-09-25 15:04:21 回复(0)

HTML/CSS/JavaScript

牛客白小飞

解答评论区几点疑惑

// 测试用例
function() {
    document.querySelector('#input').value = 'nowcoder';
    document.querySelector('#input').onchange();
    return document.querySelector('#span').innerText === 'nowcoder'
}

e.tartget.value为什么不行：

从测试用例看到，onchange是通过Dom元素触发的，并非点击或者失去焦点等事件触发。所以没办法获取到Event对象，e为undefined。

为什么箭头函数不行。

箭头函数this指向windows，this.value为undefined.

非箭头函数this指向input dom元素，this.value即为测试用例第二行语句赋值语句的赋值"nowcoder"

const input和const span命名。

两个元素id均为"input"和"span"，所示windows会创建两个变量（input和span),所以，直接引用"input"和"span"也是可以的，所以有一些就不推荐使用id选择器，会污染变量空间。

发表于 2023-06-16 11:53:27 回复(1)

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)

HTML/CSS/JavaScript

飞天猪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)

HTML/CSS/JavaScript

星昭

发表于 2023-03-31 17:08:43 回复(0)

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

李星云_

let input = document.querySelector("#input")
        let span = document.querySelector("#span")
            input.oninput = function () {
                span.textContent = input.value;
            }
为什么这个不对呢 在 vscode 中运行就是对的

发表于 2023-03-24 11:14:33 回复(0)

HTML/CSS/JavaScript

牛客519610642号

        <script type="text/javascript">
            // 补全代码
            let _input = document.querySelector('#input')
            let _span = document.querySelector('#span')
            _input.onchange=()=>{
                _span.innerText = _input.value
            }
        </script>

发表于 2023-03-17 13:33:55 回复(0)

HTML/CSS/JavaScript

9527176

let oIp = document.querySelector('#input')
let oSp = document.querySelector('#span')
// 1
oIp.onchange = function() {
    oSp.textContent = this.value
}
oIp.onchange = function(e) {
    oSp.textContent = e.target.value
}

发表于 2023-02-19 20:51:10 回复(0)

HTML/CSS/JavaScript

不想上班芒果觉醒了

发表于 2023-02-03 15:56:19 回复(0)

HTML/CSS/JavaScript

code_sl

const inputEl = document.querySelector('#input');
const spanEl = document.querySelector('#span');
inputEl.onchange = changeHandler

function changeHandler() {
    spanEl.innerHTML = this.value
}

发表于 2022-12-03 17:21:00 回复(0)

HTML/CSS/JavaScript

牛客684460607号

<script type="text/javascript">
            // 补全代码
            let inp = document.getElementById('input')
            let sp = document.getElementById('span')
            inp.onchange = function(){
                sp.innerText = this.value;
            }
        </script>

发表于 2022-11-26 11:11:00 回复(0)

HTML/CSS/JavaScript

椰子鸡真好吃

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

        <script type="text/javascript">
          // 1. 先找到对应元素
            let input = document.querySelector('#input')
            let span = document.querySelector('#span')
          // 2. 绑定事件
          // 方法1：
          // input.addEventListener('change',function(e){
          //   value = e.target.value
          //   span.innerHTML= value 
          // })
          // 方法2：
            // input.onchange = function(e){
            //     value = e.target.value
            //     span.innerHTML= value 
            // }
            input.onchange = function () { 
              span.innerHTML= input.value
             }
        </script>
    </body>
</html>

发表于 2022-11-24 16:34:39 回复(0)

HTML/CSS/JavaScript