onclick and the "this" keyword

[jeremylh]

I have a button that has an onclick attribute that calls a function. Inside the function I have "this.value" but when I click on the button it says that "this.value is null or not an object." How would I make an HTML element an object? Creating the button within javascript obviously works but the button is generated by PHP so that's not an option. Any help?

function removePolicy()
{
var policies = document.getElementById("policies")
var lis = policies.getElementsByTagName("li")
for (var i = 0; i < lis.length; i++)
{
if (i == this.value.substr(6))
{
policies.removeChild(lis[i])
}
}
}

<ul id="policies">
<li>
<input type="text" name="poli_numbs[]" value="policy1">
<input type="text" name="poli_files[]" value="policy1.pdf">
<button name="poli_remov1" onclick="removePolicy()">Remove1</button>
</li>
</ul>

[Calamitie]

'this' is only available within inline JavaScript (onclick="", onmouseover="", etc) - it can't be used inside a function, even if that function was called from inline JavaScript.

Although 'this' isn't available within the function, you can always pass 'this' to the function and use it as you would expect:

function removePolicy(this)
{
var policies = document.getElementById("policies")
var lis = policies.getElementsByTagName("li")
for (var i = 0; i < lis.length; i++)
{
if (i == this.value.substr(6))
{
policies.removeChild(lis[i])
}
}
}

<ul id="policies">
<li>
<input type="text" name="poli_numbs[]" value="policy1">
<input type="text" name="poli_files[]" value="policy1.pdf">
<button name="poli_remov1" onclick="removePolicy(this)">Remove1</button>
</li>
</ul>

Hope that helps :)

[jeremylh]

Thanks! It gave me an error when I tried to use "this" as a parameter so I simply changed it to "this_poli" in both parts of the function. Now, I have another button with a function that add's two textboxes and a button inside a list element to the unorderd list. How would I apply the "this" as a parameter? When I do "button.onclick = removePolicy(this)" it errors out.

function newPolicy()
{
var policies = document.getElementById("policies")
var liCount = policies.getElementsByTagName("li").length
var li = document.createElement("li")
var input1 = document.createElement("input")
var input2 = document.createElement("input")
var button = document.createElement("button")
input1.type = "text"
input1.name = "poli_numbs[]"
input2.type = "text"
input2.name = "poli_files[]"
button.name = "poli_remov" + liCount++
button.value = "Remove" + liCount++
button.onclick = removePolicy
li.appendChild(input1)
li.appendChild(input2)
li.appendChild(button)
policies.appendChild(li)
}

<button onclick="newPolicy()">Add Policy</button>

[Calamitie]

Ah, a 'hidden' 'event' parameter gets sent to the function;

button.onclick = removePolicy;

Is actually calling removePolicy(e) - where 'e' is the event parameter.

As far as I know, e.target would be the same as passing 'this' to the function.

Change button.onclick = removePolicy; to button.onclick = removePolicyA;

Then add the function:

function removePolicyA(e){
    removePolicy(e.target);
}

That's just a guessed solution, so don't expect it to work first time :push: (but you never know :p)

[jeremylh]

I tried e.target with no success. I looked up events and saw that IE uses srcElement (I have to use IE here at work...*sigh*) and that didn't work either.

[jeremylh]

Well it looks like I was making the whole project too complicated. I shortened my removePolicy() function to:

function removePolicy(button)
{
policies.removeChild(button.parentNode)
}

And since that was so short I just did this within my newPolicy() function:


button.onclick = function()
{
policies.removeChild(this.parentNode)
}

Thanks for the help Calamitie! It helped me "think in the right direction" :D

[Calamitie]

Hehe, that's much simpler :p

Glad to help :)