Заставьте счетчик кликов и индикатор выполнения работать рука об руку ⇐ CSS

[Anonymous]

У меня есть счетчик кликов, который по какой-то причине, что бы я ни делал, я не могу заставить его считать клики. Я также хотел бы, чтобы индикатор выполнения фиксировал его значение по количеству нажатий на кнопку. (Разумеется, я хочу иметь возможность нажать кнопку «Подписаться» на другой странице, и на странице информации об учетной записи появится счетчик «Вы увидите это красным». ).
Насколько я понимаю, если он вызывается из скрипта, не имеет значения, на какой странице находится кнопка, он все равно должен иметь возможность получить информацию и применить счетчик к достижению. .
может кто-нибудь взглянуть для меня.
(Я понимаю, что прошу довольно многого о контексте. Я не программист, мне потребовалось много времени, чтобы достичь того, что у меня есть, за то немногое свободное время, которое у меня есть, я изначально я начал создавать свой сайт вместе с другом, и он учил меня, прежде чем покинуть проект)
Возможно, это будет лучше понять, если вы посмотрите на мой код:
https://codepen.io/Elixble/pen/gbYXBjR
Резюме: индикатор выполнения работает, ему просто нужно получить данные со счетчика, но счетчик этого не делает. работа
HMTL




Follow



Level 1

The Starter
0
Follow /5 Other User





Level 2

Gains
Gain 0/10 Followers

Level 3

Connect
Connect Accounts




CSS
.achievements-levels-Container
{
position:absolute;
display: grid;
height:300px;
width: 425px;
padding: 10px;
margin-bottom: 10px;
border-radius: 10px;
background-color: #1616167c;
white-space: pre;
overflow-wrap: normal;
overflow-x: hidden;
overflow-y: auto;
left: 615px;
Top: 30px;
align-content: center;
}

.subtitle
{
position: relative;
display: grid;
left: 15px;
top:35px;
}

.number-one
{
Margin-top: 30px;
display: grid;
font-family:Montserrat;
font-size: 18px;
color: #c2c2c2;
font-weight: bold;
margin-bottom: 10px;
}

.number-Two
{
display: grid;
font-family:Montserrat;
font-size: 18px;
color: #c2c2c29f;
font-weight: bold;
margin-bottom: 10px;
}

.number-Three
{
display: grid;
font-family:Montserrat;
font-size: 18px;
color: #c2c2c29f;
font-weight: bold;
margin-bottom: 10px;
}

.tasks-text
{
position:relative;
display: grid;
font-family:Montserrat;
font-size: 18px;
color: #c2c2c29f;
font-weight: none;
text-align: center;
bottom:4px;

}

.achievement-the-starter
{
position:relative;
display: grid;
resize: none;
height:60px;
width: 384px;
padding: 10px;
margin-bottom: 10px;
border-radius: 10px;
background-color: #161616a6;
white-space: pre;
overflow-wrap: normal;
overflow-x: hidden;
overflow-y: hidden;
left: 10px;
top: 40px;
}

.thestartertext
{
display: grid;
font-family:Montserrat;
font-size: 20px;
color: #b92525;
text-align: center;
}

.achievement-gains
{

position:relative;
display: grid;
resize: none;
height:60px;
width: 385px;
padding: 10px;
margin-bottom: 10px;
border-radius: 10px;
background-color: #161616a6;
white-space: pre;
overflow-wrap: normal;
overflow-x: auto;
overflow-y: auto;
left: 10px;
top: 40px;
}

.thegains
{
display: grid;
font-family:Montserrat;
font-size: 20px;
color: #9b2a2a;
text-align: center;
}

.achievement-connect
{

position:relative;
display: grid;
resize: none;
height:60px;
width: 385px;
padding: 10px;
margin-bottom: 50px;
border-radius: 10px;
background-color: #161616a6;
white-space: pre;
overflow-wrap: normal;
overflow-x: auto;
overflow-y: auto;
left: 10px;
top: 40px;
}

.connect
{
display: grid;
font-family:Montserrat;
font-size: 20px;
color: #9b2a2a;
text-align: center;
}

.progress
{
position:absolute ;
display:grid;
width:410px;
height:15px;
background: #9b2a2a62;
border-radius: 40px;
overflow: hidden;
bottom:-8px;
}

.progress__fill
{
width: 20%;
height: 100%;
background: #9b2a2a;
transition: all, 1s;
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
scrollbar-width: auto;
scrollbar-color: #9b2a2a00 #40404000;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
width: 16px;
}

*::-webkit-scrollbar-track {
background: #40404000;
}

*::-webkit-scrollbar-thumb {
background-color: #9b2d2d;
border-radius: 10px;
border: 3px none #ffffff00;
}

#follow-button
{
position:relative;
width:75px;
height:30px;
margin-right:6px;
line-height:0px;
outline:none;
}

body {
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-image: url("");
position: absolute;
margin: auto;
}

#clicks
{
position:absolute;
display: grid;
font-family:Montserrat;
font-size:18px;
color: #9d2a2a;
font-weight: bold;
text-align: center;
top:25px;
left:176px;

}

JS
function updateProgressBar(progressBar, value) {
value = Math.round(value);
progressBar.querySlector(".progress__fill").style.width = `${value}%`;
}

Var clicks = 0
function clickCounter(){
clicks += 1
.document.getElementById.("clicks").innerHTML = clicks + "clicks"}


Подробнее здесь: https://stackoverflow.com/questions/793 ... nd-in-hand