Question

我对

之间的关系感到困惑

var userInput
第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'/>

Answer 1

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

Answer 2

输入中输入的值存储在“VAR”userInput ...

中

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

并回答你的问题......

具体来说，是userInput吗？第4行（在=的右侧）参考到第3行的var userInput？或是它引用了id userInput 第8行？

它指的是第3行中的Var ......

另外，变量userInput如何在第3行之后使用它分配了的document.getElementById（userInput）。价值 ????

将其视为为您保留一个值...它只是将值复制到其中......所以当它在第4行中使用时，该值会被复制到那里......

您应该尝试在浏览器中运行它并修改代码，您将更快地找出它正在做的事情。

Answer 3

两个第一个userInput是javascript代码，最后一个是HTML。

让我一步一步解释：

在代码的最后，有一个“更改文本”按钮，如果单击它，则会调用函数changeText2（）。

在changeText2中：

为userInput分配id为'userInput'的元素的值。在这种情况下，这是文本框内容。（第3行）
然后，通过innerHTML属性将文本框内容插入到元素“boldStuff2”中。（第4行）

最后但同样重要的是，我建议您阅读基本知识javascript＆amp;首先是HTML。

Answer 4

Javascript变量名称和DOM ID不相关，不以任何方式进行交互。第3行和第4行有一个变量userInput。第8行还有一个ID为"userInput"的DOM元素，在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' />

此外，第3行中的变量userInput在分配document.getelementbyID('userInput').value后如何使用？

变量保存document.getElementById('userInputId').value的值。然后在下一行将此值分配给document.getElementById('boldStuff2').innerHTML。你可以做同样的事情：

document.getElementById('boldStuff2').innerHTML = document.getElementById('userInputId').value;

在此之后变量超出范围（它基本上不再存在），因为函数结束。

Answer 5

具体来说，第4行（在=的右侧）中的userInput是否引用第3行中的var userInput？或者它是指第8行中的id userInput？

您在userInput函数中声明的变量changeText2()已被赋值为document.getElementById('userInput').value（第3行）。

基本上，此行在页面上查找ID为userInput的HTML元素。这是第8行定义的<input>。然后将value发送到JavaScript变量，该变量恰好称为userInput。

第4行然后使用userInput中的值作为ID为innerHTML的网页上元素的boldStuff2。

区分变量和ID

5 个答案: