Differentiating variables and IDs

I am confused about the relationship between the

1. var us开发者_如何学JAVAerInput in line 3
2. the userInput in line 4
3. the id userInput in line 8

Specifically, does the userInput in line 4 (on the right side of =) refer to the var userInput in line 3? Or is it referring to the id userInput in line 8?

Also, how does the variable userInput in line 3 get used after it is assigned the 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'/>

Javascript variable names and DOM ids are not related and do not interact in any way. You have one variable userInput on line 3 and 4. You also have one DOM element with the id "userInput" on line 8, which is referenced on line 3 in getElementById('userInput').

Maybe this illustrates it better:

<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' />

Also, how does the variable userInput in line 3 get used after it is assigned the document.getelementbyID('userInput').value?

The variable holds the value of document.getElementById('userInputId').value. This value is then assigned to document.getElementById('boldStuff2').innerHTML on the next line. You could do the same thing with:

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

The variable goes out of scope after this (it basically ceases to exist), as the function ends.

Line 3 declares a local variable (the var userInput part) that holds the results of running document.getElementById('userInput').value. That basically tells the browser to go find the element on the page that has an id attribute with a value of "userInput" and get its value. Line 4 is telling the browser to go get the element on the page with an id attribute with a value of "boldStuff2" and set its contents to the value of the variable declared on line 3.

The value entered in the input gets stored in the "VAR" userInput ...

The "Dude" in the html would get replaced with whatever what typed in that input box which was stored in userInput..

And to answer your question...

Specifically, does the userInput in line 4 (on the right side of =) refer to the var userInput in line 3? or is it referring to the id userInput in line 8?

it refers to the Var in line 3...

Also, how does the variable userInput in line 3 get used after it is assigned the document.getelementbyID(userInput).value ????

Think of it as holding a value for you... it just copies the value into it... so that when it is used in line 4 the value gets copied there...

You should just try running it in a browser and tinker with the code you will figure out what it is doing quicker that way.

The two first userInput is javascript code, and the last is HTML.

Let me explain it step by step:

At the end of your code, there's a button 'Change Text' which invoke function changeText2() if it's clicked.

In changeText2:

1. userInput is assigned the value of the element which has id 'userInput'. In this case, that's the textbox content. (line 3)

2. Then, the textbox content is inserted inside the element 'boldStuff2', by innerHTML property. (line 4)

Last but not least, I recommend you reading about the basics javascript & html first.

Specifically, does the userInput in line 4 (on the right side of =) refer to the var userInput in line 3? Or is it referring to the id userInput in line 8?

The variable userInput which you declared within the changeText2() function has been assigned the value of document.getElementById('userInput').value (line 3).

Essentially, this line looks for a HTML element on the page with the ID of userInput. This is the <input> defined on line 8. Its value is then sent to a JavaScript variable, which happens to be called userInput.

Line 4 then uses the value in userInput as the innerHTML of an element on the page with the ID boldStuff2.