0

I don't have any trouble with this code but I am very curious as to why the function below seems to need an underscore in its name.

function _clear()
    {
        document.getElementById("test").innerHTML =  "";
    }

The function _clear() only executes after clicking the button if the function name contains an underscore.

<button type="submit" onClick="_clear()">Clear</button>
Billal Begueradj
  • 13,551
  • 37
  • 84
  • 109
joseMana
  • 23
  • 1
  • 6
  • 1
    Possible duplicate of [Underscore prefix for property and method names in JavaScript](https://stackoverflow.com/questions/4484424/underscore-prefix-for-property-and-method-names-in-javascript) – Chris Jun 09 '17 at 08:05
  • 2
    I think `clear` is a built-in function. Thus, your browser tries to call the base function, not the one you have previously defined. – Abrikot Jun 09 '17 at 08:05
  • 1
    can you provide a working model – Sagar V Jun 09 '17 at 08:05
  • Not a duplicate in the slightest with reference to the resource alluded to by @Chris, a discussion which focuses on a naming convention related to encapsulating data in JavaScript. – slevy1 Jun 10 '17 at 04:43

2 Answers2

3

According to the MDN, clear() is a method of the Document object, which one might call by writing document.clear(). But, since this method is deprecated one ought not to call it at all. In fact, in HTML5, the method does nothing (see HTML5 spec).

So, until this method is actually removed from the Document object, one might conclude that a potential conflict exists in having a user-defined function with the same name as that of the Document's method. That said, the following code runs just fine using Google Chrome (Version 49.0.2623.112 m):

var d = document;
d.g = d.getElementById;

function clear()
{
        d.g("test").innerHTML =  "";
    }

var test = d.g("test");
test.onmouseover=clear;

See demo

It's unlikely that there is a conflict between clear() and document.clear(). I wrote a user-defined function that uses the same name as another document method and the code ran flawlessly; see here.

Apparently, when the onclick event attribute is given the user-defined function "clear()" there is some kind of confusion with clear() being associated with document.clear(); see here and read the excellent explanation in the official answer. In brief, the issue boils down to "...the Document object is in the scope chain before the Window object (...)" (see JavaScript: The Definitive Guide).

If for some reason you were determined for the code to work, here's how to specify the correct context:

HTML:

<div id="test">a test to see if this will clear</div>
<button id="but" onclick="window.clear()">Clear</button>

So, the user-defined function actually becomes a method of the Window object, along side the built-in ones like window.open(), allowing the code to execute; see here.

Note, the best way to have an action occur when a click event occurs is to put this line in your JavaScript code given a button with an id of "but":

but.addEventListener('click',clear);

See demo.

slevy1
  • 3,623
  • 2
  • 23
  • 30
1

That's because clear() is a function that already exists in JavaScript. You could also add the underscore to the end or add another c or do anything so that the function has a different name.

StuntHacks
  • 427
  • 4
  • 15