自学内容网 自学内容网

JS基础练习|input绑定值

在这里插入图片描述
在更改input里的值时,下方的文本同步变动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Input 绑定 JS 值</title>
</head>
<body>
    <input type="text" id="myInput">
    <p id="displayText"></p>

    <script>
        // 定义一个变量来保存 input 的值
        let inputValue = '';

        // 获取 input 元素和显示的 p 元素
        const inputElement = document.getElementById('myInput');
        const displayText = document.getElementById('displayText');

        // 监听 input 的输入事件
        inputElement.addEventListener('input', function(event) {
            // 更新 JS 变量的值
            inputValue = event.target.value;
            // 将值显示在页面上
            displayText.textContent = '你输入的值是:' + inputValue;
        });
    </script>
</body>
</html>


原文地址:https://blog.csdn.net/m0_69886881/article/details/142694895

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!