18

okay so I have this code in body:

<input type="text" value="haha" id="full_name"/>

And this code in script

<script language="javascript" type="text/javascript">
    function first(){
        var nameContent=document.getElementById('full_name').value;
    }

    function second() {
        first();
        y=nameContent; 
        alert(y);
    }
    second();
</script>

I want a alert showing the value of the element full_name, but it doesn't seem to work, does anyone know why? :S

5 Answers 5

20

nameContent only exists within the first() function, as you defined it within the first() function.

To make its scope broader, define it outside of the functions:

var nameContent;

function first(){
    nameContent=document.getElementById('full_name').value;
}

function second() {
    first();
    y=nameContent; alert(y);
}
second();

A slightly better approach would be to return the value, as global variables get messy very quickly:

function getFullName() {
  return document.getElementById('full_name').value;
}

function doStuff() {
  var name = getFullName();

  alert(name);
}

doStuff();
Sign up to request clarification or add additional context in comments.

5 Comments

I think using a global var the same as using a function to return it's value, both are global scope, isn't? One problem regarding your approach is that always when getFullName() is called, a DOM search will be done, if a var were used, that DOM search would be called just once.
No, they're quite different because global variables that hold static values aren't functions. As for the searching, isn't that the point? You want to get the current value of the element with the id of full_name. If that value was static, it would be pointless to have a function return the static variable.
What I really want to say that it can be optimized. You can hold the DOM object in a var: nameElement = document.getElementById('full_name'); and whenever needs it's value, use nameElement.value.
The performance boost is absolutely tiny. At 2 million calls/second, I doubt you will notice any speed differences: jsperf.com/getelementbyid1232
Sure it is, in this test, but if you think of a big page with lots of elements, running on a PC with low performance, with lots of open tabs in a Firefox, with lots of add-ons...
4

Your nameContent scope is only inside first function. You'll never get it's value that way.

var nameContent; // now it's global!
function first(){
    nameContent = document.getElementById('full_name').value;
}

function second() {
    first(); 
    y=nameContent; 
    alert(y);
}
second();

Comments

1

you need a return statement in your first function.

function first(){
    var nameContent = document.getElementById('full_name').value;
    return nameContent;
}

and then in your second function can be:

function second(){
    alert(first());
}

Comments

1

Your nameContent variable is inside the function scope and not visible outside that function so if you want to use the nameContent outside of the function then declare it global inside the <script> tag and use inside functions without the var keyword as follows

<script language="javascript" type="text/javascript">
    var nameContent; // In the global scope
    function first(){
        nameContent=document.getElementById('full_name').value;
    }

    function second() {
        first();
        y=nameContent; 
        alert(y);
    }
    second();
</script>

Comments

0

the OOP way to do this in ES5 is to make that variable into a property using the this keyword.

function first(){
    this.nameContent=document.getElementById('full_name').value;
}

function second() {
    y=new first();
    alert(y.nameContent);
}

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.