JavaScript ondblclick无法正常工作

Question

I'm trying to have a text entry box (and only the one single text input) be cleared when double clicked.

Here's the HTML

</div>
<div class="form-group">
<label for="green" class="control-label green col-md-2">Green:</label>
<div class="col-md-2">
<input type="text" id="green" ondblclick="Clear();" class="form-control"/>
</div>

And the JavaScript

    function Clear()
    {    
    this.value="";
    }

It doesn't seem to be working, does anyone know what is wrong?

Answer 1

this wont work in this case as it is refering to window object instead use docuement.getElementById .

 function Clear() { document.getElementById('green').value=""; console.log(this); // this..value=""; } 

 </div> <div class="form-group"> <label for="green" class="control-label green col-md-2">Green:</label> <div class="col-md-2"> <input type="text" id="green" ondblclick="Clear();" class="form-control"/> </div> 

or you can pass element to Clear function like following:

 function Clear(element) { element.value = ""; } 

 </div> <div class="form-group"> <label for="green" class="control-label green col-md-2">Green:</label> <div class="col-md-2"> <input type="text" id="green" ondblclick="Clear(this);" class="form-control"/> </div> 

Answer 2

You can use the below code.

HTML

<div class="form-group">
<label for="green" class="control-label green col-md-2">Green:</label>
<div class="col-md-2">
  <input type="text" id="green" ondblclick="Clear(this);" class="form-control" />
</div>
</div>

JS

function Clear(x) {
  x.value = "";
}

Hope this helps you.

Answer 3

try this:

function Clear() {    
    var _green = document.getElementById(this.event.target.id);
    _green.value="";
}

In the above code, we have detect the ID of the called function with this.event.target.id . After getting the ID, grab the DOM element with document.getElementById() and set the value blank.

Answer 4

You need to pass this to the function as a parameter:

  function Clear(that) { that.value = ""; } 

 <div class="form-group"> <label for="green" class="control-label green col-md-2">Green:</label> <div class="col-md-2"> <input type="text" id="green" ondblclick="Clear(this);" class="form-control" /> </div> </div> 

Answer 5

In order to make this work without changing anything inside your function you could bind the element like so:

... ondblclick="Clear.call(this);" ...

Inside Clear() you will reference the element using this .

Bonus

You could also pass in the event like so:

... ondblclick="Clear.call(this, event);" ...

Then, your function would look like this:

function Clear(event)
{
   // ...
}

Alternatively

You could also register the event handler separately:

document.getElementById('green').addEventListener('dblclick', Clear);