RE: Javascript GetElementByID

[chandhseke]

Yes I need to know the difference

[Dormilich]

the difference between "this" and …?

[chandhseke]

Sorry for the confusion. I want to know the difference between "this" and the code i replaced with "this.value ". Technically, i understood but i need to know why "this.value " gave an error (infact displaying a word "undefined" on all selections.

Why actually "this" is used for?

Again sorry for bothering you a lot in this!!

[Dormilich]

i need to know why "this.value " gave an error

short answer: because you call the function in the wrong scope.

longer answer:
first you have to understand, that JavaScript (as a programming language) is all about objects. (there are some primitive data types though)

that means, that even your HTML page to JavaScript is just an enormous bunch of objects. (more to that later)

but these objects are not equal, they have a "hierarchy" . this hierarchy is called scope. you can imagine that a particular scope is like a layer or an environment of an object. you may have heard that the environment inside a function is called local scope, and everything that is defined top level (e.g. not inside a function) is called global scope. meaning if you have a variable defined inside a function, it can access (read) every other variable, that has the same or a higher scope.
(you probably have to google for articles regarding this stuff to get a deeper understanding)

<script type="text/javascript">
var x = 0; // global scope
var y = "some text in global scope";

function myFunc1()
{
    var y = 1; // local scope
    var a = "another local var";
    alert(y); // shows the local variable ("1") and not the global one
    alert(x); // shows "0"
// show local variable x, if there ain’t any, look in the next level (global scope)
}

function myFunc2()
{
    var z = "Byte"; // local
    alert(z); // show local
    alert(a); // shows "undefined"
// because a is neither defined in local scope, nor in global scope.
// it only exists in the local scope of myFunc1
}
</script>

you might have guessed … functions are objects (weird, but true)

you might get the dim idea, that when your change event appended "undefined" exactly this is happening, but why? because there are some functions, that change the scope of a function (or object).

those functions are (not a complete list)

• setTimeout()
• setInterval()
• addEventListene r()
• removeEventList ener()
• call()
• apply()

and I forgot to mention somthing important, even the global scope is tied to an object. the window object (the same as in window.open()).

if you read about objects, you learn some basic features they have, that is, they have members called properties and methods*. properties are "variables" , that can only be called from the object, that owns these properties.

* - methods are a synonym for functions, an object may execute. but from the JavaScript-point-of-view that doesn’t matter, because everything is an object, be it an array, a string, a number (…) or a function

so let me rephrase the above list

• window.setTimeo ut()
• window.setInter val()
• Element.addEven tListener()
• Element.removeE ventListener()
• Function.call()
• Function.apply( )

I said, these fu–methods change the scope of the functions they execute. that is, the keyword this no longer points to the scope, the function was defined in but the scope of the executing object.

example:

// HTML
<div id="test" title="some meaningless text">just an example</div>

// JS
// define a function showing the title property [U]of the current object at execution time[/U]
function myFunc()
// the same as: window.myFunc = function()
// though there are some utterly fine differences
{
    alert(this.title);
}
// get the element object
var div = document.getElementById("test");
// would be the same as
window.div = document.getElementById("test");

// alerts "undefined", because there is no window.title property (… yet ;) )
myFunc();
// window.myFunc();

// alerts "some meaningless text" when you click on the div
div.addEventListener("click", myFunc, false);

you may argue, that you have defined the event, but it still doesn’t work…

… well, inline JavaScript is different (and IMO ugly)

if you code

<div id="test" title="some meaningless text" onclick="myFunc()">just an example</div>

then myFunc() is still executed in global scope (aka window) showing "undefined" .

however, you can explicitly pass a reference to the current object (even more ugly :).

<div onclick="someFunc(this)">kick me</div>

(I don’t wanna go into detail here)

another way to bind the event would use the onevent attribute, but this does not allow for event capturing** (which is possible with addEventListene r)

** - note: IE does not support event capturing at all

[chandhseke]

Thats really a very good piece of information. Thanks a lot folk.

Regardong the main subject of this thread. How can set the drop down ITEM selected (Not the value) to a hidden text box and where should i call this function?

Chandhseke

[Dormilich]

dropdown item = selected option element text content?

just the same event as if you were using the value. you only have to access the piece of information differently than in case of value (you need the select.options list)

[chandhseke]

Hi Folk,

Can you give me an example please? I did it few times but did not work to me, am running short of time for my project submission.

I repeat the question: I want the drop down selected item to pass to a hidden text box using JavaScript.

<option value="Chandhse ke@bytes.com">C handhu</option>

I want to pass "Chandhu" to a hidden text box so that i can insert this value intoo database.

Thanks in advance. This subject discussion taught me a lot about javascript.
Thanks again.

Chandhseke

[Dormilich]

I already did. post #12, 2nd code box.

[chandhseke]

That is not working to me ( I maay not using it correctly either). I tried the one in post #12 anad below: Both did not gave me a solution

functiion addemail()
{
document.getEle mentByID("hidte xt").value = document.getEle mentById("Selec t").options[i].text;
}

Please advise.

Chandhseke

[Dormilich]

point 1: "function" contains only a single "i"
point 2: "getElementByID ()" is an incorrect call (it’s getElementById( ), JavaScript is case-sensitive)
point 3: the variable "i" is undefined
point 4: the example code shows, how to use the options property correctly

[chandhseke]

document.getEle mentById("text" ).value = this.options[this.selectedIn dex].text;

In the above example of post #12, can we write a code without using "this" property since the above code returned a JS error while i run the script.

[Dormilich]

sure, replace this by a reference to the select element. though if you’re already using the function, that passes the email address (through this) it would make sense to add that line into the function (unless you can’t do this due to some reasons)

since the above code returned a JS error while i run the script.

most probably called in the wrong scope.

PS. if you keep all your JavaScript in an external file, your HTML will look much more lucid (plus you don’t have to update the HTML if something changes in the JS).

[chandhseke]

Do you mean to say like below,

document.getEle mentById("hidte xt").value = document.getEle mentByID("selec t").options[this.selectedIn dex].text;

Correct the above code if i am wrong, i am trying to understand how exactly does it works.

Chandhseke

[Dormilich]

1) JavaScript is case-sensitive
2) I still can see a "this"

[chandhseke]

I think its better you please correct the example code that i sent you!!.