Sorgen Sie dafür, dass Klickzähler und Fortschrittsbalken Hand in Hand arbeiten ⇐ JavaScript

[Guest]

Ich habe einen Klickzähler, den ich aus irgendeinem Grund, egal was ich tue, nicht dazu bringen kann, jeden Klick zu zählen. Außerdem möchte ich, dass der Fortschrittsbalken seinen Wert anhand der Anzahl der Klicks auf die Schaltfläche erfasst. (Zugegeben, ich möchte in der Lage sein, auf einer anderen Seite auf die Schaltfläche „Folgen“ zu klicken und den Zähler „Sie werden dies in ROT sehen“ auf der Kontoinformationsseite anzuzeigen ).
Mein Verständnis ist, dass, wenn es vom Skript aufgerufen wird, es egal ist, auf welcher Seite sich die Schaltfläche befindet, es trotzdem in der Lage sein sollte, die Informationen abzurufen und die Zählung auf den Erfolg anzuwenden .
Könnten einige bitte einen Blick darauf werfen? Ich.
(Ich verstehe, dass ich hier ziemlich viel nach dem Kontext frage. Ich bin kein Programmierer, es hat viel gekostet, um in der wenigen Freizeit, die ich habe, das zu erreichen, was ich ursprünglich habe Ich habe mit einem Freund angefangen, meine Website zu erstellen, und er hat es mir beigebracht, bevor er das Projekt verlassen hat)
Das ist vielleicht besser zu verstehen, wenn Sie sich meinen Codepen ansehen:
https://codepen.io/Elixble/pen/gbYXBjR
Zusammenfassung: Der Fortschrittsbalken funktioniert, es müssen nur Daten vom Zähler abgerufen werden, der Zähler funktioniert jedoch nicht Arbeit
HMTL

Code: Select all

Follow



Level 1

The Starter
0
Follow    /5 Other User





Level 2

Gains
Gain 0/10 Followers

Level 3

Connect
Connect Accounts

CSS

Code: Select all

.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("https://i.postimg.cc/q78KTSXn/Dark-Mode-Background.png");
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

Code: Select all

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"}