Скрипт на JS для информации о донате

Christ · 26 Дек 2023

Привет, всем!
Наверное, многие видели на самп-сайтах такой скрипт, который автоматически выводит информацию о том - сколько Вы задонатите и сколько Вы получите, сегодня я решил объяснить, как добавить эту функцию на свой сайт! Сначала нам, нужен сам HTML файл (каркас сайта)
У меня это будет стандарт, без всяких CSS-дополнений (советую вам тоже так начать, а потом пытаться подключить скрипт к своему сайту):


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Скрипт на JS для информации о донате</title>
</head>
<body>
</body>
</html>

Все, база для скрипта у нас есть, теперь в папке с HTML файлом создаем JS файл, название можете поставить любое, я же поставлю "script.js"
Теперь надо подключить сам JS файл к нашему HTML файлу, для это в теге "<head>" в самом конце пишем следующее:
<script type="text/javascript" src="script.js"></script>
Вместо "script.js" - пишем название вашего файла, который мы создавали в папке с HTML
Теперь нам надо проверить правильность подключения JS файла, для этого пишем элементарный код:
console.log("JS файл успешно подключен!")

Сохраняем и открываем HTML файл в браузере, затем открываем консоль через CNTRL+SHIFT+i
Если вывелся текст "JS файл успешно подключен!", значит мы все сделали правильно, если нет - значит ты идиот, не можешь элементарно копировать текст)

Теперь начинаем писать скрипт, в HTML файле, в теге "<body>" создаем input:
<input type="number" name="jsScript" id="donateSum">

Мы создали inpute с типом для чисел, так как туда пользователь будет вводить число (количество доната), name можете оставить пустым, он нам не пригодится, нам нужен id, туда мы пишем id нашего input, можете придумать какое хотите, главное он не должен повторяться, то есть 1 id для 1 тега:

И также создаем в <body> тег <h2>, для вывода информации:

<h2>Вы получите: <h2 id="donateAdd">0</h2></h2>

И все, пока HTML файл мы не трогаем, в конце концов, у вас должно получится так:


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Скрипт на JS для информации о донате</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <input type="utf-8" name="jsScript" id="donateSum">
    <h2>Вы получите: <h2 id="donateAdd">0</h2></h2>
</body>
</html>

Теперь открываем JS файл, удаляем все, что мы писали в нем до этого, и создаем функцию, через function:


function donateInfo(el) {
    //Тело функции
}

Вместо "donateInfo" пишем свое название, без пробелом и спец знаков, между {} - находится тело фунции, там мы пропишем все действия, переменные, циклы и тд.
Прописываем там перемнуюю donateSum:
let donateSum

И после пишем:
donateSum = document.getElementById('donateSum')

Вместо "donateSum" id вашего input, далее создаем переменную "donateX", и даем ей значение 2, то есть при пополнение, сумма будет удваиваться (X2 АКЦИЯ):


    let donateX
    donateX = 2

Создаем переменную "donateAdd", в нее мы заложим сумму, умноженную на "donateX" :


    let donateAdd
    donateAdd = donateSum.value * donateX

Потом нам надо вывести сумму которую получить игрок, то есть переменную "donateAdd":
document.getElementById('donateAdd').innerHTML = donateAdd

Сохраняем файл и проверяем, Все корректно работает!
Если возникли проблемы - vk.com/ebaniysamper
Сразу говорю, не советую писать так код, я просто хотел разъяснить вам, как, что работает!

JS файл:


function donateInfo(el) {
    let donateSum
    donateSum = document.getElementById('donateSum')
    let donateX
    donateX = 2
    let donateAdd
    donateAdd = donateSum.value * donateX
    document.getElementById('donateAdd').innerHTML = donateAdd
}

LIVE SAMP

Скрипт на JS для информации о донате

Добро пожаловать!

Christ