SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    why skipping "this" in this.value will work sometimes and sometimes not

    The following code is on http://www.0011.com/test_js/test_without_this.html

    the first input field uses alert(value) instead of alert(this.value) and it works.

    the second and third input fields do not use the "inline anonymous function" but use another anonymous function... but the second one will show the value while the third one won't. I thought inline anonymous function is the same as assigning element.onclick= function() { whatever there was } isn't it? If so why would the first input field work and the third doesn't? It is true in IE 7, Firefox 3, and Safari 3. Many thanks!

    <form>

    <input id="text1" type="text" value="wah ha ha 1" onclick="alert(value)">
    <input id="text2" type="text" value="wah ha ha 2">
    <input id="text3" type="text" value="wah ha ha 3">

    </form>

    <script>

    document.getElementById("text2").onclick = function() { alert(this.value) }
    document.getElementById("text3").onclick = function() { alert(value) }

    </script>

  2. #2
    SitePoint Member
    Join Date
    Aug 2008
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    for document.getElementById("text2").onclick = function() { alert(this.value) } context for this.value is document.getElementById("text2") object. i.e. document.getElementById("text2").value

    while for second one, value property without this, is try to accessing local variable. i.e. not exists.

  3. #3
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i thought

    onclick="alert(value)"

    is an anonymous function which is the same as

    document.getElementById("text3").onclick = function() { alert(value) }

    ? so if function() { alert(value) } doesn't work, then onclick="alert(value)" shouldn't either?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Let's rephrase the question.

    Background:
    The inline event alert(this.value) can also work as just alert(value)
    With traditional events, alert(this.value) works but alert(value) doesn't.

    Question: What is the difference between inline events and traditional events that allows alert(value) to work on one type of event but not the other?

    Answer: The difference is due to the scope of the variables. With the inline event the scope is the element, whereas with traditional events the scope is the function itself.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist winterheat's Avatar
    Join Date
    Aug 2007
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is there a rule that says

    when this.variableName exists and there is no other local or global variable that has the name "variableName", then this.variableName can be just written as variableName? or is the rule different?
    Last edited by winterheat; Aug 21, 2008 at 16:27.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    "All variables should be declared before used." is about the closest you'll get.
    http://javascript.crockford.com/code.html

    A good resource about the this keyword is at http://www.quirksmode.org/js/this.html
    The best information I've found about closure and scope is in the javascript faq at jibbering.com. See the section about Identifier Resolution, Execution Contexts and Scope Chains
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    I should clarify something about the following example.

    Code html4strict:
    <input id="text1" type="text" value="wah ha ha 1" onclick="alert(value)">
    <input id="text3" type="text" value="wah ha ha 3">

    Code javascript:
    document.getElementById("text3").onclick = function() { alert(value) }

    The reason why the text1 element works is due to the execution context. When the onclick event is fired, the alert method is being called from the context of the text1 element itself. With the text3 element, the alert method is being called from the context of the function.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •