Change value of element inside iframe after onclick event with javascript

Question

I have some elements inside an iframe with an onclick event associated, something like:

<iframe>
 ... 
    <input type="text" onclick="somefunction(this)"/>
 ...
</iframe>

In the function called I try to change the value of the input, nothing special:

{
...
foo.value = "changed!"
...
}

At this point I can see in firebug that the value has changed but when the function finish the value doesn't change at all.

The same kind of thing with an onmouseover seems to work.

Any ideas?

Thanks.

Edit: Change code mistake

Answer 1

'this' means different things in the different contexts

Given:

<input type="text" onclick="somefunction(this)"/>

'this' is the input (since it is called as myInput.onclick())

But:

function someFunction(foo) {
    this.value;
}

You are calling as:

someFunction(myInput)

which is the same as

window.someFunction(myInput)

So in that context, 'this' is the window object.

Use 'foo' instead (since that is the argument name in the function declaration).

Answer 2

Value is not defined for an iframe tag. In Javascript, the "value" member is merely added to the object when set, but of course not taken into account by the navigator.

For setting content (this is also the case for div), you should use :

this.innerHTML = "Changed!";

or

this.innerText = "Changed!";