區分變量和ID

Question

我感到困惑在第3行

在第4行

的ID userInput的userInput在管線8

的

1. var userInput之間的關係具體地，第4行中的userInput（=的右側）是否參見第3行中的var userInput？還是指第8行的編號爲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

JavaScript變量名和DOM ID不相關的，不以任何方式進行交互。在第3行和第4行上有一個變量userInput。第8行上還有一個DOM元素，其ID爲"userInput"，在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 2

第3行聲明瞭保持運行document.getElementById('userInput').value的結果的本地變量（var userInput一部分）。這基本上告訴瀏覽器在頁面上找到具有值爲「userInput」的id屬性的元素並獲取其值。第4行告訴瀏覽器使用值爲「boldStuff2」的id屬性獲取頁面上的元素，並將其內容設置爲在第3行上聲明的變量的值。

Answer 3

在輸入中輸入的值被存儲在「VAR」 userInput ...

在HTML中的「哥們」將在其中存儲在userInput該輸入框無論什麼類型的被替換..

並回答你的問題。 ..

具體來說，是否使用r輸入 第4行（在=的右側）參考 第3行var userInput？或者是 它指的是 第8行中的id userInput？

它指的是無功在第3行...

此外，如何做變量userInput 在第3行習慣之後是 分配 的document.getElementById（userInput）。值 ????

認爲它是...拿着價值對你來說只是複製值到它......所以，當它在第4行的值被複制有使用...

你應該試着在瀏覽器中運行它並修改代碼，以便更快地找出它正在做什麼。

Answer 4

兩個第一個userInput是javascript代碼，最後一個是HTML。

讓我來解釋它一步一步：

在你的代碼的末尾，有一個按鈕「更改文本」，如果是點擊了哪個調用函數changeText2（）。

在changeText2：

1. userInput被分配具有ID 'userInput' 的元素的值。在這種情況下，這是文本框內容。 （第3行）

2. 然後，文本框的內容被插入到元件「boldStuff2」內，由文字屬性。 （4號線）

最後但並非最不重要的，我建議你閱讀有關的基礎知識JavaScript的HTML &第一。

Answer 5

具體來說，第4行（位於=的右側）的userInput引用第3行的var userInput？或者它是指第8行的id userInput？

您聲明內changeText2()功能已被分配document.getElementById('userInput').value（第3行）的值的可變userInput。

從本質上講，這行看起來與的userInput的ID頁面上的HTML元素。這是第8行定義的<input>。它的value然後被髮送到一個JavaScript變量，它恰好被稱爲userInput。

然後第4行使用userInput中的值作爲頁面上元素的innerHTML，ID爲boldStuff2。