Не могу очистить innerHTML

Я новичок в программировании и пытаюсь сделать калькулятор с помощью html и js. Я хочу, чтобы калькулятор выглядел как реальный калькулятор, поэтому, когда я нажимаю кнопку с цифрой, число отображается в блоке. Я сделал эту функцию, но я не могу очистить число, отображаемое на блоке, нажав кнопку «AC». Что я должен изменить, чтобы функция очистки работала.

часть html-кода

<tr><td colspan = "5" id = "result" height = "40"></td></tr>

<tr>
    <td id = "seven" class = "number" onclick = "output()">7</td>
    <td id = "eight" class = "number" onclick = "output()">8</td>
    <td id = "nine" class = "number" onclick = "output()">9</td>
    <td id = "C" >C</td>
    <td id = "AC" onclick = "clear()">AC</td>
</tr>

js-код

let result = document.getElementById("result");

function output() {
    result.innerHTML =  result.innerHTML + event.target.innerHTML;
 };  

function clear() {
    result.innerHTML = "";
 };

Я попробовал функцию очистки, чтобы очистить innerhtml, но это не сработало. Должен ли я изменить код или есть проблема с функцией вывода. Как использовать функцию очистки для очистки отображаемого вывода.

Фрагмент стека

let result = document.getElementById("result");

function output() {
    result.innerHTML =  result.innerHTML + event.target.innerHTML;
 };  

function clear() {
    result.innerHTML = "";
 };
<table>
<tr><td colspan = "5" id = "result" height = "40"></td></tr>

<tr>
    <td id = "seven" class = "number" onclick = "output()">7</td>
    <td id = "eight" class = "number" onclick = "output()">8</td>
    <td id = "nine" class = "number" onclick = "output()">9</td>
    <td id = "C" >C</td>
    <td id = "AC" onclick = "clear()">AC</td>
</tr>
</table>

Вы должны использовать более конкретные теги HTML, такие как input , button и т. д. И вам не следует сильно полагаться на таблицы для целей макета, вместо этого вы можете изучить CSS для стилизации макета вашей веб-страницы.

ShivCK 02.04.2022 13:27
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
1
68
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Это одна из нескольких причин, по которым нет использует обработчики событий в стиле onxyz-атрибутов. Они могут вызывать только глобальные функции, а глобальное пространство имен очень переполнено и подвержено конфликтам имен. Они также работают в сложной области, которая включает не только глобальную среду, но также все свойства и методы элемента, на котором находится атрибут onxyz, и всех его родительских элементов. Вот что происходит с вами: вы сталкиваетесь с ситуацией, когда clear существует в этой специальной области, потому что она существует в элементе или его родителях. (В частности, он включен HTMLDocument; смотрите ответ внизу.)

Вместо этого используйте addEventListener. Он позволяет вам использовать неглобальные значения и надежно прикрепляет точную функцию, которую вы ему даете. Например, чтобы сделать это с минимальными изменениями того, что у вас есть:

let result = document.getElementById("result");
for (const id of ["seven", "eight", "nine"]) {
    document.getElementById(id).addEventListener("click", output);
}
document.getElementById("AC").addEventListener("click", clear);

function output() {
    result.innerHTML =  result.innerHTML + event.target.innerHTML;
} // <== Side note: No `;` here, this is a function *declration*

function clear() {
    result.innerHTML = "";
} // <== Same

Живой пример:

let result = document.getElementById("result");
for (const id of ["seven", "eight", "nine"]) {
    document.getElementById(id).addEventListener("click", output);
}
document.getElementById("AC").addEventListener("click", clear);

function output() {
    result.innerHTML =  result.innerHTML + event.target.innerHTML;
}

function clear() {
    result.innerHTML = "";
}
<table>
<tr><td colspan = "5" id = "result" height = "40"></td></tr>

<tr>
    <td id = "seven" class = "number">7</td>
    <td id = "eight" class = "number">8</td>
    <td id = "nine" class = "number">9</td>
    <td id = "C" >C</td>
    <td id = "AC">AC</td>
</tr>
</table>

(В современном кодировании у вас, вероятно, было бы это в модуль, а не в скрипте, чтобы он не был в глобальной области.)

Но, в идеале нам не нужно было бы давать каждому элементу такой id и ссылаться на них конкретно. Мы могли бы, например, использовать класс number, который у вас есть для цифр:

for (const element of document.querySelectorAll(".number")) {
    element.addEventListener("click", output);
}
document.getElementById("AC").addEventListener("click", clear);

