javascript 同一个input标签 document.getElementById获取后，alert(typeof ...)输出，在script标签中和function函数中的输出为什么不同？

作者站长头像
站长
· 阅读数 14

题目描述

javascript 同一个input标签 通过document.getElementById获取后，用alert(typeof ...)输出，在script标签中和function函数中的输出为什么不同？

题目来源及自己的思路

学习dom对象时发现的，一开始为了少写一行获取name语句，便放在方法外面，结果使用name.value.toLowerCase方法一直报找不到方法。alert(name.value)发现undefined。随即alter(name)发现没问题。再一想试了下alter(typeof name)发现输出为string。

将获取name语句，也就是document.getElementById("name")放入函数中就正常了。

但是这个情况太奇怪，虽然不影响继续学习，但搞不懂寝食难安，希望有大佬答疑解惑

问过new bing，但回答不太符合。new bing的回答：如果您提供的代码与您运行的代码完全相同，那么我之前的解释可能不正确。在JavaScript中，name是一个全局属性，它表示浏览器窗口的名称。如果您在全局作用域中声明了一个名为name的变量，那么这个变量会覆盖全局name属性。

在您提供的代码中，第一次调用alert(typeof name)时，name是一个局部变量，它是通过调用document.getElementById("name")获得的。但是，在这之前，您可能已经在全局作用域中声明了一个名为name的变量，并将其赋值为一个字符串。这会导致全局name属性被覆盖，从而使第一次调用alert(typeof name)时弹出一个对话框，显示“string”。

百度也搜不到相关问题

相关代码

粘贴代码文本（请勿用截图）<!DOCTYPE html><html lang="en"><head>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS-事件-案例</title>

</head><body>

<img id="light" src="img/off.gif"> <br>

<input type="button" value="点亮" onclick="lightUp()"> 
<input type="button"  value="熄灭" onclick="lightDown()">

<br> <br>

<input type="text" id="name" value="ITCAST" onblur="uppercase()" onfocus="lowercase()">
<br> <br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<input type="button" value="全选" > 
<input type="button" value="反选" >

</body>

<script>

//1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; 
var img = document.getElementById("light");
function lightUp() {
    img.src = "img/on.gif";
}
function lightDown() {
    img.src = "img/off.gif";
}


//2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; 
var name = document.getElementById("name");
alert(name + typeof name);

function uppercase() {
    
    var name = document.getElementById("name");

    alert(name + typeof name);
    name.value = name.value.toUpperCase();
}
function lowercase() {
    var name = document.getElementById("name");

    name.value = name.value.toLowerCase();
}


//3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick

</script></html>

你期待的结果是什么？实际看到的错误信息又是什么？

其中有两个alert(typeof name)语句，按理说两个都应该是object。但是第一个输出的是stringjavascript 同一个input标签 document.getElementById获取后，alert(typeof ...)输出，在script标签中和function函数中的输出为什么不同？

第二次输出正常为objectjavascript 同一个input标签 document.getElementById获取后，alert(typeof ...)输出，在script标签中和function函数中的输出为什么不同？

回复
1个回答
avatar
test
2024-07-04

你给这个变量换个名字就行了，因为你在这里写 var name = 'foo' 时，浏览器会把其给到 window.name，而 window.name 又比较特殊，他会强行的给转成字符串，然后你下面的 alert 的 name 其实就已经时转成字符串后的了，typeof 自然也是字符串。你在 alert 前面直接 console 打印一下 name 就知道，他已经是字符串了。

  • Edge (Chromium)answer image
  • Firefoxanswer image

最后，如果你使用 let 或 const 就不会有这个问题。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容