CODEWITHSUNDEEP
javascript
ScottA
ScottA

Reputation: 61

Assign variable to function does not work in JavaScript?

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

Upvotes: 2

Views: 776

Answers (4)

Erik Eidt
Erik Eidt

Reputation: 26646

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>

Upvotes: 0

Shabab
Shabab

Reputation: 249

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.

Upvotes: 0

xqwzts
xqwzts

Reputation: 3538

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.

Upvotes: 0

Quentin
Quentin

Reputation: 943569

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)

Upvotes: 4

Related Questions