Assign variable to function does not work in JavaScript?

Question

I've got some code that reads highlighted text. But I'm having trouble assigning a variable to the function in JavaScript. It does not call the function properly as expected.

<html>
<head>
<script type="text/javascript">

function getSelectionText()
{
    var text = "";
    if (window.getSelection)
    {
        text = window.getSelection().toString();
    }

    return text;
}

var txt = getSelectionText();   //<-----This is not working???

</script>
</head>
<body>
<p id="p1">Select some of this text then press the button<br /></p>

<button onclick= document.write(txt) >GetText</button>
</body>

</html>

If I use the function in the write params it works.

<button onclick= document.write(getSelectionText()) >GetText</button>

Why doesn't the function get called properly if I assign a variable to it?

-ScottA

"It does not call the function properly" --- what does the "proper call" mean? — zerkms
– zerkms, Commented Aug 23, 2012 at 22:32
I want to get the selected text after the page loads...The user selects some text..then clicks the button. — ScottA
– ScottA, Commented Aug 23, 2012 at 22:35
@user1621146 But you call it and set txt before the page loads. — Dave Newton
– Dave Newton, Commented Aug 23, 2012 at 22:36

Quentin · Accepted Answer · 2012-08-23 22:34:05Z

4

You are calling getSelectionText() as the page loads, so there won't be any text selected at the time.

You need to call it from your event handler.

Additionally you are:

Using an intrinsic event attribute (which you shouldn't)
Not quoting your attribute value (which is bad practise)
Trying to call document.write after the document has loaded (when it is in a closed state)

answered Aug 23, 2012 at 22:34

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ScottA Over a year ago

I'm not new to coding. But I'm very new to JS, web page loading, And JS button event handlers. If I see the proper way to do this it would greatly help me get an understanding how the flow works.

xqwzts · Accepted Answer · 2012-08-23 22:38:03Z

0

It isn't about assigning the variable it's about when your function gets called.

With your working version getSelectionText() gets called when the button is pressed. In the version that doesn't work getSelectionText() is called as soon as the <script> tag is loaded... and when the button is pressed the result of that earlier call is what is being used.

Since what you want is for the function to be called when the button is pressed then that is what you explicitly need to do.

answered Aug 23, 2012 at 22:38

xqwzts

3,5482 gold badges26 silver badges15 bronze badges

Comments

Shabab · Accepted Answer · 2012-08-23 22:40:52Z

0

I just got your code to work. For the most part. Basically, I have no reliance on the txt variable and am using your main function to print to the webpage. Why don't you try this and see what it is you'd want to improve.

answered Aug 23, 2012 at 22:40

Shabab

2491 silver badge9 bronze badges

Comments

Erik Eidt · Accepted Answer · 2012-08-23 22:47:29Z

0

Your line var txt = ... is initializing the global variable txt to the return value from getSelectionTxt()

Key to understanding how globals are initialized is realizing that the assignment is made when the javascript is loaded, not necessarily when the HTML DOM is loaded. As a result, in many cases, global assignments would be evaluated too soon, before other parts of the DOM are ready.

One way to do delay things is to use an body.onload event or function. You can set the event in the body tag, e.g. here calling some function of yours at the right time.

<body onload="initializeMyGlobalsFromDom()">

Where initializeMyGlobalsFromDom is a function that contains your line txt = getSelectionTxt(); // note: omit var keyword to refer to txt as a global

(You should continue to declare "var txt;" outside the function, best practice might say before its usage within the function.)

There are also ways to hook events without requiring attributes in the HTML tags. In the global context (where you have the var txt = ... , now) you can do

window.addEventListener("onload",initializeMyGlobalsFromDom);

Another option you have is to assign to a global variable the function itself, as in:

var txtFn = getSelectionText; // note assign function not function return value

Then when you use the global variable, you have to call it:

<button onclick="document.write(txt())">GetText</button>

answered Aug 23, 2012 at 22:47

Erik Eidt

27.5k2 gold badges34 silver badges56 bronze badges

1 Comment

ScottA Over a year ago

Oh wow. That's really weird compared to what I'm used to doing in other languages. But it works. Thanks a lot!

Collectives™ on Stack Overflow

Assign variable to function does not work in JavaScript?

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related