Как очистить вход с помощью JavaScript?

Question

У меня есть 3 ввода:

<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">

Мне бы хотелось, чтобы при нажатии на текст3 он стирал текст1.Я сделал функцию, но она не работает:

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

Answer 1

Правильный способ сделать это - назначить слушателю события элемент, внутри которого вы можете вызвать свою функцию

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">

Обязательно выбирайте свои элементы с помощью методов DOM, таких как querySelector, getElement(s)By... и так далее. Никогда не полагайтесь на доступ к элементу по его глобальному идентификатору, так как он может сломаться в зависимости от используемого браузера. (Хотя document.text1.value = ""; никогда не сработает ..)

Answer 2

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">

Answer 3

Вы можете сделать это очень легко, используя 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">