Top.Mail.Ru
\n \n \nJavaScript: \nJavaScript \nconst likeButton = document.getElementById('likeButton'); \nconst likeCount = document.getElementById('likeCount'); \nlet count = 0; \nlikeButton.addEventListener('click', () => { \n count++; \n likeCount.textContent = count; \n}); \nОбъяснение: \n1. HTML: \no Создаем кнопку \"Нравится\" с id=\"likeButton\". \no Создаем div с id=\"likeCount\" для отображения количества лайков. \no Подключаем script.js. \n2. JavaScript: \no Получаем ссылки на элементы кнопки и счетчика лайков. \no Инициализируем переменную count для хранения количества лайков. \no Добавляем обработчик события click к кнопке. \no Внутри обработчика: \n Увеличиваем count на 1. \n Обновляем текст likeCount, отображая новое значение count. \nДополнительно: \n• Стиль: Добавьте CSS, чтобы сделать кнопку и счетчик лайков visually appealing. \n• Хранение данных: Для постоянного хранения количества лайков можно использовать Local Storage или серверное хранилище. \n• Визуальные эффекты: Добавьте анимацию или другие визуальные эффекты при нажатии кнопки. \nПример с использованием Local Storage: \nJavaScript \nconst likeButton = document.getElementById('likeButton'); \nconst likeCount = document.getElementById('likeCount'); \nlet count = 0; \nloadLikeCount(); \nlikeButton.addEventListener('click', () => { \n count++; \n likeCount.textContent = count; \n saveLikeCount(); \n}); \nfunction loadLikeCount() { \n const storedCount = localStorage.getItem('likeCount'); \n if (storedCount) { \n count = parseInt(storedCount); \n likeCount.textContent = count; \n } \n} \nfunction saveLikeCount() { \n localStorage.setItem('likeCount', count); \n} \nВ этом примере: \n• loadLikeCount() загружает количество лайков из Local Storage при загрузке страницы. \n• saveLikeCount() сохраняет количество лайков в Local Storage после каждого нажатия кнопки.","dateCreated":"2024-07-04T18:16:03+03:00","datePublished":"2024-07-04T18:16:03+03:00","upvoteCount":0,"author":{"@type":"Person","name":"inspektor_zhopidy","url":"https://otvet.mail.ru/profile/inspektor_zhopidy"},"url":""},"suggestedAnswer":[{"@type":"Answer","text":"\"при нажатие которой в отдельном
появляется ЕДИНИЦА\"\n\"при нажатие во второй раз число опять встаёт на ОДИН\"\nТо есть, кнопка не делает ничего?","dateCreated":"2024-07-04T20:23:33+03:00","datePublished":"2024-07-04T20:23:33+03:00","upvoteCount":0,"author":{"@type":"Person","name":"pavel_10909","url":"https://otvet.mail.ru/profile/pavel_10909"},"url":""},{"@type":"Answer","text":"А нейросети для кого придумали?","dateCreated":"2024-07-04T18:16:16+03:00","datePublished":"2024-07-04T18:16:16+03:00","upvoteCount":-1,"author":{"@type":"Person","name":"daniel_yurgin","url":"https://otvet.mail.ru/profile/daniel_yurgin"},"url":""}]}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@type":"WebPage","@id":"https://otvet.mail.ru/space/programming/","name":"Программирование"}},{"@type":"ListItem","position":2,"item":{"@type":"WebPage","name":"Как создать функцую в JavaScript. Like Button."}}]}]}
Ответы
Аватар пользователя
Аватар пользователя
Аватар пользователя
Аватар пользователя
Программирование
+3

Как создать функцую в JavaScript. Like Button.

Здравствуйте. Помогите пожалуйста создать функцию JavaScript . кнопку при нажатие которой в отдельном <div> появяется единица, при нажатие во второй раз число опять встаёт на один. спасибо заранее.

По дате
По рейтингу
Аватар пользователя
Просветленный

"при нажатие которой в отдельном <div> появляется ЕДИНИЦА"
"при нажатие во второй раз число опять встаёт на ОДИН"

То есть, кнопка не делает ничего?

Аватар пользователя
Оракул

Создание функции JavaScript для кнопки "лайк"
HTML:
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Кнопка лайк</title>
</head>
<body>
<button id="likeButton">Нравится</button>
<div id="likeCount">0</div>

<script src="script.js"></script>
</body>
</html>
JavaScript:
JavaScript
const likeButton = document.getElementById('likeButton');
const likeCount = document.getElementById('likeCount');
let count = 0;

likeButton.addEventListener('click', () => {
count++;
likeCount.textContent = count;
});
Объяснение:
1. HTML:
o Создаем кнопку "Нравится" с id="likeButton".
o Создаем div с id="likeCount" для отображения количества лайков.
o Подключаем script.js.
2. JavaScript:
o Получаем ссылки на элементы кнопки и счетчика лайков.
o Инициализируем переменную count для хранения количества лайков.
o Добавляем обработчик события click к кнопке.
o Внутри обработчика:
 Увеличиваем count на 1.
 Обновляем текст likeCount, отображая новое значение count.
Дополнительно:
• Стиль: Добавьте CSS, чтобы сделать кнопку и счетчик лайков visually appealing.
• Хранение данных: Для постоянного хранения количества лайков можно использовать Local Storage или серверное хранилище.
• Визуальные эффекты: Добавьте анимацию или другие визуальные эффекты при нажатии кнопки.
Пример с использованием Local Storage:
JavaScript
const likeButton = document.getElementById('likeButton');
const likeCount = document.getElementById('likeCount');
let count = 0;

loadLikeCount();

likeButton.addEventListener('click', () => {
count++;
likeCount.textContent = count;
saveLikeCount();
});

function loadLikeCount() {
const storedCount = localStorage.getItem('likeCount');
if (storedCount) {
count = parseInt(storedCount);
likeCount.textContent = count;
}
}

function saveLikeCount() {
localStorage.setItem('likeCount', count);
}
В этом примере:
• loadLikeCount() загружает количество лайков из Local Storage при загрузке страницы.
• saveLikeCount() сохраняет количество лайков в Local Storage после каждого нажатия кнопки.

Аватар пользователя
Знаток

А нейросети для кого придумали?