当前位置：首页 > 行业动态 > 正文

html写js代码

在HTML文件中通过“包裹JavaScript代码块实现交互功能（共 
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">HTML与JS交互示例</title>
    <style>
        #result { margin-top: 20px; padding: 10px; border: 1px solid #ccc; }
        .error { color: red; }
    </style>
</head>
<body>
    <!-输入区域 -->
    <div>
        <label>姓名：<input type="text" id="name" placeholder="请输入姓名"></label>
        <button id="submitBtn">提交</button>
    </div>
    <!-结果显示区域 -->
    <div id="result">等待输入...</div>
    <script>
        // 获取DOM元素
        const nameInput = document.getElementById('name');
        const submitBtn = document.getElementById('submitBtn');
        const resultDiv = document.getElementById('result');
        // 绑定点击事件
        submitBtn.addEventListener('click', function() {
            const nameValue = nameInput.value.trim(); // 获取输入值并去除空格
            if (nameValue === '') {
                // 空值处理
                resultDiv.className = 'error';
                resultDiv.textContent = '姓名不能为空！';
            } else {
                // 正常显示
                resultDiv.className = '';
                resultDiv.innerHTML = `<strong>您好，${nameValue}！</strong>`;
                // 动态修改按钮样式
                submitBtn.disabled = true;
                setTimeout(() => {
                    submitBtn.disabled = false;
                }, 2000);
            }
        });
        // 回车键触发事件
        nameInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                submitBtn.click(); // 触发按钮点击事件
            }
        });
    </script>
</body>
</html>

核心功能说明

HTML元素 JavaScript操作 作用描述
<input id="name"> document.getElementById('name').value 获取用户输入的姓名值
<button> addEventListener('click') 监听按钮点击事件，触发数据验证和结果显示逻辑
<div id="result"> element.innerHTML 动态更新结果显示区域，支持HTML内容渲染
全局<script> addEventListener('keypress') 监听输入框回车键，实现键盘快捷提交功能

关键代码解析

  1. 输入验证逻辑
    if (nameValue === '') {
 resultDiv.className = 'error';
 resultDiv.textContent = '姓名不能为空！';
}
  • 通过trim()方法去除输入值两端空格
  • 空值时添加红色警示样式并显示错误提示
  • 非空时清除样式并显示欢迎信息
  1. 按钮状态控制
    submitBtn.disabled = true;
setTimeout(() => {
 submitBtn.disabled = false;
}, 2000);
  • 提交后禁用按钮防止重复点击
  • 使用setTimeout实现2秒后恢复按钮可用状态
  1. 键盘事件绑定
    nameInput.addEventListener('keypress', function(e) {
 if (e.key === 'Enter') {
     submitBtn.click();
 }
});
  • 监听keypress事件捕获回车键
  • 通过程序触发按钮点击事件，实现键盘提交功能

相关问题与解答

问题1：如何修改代码使输入框在提交后自动清空？
解答：
在成功验证后的代码块中添加nameInput.value = '';语句，

html写js代码 第1张

resultDiv.innerHTML = `<strong>您好，${nameValue}！</strong>`;
nameInput.value = ''; // 清空输入框

______________________________________________

问题2：为什么使用addEventListener而不是onclick属性？
解答：
addEventListener的优势在于：

  1. 可以绑定多个事件处理函数而不会覆盖
  2. 支持事件委托机制（通过父元素管理子元素事件）
  3. 更符合现代JavaScript
0

相关文章