Живой пример:

let result = document.getElementById("result");
for (const element of document.querySelectorAll(".number")) {
    element.addEventListener("click", output);
}
document.getElementById("AC").addEventListener("click", clear);

function output() {
    result.innerHTML =  result.innerHTML + event.target.innerHTML;
}

function clear() {
    result.innerHTML = "";
}
<table>
<tr><td colspan = "5" id = "result" height = "40"></td></tr>

<tr>
    <td class = "number">7</td>
    <td class = "number">8</td>
    <td class = "number">9</td>
    <td id = "C" >C</td>
    <td id = "AC">AC</td>
</tr>
</table>

Так откуда взялся clear? Это включено HTMLDocument. Ваш код работает в содержимом, которое выглядит так (могут быть и другие слои):

with (document) {
    with (/* the `html` element*/) {
        with (/* the `body` element*/) {
            with (/* the `table` element for your table*/) {
                with (/* the [implied] `tbody` element for your table*/) {
                    with (/* the `tr` element for your table row*/) {
                        with (/* the `td` element for your AC cell*/) {
                            clear(); // <== Your code
                        }
                    }
                }
            }
        }
    }
}

Таким образом, clear находится в HTMLDocument, используя это вместо clear, которое вы объявили в глобальной области видимости.

Отсутствие ясности относительно того, где используется clear, также является основной причиной, по которой with заявление фактически устарел. (Например, это запрещено в строгом режиме, и весь новый код должен быть написан с использованием строгого режима.) :-)

Просто измените ясное имя функции, которое будет работать

let result = document.getElementById("result");

function output() {
   result.innerHTML =  result.innerHTML + event.target.innerHTML;
}

function clearResult() {
  document.getElementById("result").innerHTML = "";
}

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

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

let result = document.getElementById("result");

function calcOutput() {
    result.innerHTML =  result.innerHTML + event.target.innerHTML;
 };  

function calcClear() {
    result.innerHTML = "";
 };
 
 // For Second Example
const calculator = {
  output : () => {
      result.innerHTML =  result.innerHTML + event.target.innerHTML;
   },
  clear : () => {
      result.innerHTML = "";
   }
};
<!-- First Example -->
<table>
  <tbody>
    <tr><td colspan = "5" id = "result" height = "40"></td></tr>
    <tr>
        <td id = "seven" class = "number" onclick = "calcOutput()">7</td>
        <td id = "eight" class = "number" onclick = "calcOutput()">8</td>
        <td id = "nine" class = "number" onclick = "calcOutput()">9</td>
        <td id = "C" >C</td>
        <td id = "AC" onclick = "calcClear()">AC</td>
    </tr>
  </tbody>
</table>


<!-- Second Example -->
<table>
  <tbody>
    <tr><td colspan = "5" id = "result2nd" height = "40"></td></tr>
    <tr>
        <td id = "seven2nd" class = "number" onclick = "calculator.output()">7</td>
        <td id = "eight2nd" class = "number" onclick = "calculator.output()">8</td>
        <td id = "nine2nd" class = "number" onclick = "calculator.output()">9</td>
        <td id = "C2nd" >C</td>
        <td id = "AC2nd" onclick = "calculator.clear()">AC</td>
    </tr>
  </tbody>
</table>

Поскольку вы используете встроенный обработчик событий, ваша глобальная функция window.clear затенена устаревшей document.clear. В обработчике событий в качестве HTML-атрибута объект Document находится в цепочке областей перед объектом Window. Вы можете проверить это, запустив console.info(clear === document.clear); в своем фрагменте.

Вы должны попытаться создать область своего приложения с помощью IIFE, а затем использовать Event Listener для правильного обратного вызова для каждого события.

Другие вопросы по теме

Стиль формы в Sketch из CSS
Моя нижняя граница не отображается при ширине экрана <700 пикселей. Как добавить пространство между нижней частью страницы и нижней границей?
Почему мои элементы двигаются при изменении положения с фиксированного на статическое?
Удаление последней части вертикальной линии границы в случае списка
Как я могу увеличить div, чтобы он соответствовал его содержимому, до максимального размера родительского контейнера?
Проблема с получением имени исполнителя с сайта Billboard Top 100 с использованием красивого супа
Почему заполнение желоба не отображается в одном из блоков контента моей веб-страницы Bootstrap и как это исправить?
Как ограничить количество выбранных в пользовательском меню выбора в javascript?
Th и td с цветом фона и цветом текста, не меняющим цвет фона при наведении?
Отправка контактной страницы формы