0

Есть обычная вот такая разметка. Текст в заголовке h1 должен заменяться по клику по нему. НО как можно заметить по открытию кода в браузере, заголовок меняется еще до клика по нему. Почему так? Но при этом если присвоить событию text.onclick функцию change() сразу, то всё работает.. И я никак не могу понять почему?
П.С если событие добавить прямо в атрибут к заголовку то опять же всё работает.
П.П.С глубоко извиняюсь за такое плохое оформление вопроса, мой первый уж.

<div>
    <!-- изменяемый заголовок  -->
    <h1 id="info">just a string</h1>
<script>
    var text = document.getElementById('info');
// функция для замены
function change() {
    text.innerHTML = 'the string was changed';
    return false;
};
text.onclick = change();
</script>
</div>

  <!-- Второй вариант при котором всё прекрасно работает  -->
<div>
    <!-- на этот раз заголовок с другим id чтобы ошибок не было -->
    <h1 id="info2">just a string</h1>
<script>
    var text = document.getElementById('info2');
// тут событие и функция связываются
text.onclick = function change() {
    text.innerHTML = 'the string was changed';
    return false;
};

</script>
</div>

1 ответ 1

1

Проблема в том, что в первом случае Вы сразу же вызываете функцию change(), поэтому текст меняется до клика. Чтобы этого не происходило, пишите change без скобок:

<div>
    <!-- изменяемый заголовок  -->
    <h1 id="info">just a string</h1>
<script>
    var text = document.getElementById('info');
// функция для замены
function change() {
    text.innerHTML = 'the string was changed';
    return false;
};
text.onclick = change; //вот здесь не должно быть вызова функции
</script>
</div>

2
  • что если функция с параметрами? что тогда? ` function change( arg ) { arg.innerHTML = 'the string was changed'; return false; }; text.onclick = change ;` 3 мая 2020 в 10:45
  • @ШахаСадинов, тогда используйте анонимную функцию, которая будет вызываться по клику и внутри которой уже будет вызов change: text.onclick = function() { change(arg) } 3 мая 2020 в 12:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.