Как отобразить переменную Javascript с помощью <h1>

Согласно консоли Chrome, проблем нет, поскольку моя переменная «не определена», несмотря на то, что она установлена как «0»,

Я использовал следующие ресурсы: Ресурс 1 Ресурс 2

Я пытаюсь сделать так, чтобы когда пользователь нажимал на мое изображение, он добавлял +1 к переменной точек (Game.points), вот мой код (для целей контекста):

<!DOCTYPE html>

<script>
function Game() {
var points = "0"
document.getElementById("myText").innerHTML = Game.points;

}
</script>
<center>  <img onclick = "Game.points = Game.points + 1" src = "https://static.wikia.nocookie.net/villains/images/5/5d/Frieza.png/revision/latest?cb=20200625063534" width = "350px"> </center>
<body onload = "Game()">

    <h1>"The value for number is: " <span id = "myText"></span></h1>

javascript html

02.06.2023 11:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Переменная points не является членом объекта Game. Чтобы сослаться на него, просто используйте ключевое слово points.

Есть также несколько изменений, которые вы можете внести для улучшения качества кода:

Удалите встроенные атрибуты onclick и onload. Они устарели и не являются хорошей практикой. Используйте addEventListener() для привязки событий в JS, а не в HTML.
Установите points как числовое значение, а не строку. Таким образом, при увеличении его значения не требуется приведение типа.
Поместите любой стиль CSS в отдельную таблицу стилей, а не в HTML.

const myText = document.querySelector('#myText');
const img = document.querySelector('img');
let points = 0;

document.addEventListener('DOMContentLoaded', () => {
  updateText();
});

img.addEventListener('click', () => {
  points++;
  updateText();
});

updateText = () => {
  myText.textContent = points;
};

img {
  width: 350px;
}

<center>
  <img src = "https://static.wikia.nocookie.net/villains/images/5/5d/Frieza.png/revision/latest?cb=20200625063534" />
</center>

<h1>
  The value for number is: 
  <span id = "myText"></span>
</h1>

02.06.2023 12:07

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

Возврат данных из базы данных и отображение в календаре

Что нужно сделать, чтобы кнопка Bootstrap 5.3.0 Collapsible отображалась на этой простой веб-странице?

Как превратить весь текст на HTML-странице в одну строку, сохранив при этом CSS?

Как правильно отправить встроенное изображение base64 (HTML) по электронной почте?

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

Обновлять входные значения только в элементы JS

Как добиться доступности HTML для контента внутри теневого корня в веб-приложении React?

Различные группы флажков должны записывать данные в текстовые поля

Как изменить цвет значка, когда флажок установлен с помощью Tailwind?

Попутный ветер: родитель динамически подстраивается под рост ребенка

Как отобразить переменную Javascript с помощью <h1>

Ответы 1

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

Похожие вопросы