Question

I have a function that deletes a textfield (called termsField) and uses JQuery to empty the text from a div (called definitionContainer), and I activate the function when the user clicks on a button.

function clearText(target){
    var definitionDiv = document.getElementById("definitionContainer");
    $('#definitionContainer').empty(); //empty the div
    termsField.value = ""; //delete the text field
    $(target).val = "";

And this is the HTML for my textfield and button:

<input id="termsField" type="search" autocorrect="off" 
     placeholder="Type something!" maxlength="2048">

<INPUT type="image" name="Clear" alt="Clear Search" src="clearX.png" 
    height="22" width="22" onClick="clearText(this)">

Does anyone have any idea why clearing the definitionDiv works in Firefox but termsField.value = ""; doesn’t work? Both of these work fine in Safari and Chrome. I’m not bothering with testing IE since this is part of a web interface.

Answer 1

You haven’t shown where the variable termsField is defined. Maybe you haven’t defined it, which is likely to be the problem, since not all browsers do the hideous thing (introduced by IE) of polluting the global object with properties corresponding to the IDs of elements within the document. The following works fine for me:

var termsField = document.getElementById("termsField");
termsField.value = "";

Also, although this is unrelated to the problem with termsField, jQuery’s val() is a method:

$(target).val("");