Issue passing 'this' into Javascript function

Question

Slightly confused by this problem. I have written this function to replace punctuation in input elements:

function punctuationReplace(element){
	var elementToChange = document.getElementById(element);
	elementToChange.value = elementToChange.value.replace(/\"/g, '');
	elementToChange.value = elementToChange.value.replace(/\'/g, '');
	elementToChange.value = elementToChange.value.replace(/&/g, 'and');
	elementToChange.value = elementToChange.value.replace(/</g, '');
	elementToChange.value = elementToChange.value.replace(/>/g, '');
}

<input type="text" id="IPR_FNM1" name="IPR_FNM1" value="" maxlength="30" size="31" placeholder="Forename 1" onblur="punctuationReplace(this)"/>

When I manually run the function in the browser console with the relevant ID as the argument, it works. And when inside the function I add the line alert(element.id);, I get an alert containing the correct element ID. So I am confused as to why the above punctuationReplace function won't work when I call it using onblur="punctuationReplace(this)".

I'm sure there is a simple solution but no idea what it is.

Jamiec · Accepted Answer · 2015-02-12 14:41:57Z

3

If you pass in this in that fashion, you already have a reference to the element, so no need to call getElementById.

function punctuationReplace(element){
    var elementToChange = element; //document.getElementById(element);
    elementToChange.value = elementToChange.value.replace(/\"/g, '');
    elementToChange.value = elementToChange.value.replace(/\'/g, '');
    elementToChange.value = elementToChange.value.replace(/&/g, 'and');
    elementToChange.value = elementToChange.value.replace(/</g, '');
    elementToChange.value = elementToChange.value.replace(/>/g, '');
}

answered Feb 12, 2015 at 14:41

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adeneo · Accepted Answer · 2015-02-12 14:41:29Z

3

Stop using inline event handlers, and the issue solves itself

document.getElementById('IPR_FNM1').addEventListener('blur', punctuationReplace, false);

function punctuationReplace(){
    this.value = this.value.replace(/("|'|<|>)/g, '').replace(/&/g, 'and')
}

answered Feb 12, 2015 at 14:41

adeneo

319k29 gold badges410 silver badges392 bronze badges

3 Comments

Quentin Over a year ago

While not using intrinsic event attributes is a good idea, that code won't work unless you also rewrite the punctuationReplace function.

Andy Kaufman Over a year ago

This is a really nice solution. Would it work using document.getElementsByTagName('input')?

adeneo Over a year ago

@AndyKaufman - It would, but with a for loop, as that gets a nodeList, not a single element

Quentin · Accepted Answer · 2015-02-12 14:41:42Z

3

this is a reference to a DOM element. It is not a string containing an ID.

You are trying to use it as an argument to getElementById but when it is stringified (to "[Object object]") there isn't a matching ID in the document, so you get null.

You already have the element. You don't need to search the DOM for it.

Remove the line var elementToChange = document.getElementById(element); and change the other references to element.

answered Feb 12, 2015 at 14:41

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Michelangelo · Accepted Answer · 2015-02-12 14:54:21Z

0

You don't need to create a var just keep using element. Like this: http://jsfiddle.net/0xuf64zb/1

function punctuationReplace(element){
    element.value = element.value.replace(/\"/g, '');
    element.value = element.value.replace(/\'/g, '');
    element.value = element.value.replace(/&/g, 'and');
    element.value = element.value.replace(/</g, '');
    element.value = element.value.replace(/>/g, '');
}

And indeed stop using inline calls!

answered Feb 12, 2015 at 14:54

Michelangelo

5,9785 gold badges36 silver badges51 bronze badges

Comments

nanndoj · Accepted Answer · 2015-02-12 16:18:27Z

0

this already have an reference to element you want. You don't need to get it again using getElementById. Just put it straight to your variable:

  var elementToChange = element;

edited Feb 12, 2015 at 16:18

answered Feb 12, 2015 at 14:42

nanndoj

6,7907 gold badges33 silver badges43 bronze badges

1 Comment

Ben Over a year ago

Please edit your answer, and explain why this solves the problem.

Collectives™ on Stack Overflow

Issue passing 'this' into Javascript function

5 Answers 5

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related