How to clear an input with javascript?

Question

I have 3 inputs:

<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>

<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>

<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">

I would like that when you click in the text3, it erases the text1. I did a function but it does not work:

<script>
    function myFunction(text3) {
        document.text1.value = "";
    }   
</script>

Well, when is myFunction called?

Bergi
– Bergi

2019-04-22 16:20:00 +00:00
Commented Apr 22, 2019 at 16:20 — Bergi
– Bergi, Commented Apr 22, 2019 at 16:20

baao · Accepted Answer · 2019-04-22 16:33:11Z

2

The correct way of doing this is to assign an event listener to the element, within that you can call your function

function myFunction() {
  document.querySelector('input.text1').value = "";
}


document.querySelector('input.text3').addEventListener('focus', myFunction);

<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>

<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>

<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">

Make sure to select your elements with DOM methods like querySelector, getElement(s)By... and so on. Never rely on accessing an element by it's global id as this may break depending on used browser. (Though document.text1.value = ""; will never work..)

edited Apr 22, 2019 at 16:33

answered Apr 22, 2019 at 16:27

baao

73.5k18 gold badges152 silver badges209 bronze badges

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

Comments

Pingolin · Accepted Answer · 2019-04-22 16:27:14Z

1

var text1 = document.querySelector('.text1');
var text3 = document.querySelector('.text3');

text3.addEventListener('focus', myFunction);

function myFunction() {
  text1.value = '';
}

<label for="text1">Text 1</label>
<input type="text" class="text1" value="To clear"><br>

<label for="text2">Text 2</label>
<input type="text" class="text2" value="to select"><br>

<label for="text3">Text 3</label>
<input type="text" class="text3" value="Click in this field">

answered Apr 22, 2019 at 16:27

Pingolin

3,4677 gold badges29 silver badges43 bronze badges

Comments

DEBENDRA DHINDA · Accepted Answer · 2019-04-22 16:49:05Z

0

You can do it very easily using JQuery .

    $('.text3').on('focus', function() {
      $('.text1').val('');
    })

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>


    <label for="text1">Text 1</label>
    <input type="text" class="text1" value="To clear"><br>

    <label for="text2">Text 2</label>
    <input type="text" class="text2" value="to select"><br>

    <label for="text3">Text 3</label>
    <input type="text" class="text3" value="Click in this field">

answered Apr 22, 2019 at 16:49

DEBENDRA DHINDA

1,1937 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to clear an input with javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related