点击触发的JavaScript函数代码是否正确？$("#output").css失效问题排查

你的这段代码存在几个关键问题，导致点击按钮后无法显示output div，核心原因是你使用了jQuery代码但没引入jQuery库，同时还有其他逻辑和变量声明的小bug，下面逐一拆解：

核心问题：jQuery未引入导致$("#output").css()失效 #

你写的$("#output").css("display","block")是jQuery语法，但你的HTML里完全没有引入jQuery库——浏览器根本不知道$是什么，所以这行代码等于没执行，自然没法让output div显示出来。

解决办法有两个：

• 引入jQuery库：在你的自定义<script>标签之前，加一行引入代码（用CDN最方便）：

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

• 改用原生JS实现：其实没必要为这一行代码引入整个jQuery，用原生JS一样能搞定，更轻量：

divOutput.style.display = "block";

我更推荐这个方案，毕竟只是简单的样式设置，原生JS完全够用。

其他需要修复的代码问题 #

除了jQuery的问题，你的代码还有几个小bug会影响功能：

• 变量未声明：inputTag、divOutput、a、b这些变量都没加let/var声明，会变成全局变量，很容易和其他代码冲突，建议都加上声明，比如let inputTag = document.getElementsByTagName("input");。
• 循环逻辑冗余且有问题：你用循环遍历input标签，但其实只有两个输入框，循环完全没必要，而且循环里i+1会在最后一次循环时指向不存在的第三个input，导致判断逻辑出错。直接获取两个输入框的值判断就行：

let nameInput = document.getElementById("txtName");
let pwdInput = document.getElementById("txtPassword");
if (nameInput.value.trim() === "" || pwdInput.value.trim() === "") {
    alert("Please Enter Value");
    return; // 弹出提示后直接结束函数，避免后续错误赋值
}

• label标签的for属性错误：你的密码框对应的label写了for="txtName"，这会导致点击label时聚焦到名字输入框，应该改成for="txtPassword"。

修复后的完整代码 #

这里给你整理了修复好的版本，用原生JS实现样式设置，去掉了冗余的循环，修复了所有小bug：

<!DOCTYPE HTML>
<html lang="en">
<!--getElementsByTagName.html-->
<head>
    <title>getElementsByTagName.html</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" href="getElementsByTagName.css"/>
    <script type="text/javascript">
        //<![CDATA[
        function getData(){
            // 声明变量，避免全局污染
            let inputTag = document.getElementsByTagName("input");
            let divOutput = document.getElementById("output");
            let a, b;
            
            // 直接获取两个输入框，简化判断逻辑
            let nameInput = inputTag[0];
            let pwdInput = inputTag[1];
            
            // 检查输入是否为空，trim()处理空格
            if (nameInput.value.trim() === "" || pwdInput.value.trim() === "") {
                alert("Please Enter Value");
                return; // 阻止后续代码执行
            }
            
            a = nameInput.value;
            b = pwdInput.value;
            
            // 原生JS设置display属性
            divOutput.style.display = "block";
            
            // 更新output内容
            divOutput.innerHTML = `<strong>${a}</strong>`;
            divOutput.innerHTML += `<br/><strong>${b}</strong>`;
        }//end function
        //]]>
    </script>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>Example getElementsByTagName</legend>
            <label>Name</label>
            <input type="text" id="txtName"/>
            <label for="txtPassword">Password</label> <!-- 修复for属性 -->
            <input type="password" id="txtPassword"/>
            <button type="button" onclick="getData()"> Submit </button>
        </fieldset>
        <div id="output"> </div>
    </form>
</body>
</html>

内容的提问来源于stack exchange，提问作者Rohit Gour