0
th,td {
  padding: 5px;
}
</style>
<body>

<h2>The XMLHttpRequest Object</h2>

<form action=""> 
  <select name="customers" onchange="showCustomer(this.value)">
    <option value="">Select a customer:</option>
    <option value="ALFKI">Alfreds Futterkiste</option>
    <option value="NORTS ">North/South</option>
    <option value="WOLZA">Wolski Zajazd</option>
  </select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>

<script>
function showCustomer(str) {
  var xhttp;  
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "getcustomer.asp?q="+str, true);
  xhttp.send();
}
</script>
</body>
</html>

Hey and sorry for the basic question :) just studying some JavaScript's AJAX and I'm confused with the use of "this" in this code block, in the onchange EventHandler. It seems as if "this" refers to the option element but I can't really understand how or why.

EDIT : seems like it's not so basic.

I read the detailed answer of a general question about "this"

How does the "this" keyword work?

and also the great article :

http://www.digital-web.com/articles/scope_in_javascript/

both of them serve a great deal of people, but do not touch exactly my question.

I can't figure out what's the exact behavior of "this" when using it inside the HTML element, with a javascript function.

I hope someone understands my meaning

Shoty
  • 1
  • 2
  • `this` refers to the `xhttp` variable. So when the response returns, you check if `xhttp.readyState` equals 4. The duplicate contains the full explanation. Inside the HTML, `this.value` refers to the value attribute of the selected option element. But those two `this`es are not the same. – Shilly Sep 27 '19 at 12:04
  • onreadystatechange is a method of xhttp, so when we invoke it "this" refers on xhttp. read more about how functions invoke – WVFFLIFE Sep 27 '19 at 12:04
  • `this` in `onChange` `showCustomer(this.value)` does refer to the element having the onClick event. In other contexts, like a constructor, it refers to the element being constructed. – Adder Sep 27 '19 at 12:10
  • @MatteoTassinari thank you but I still couldn't find the answer for my situation. – Shoty Sep 29 '19 at 14:38
  • @Adder your answer is the only one that at least touches my problem a bit. Can you elaborate? – Shoty Sep 29 '19 at 14:38
  • The `this` keyword provides context to a function. In an event handler, `this` refers to the element receiving the event. In a constructor, `this` refers to the object being constructed: function c(name) { this.name = name; } var o = new c("MyName"); console.log(o.name); //myName You can also set `this` to whatever you want in a function call: function echo(a,b) { console.log(this); console.log(a); console.log(b); } echo.call("first", "aaa", "bbb"); //first aaa bbb echo.apply("second", ["aaa", "bbb"]); //second aaa bbb – Adder Sep 30 '19 at 08:12

1 Answers1

-1

this refers to the object it belongs to take for instance

class dogs {
constructor () {
    this.name = 'dogs'
    console. log(this.nane) // returns dogs
    this.bread = function () {
        console. log(this.name) // returns undefined
        this.type = "pug"
        console. log(this.type) // returns pug
    }
    console. log(this.type) // undefined
    console. log(this.bread.type) // pug
    }
}
}
john swana
  • 53
  • 7