I have a Click counter that for some reason no matter what I do I am unable to get it to count on click, I would also like the progress bar to grab it’s value by the amount the button has been click. (Granted I am wanting to be able to click the follow button on a different page and have the counter “You Will See This In RED” go up in the account info page).
My understanding is that if it is called from script it doesn’t matter what page the button is on it should still be able to retrieve the information and apply the count to the achievement.
would some please be able to take a look for me.
(I understand I’m here asking quite a bit for context I’m not a coder it’s taken alot to achieve what I have in what little spare time I have, I originally started building my site with a friend and he was teaching me before leaving the project)
This may be better to understand if you are to look at my codepen:
https://codepen.io/Elixble/pen/gbYXBjR
Summary: The Progress Bar works it just needs to grab data from the counter but the counter doesn’t work
HMTL
<body id="Background">
<div id="SettingsBox">
<div>
<button id="follow-button" class="main-button" userFollowed="$profile->username" onclick ="clickCounter()"><span>Follow</span></button>
<div class=achievements-levels-Container>
<div class=subtitle>
<text class=number-one>Level 1</text>
</div>
<div class=achievement-the-starter>
<text class=thestartertext>The Starter</text>
<h1 id="clicks">0</h1>
<text class=tasks-text>Follow /5 Other User</text>
<div class="progress">
<div class="progress__fill"></div>
</div>
</div>
<div class=subtitle>
<text class=number-Two>Level 2</text>
</div>
<div class=achievement-gains>
<text class=thegains>Gains</text>
<text class=tasks-text>Gain 0/10 Followers</text>
</div>
<div class=subtitle>
<text class=number-Three>Level 3</text>
</div>
<div class=achievement-connect>
<text class=thegains>Connect</text>
<text class=tasks-text>Connect Accounts</text>
</div>
</div>
</body>
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("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
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"}