Javascript 区分变量和ID

我对两者之间的关系感到困惑

var userInput

第3行

第4行中的

userInput

第8行中的id

userInput

具体而言，第4行中的

userInput

（在

=

的右侧）是否指第3行中的

var userInput

？或者它是指第8行中的id

userInput

另外，第3行中的变量

userInput

在分配了

document.getelementbyID（'userInput'）.value

后如何使用

1  <script type = "text/javascript">
2  function changeText2() {
3      var userInput = document.getElementById('userInput').value;
4      document.getElementById('boldStuff2').innerHTML = userInput;
5  }
6  </script>
7  <p>Welcome to the site <b id = 'boldStuff2'>dude</b></p>
8  <input type = 'text' id = 'userInput' value = 'Enter Text Here'/>
9  <input type = 'button' onclick = 'changeText2()' value = 'Change Text'/>

1
2函数changeText2（）{
3 var userInput=document.getElementById（'userInput'）.value；
4 document.getElementById（'boldStuff2'）。innerHTML=userInput；
5  }
6.
7欢迎来到这个网站，伙计

8.
9

第3行声明了一个局部变量（

var userInput

部分），它保存运行

document.getElementById（'userInput'）.value的结果。这基本上告诉浏览器在页面上查找具有值为“userInput”的
id
属性的元素并获取其值。第4行告诉浏览器去获取页面上具有
id
属性且值为“boldStuff2”的元素，并将其内容设置为第3行声明的变量值。
第3行声明了一个局部变量（保存运行
document.getElementById的结果的
var userInput
部分）（'userInput'）.value
。这基本上告诉浏览器在页面上查找具有值为“userInput”的
id
属性的元素并获取其值。第4行告诉浏览器在页面上获取值为“boldStuff2”的
id
属性的元素并将其内容设置为第3行声明的变量值。
输入中输入的值将存储在“VAR”userInput中

html中的“Dude”将被存储在userInput中的输入框中键入的内容替换

为了回答你的问题

具体来说，用户是否在
第4行（位于=）的右侧，参见
第3行的var userInput？或
它引用了中的userInput标识
第八行

它指的是第3行中的Var

另外，变量userInput是如何实现的
在第3行中，请在完成后使用它
分配
document.getelementbyID（userInput）.value

将其视为为为为您保存一个值…它只是将值复制到其中…因此，当它在第4行中使用时，值会被复制到那里

您应该尝试在浏览器中运行它，然后修改代码，这样您会更快地了解它在做什么。
输入中输入的值将存储在“VAR”userInput中

html中的“Dude”将被存储在userInput中的输入框中键入的内容替换

为了回答你的问题

具体来说，用户是否在
第4行（位于=）的右侧，参见
第3行的var userInput？或
它引用了中的userInput标识
第八行

它指的是第3行中的Var

另外，变量userInput是如何实现的
在第3行中，请在完成后使用它
分配
document.getelementbyID（userInput）.value

将其视为为为为您保存一个值…它只是将值复制到其中…因此，当它在第4行中使用时，值会被复制到那里

您应该尝试在浏览器中运行它，然后修改代码，这样您会更快地了解它在做什么。
前两个用户输入是javascript代码，最后一个是HTML

让我一步一步地解释一下：

在代码的末尾，有一个按钮“Change Text”，如果单击它，它将调用函数changeText2（）

在changeText2中：

userInput被分配了id为“userInput”的元素的值。在本例中，这是文本框内容。（第3行）

然后，通过innerHTML属性将文本框内容插入元素“boldStuff2”中。（第4行）

最后但并非最不重要的一点，我建议您首先阅读基本的javascript和html。
前两个用户输入是javascript代码，最后一个是html

让我一步一步地解释一下：

在代码的末尾，有一个按钮“Change Text”，如果单击它，它将调用函数changeText2（）

在changeText2中：

userInput被分配了id为“userInput”的元素的值。在本例中，这是文本框内容。（第3行）

然后，通过innerHTML属性将文本框内容插入元素“boldStuff2”中。（第4行）

最后但并非最不重要的一点，我建议您首先阅读基本的javascript和html。
javascript变量名和DOM id不相关，也不以任何方式交互。第3行和第4行有一个变量
userInput
。您还有一个id为
的DOM元素“userInput”
第8行，在
getElementById（'userInput'）
的第3行中引用

也许这更能说明这一点：

<script type="text/javascript">
    function changeText2(){
        var userInputVariable = document.getElementById('userInputId').value;
        document.getElementById('boldStuff2').innerHTML = userInputVariable;
    }
</script>
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p> 
<input type='text' id='userInputId' value='Enter Text Here' />

函数结束后，变量超出范围（它基本上不存在）。
Javascript变量名和DOM id不相关，也不会以任何方式交互。第3行和第4行有一个变量
userInput
。还有一个id为
的DOM元素“userInput”
第8行，在
getElementById（'userInput'）
的第3行中引用

也许这更能说明这一点：

<script type="text/javascript">
    function changeText2(){
        var userInputVariable = document.getElementById('userInputId').value;
        document.getElementById('boldStuff2').innerHTML = userInputVariable;
    }
</script>
<p>Welcome to the site <b id='boldStuff2'>dude</b> </p> 
<input type='text' id='userInputId' value='Enter Text Here' />

函数结束后，变量将超出范围（它基本上不再存在）

具体来说，第4行中的userInput（在=）是指第3行中的var userInput，还是指第8行中的id userInput

在
changeText2（）中声明的变量
userInput