点击计数器与进度条联动功能故障排查请求

大家好，想请各位帮忙看看我网站上的一个小问题，折腾好久都没搞定😭。

我做了一个点击计数器，但不管怎么点击“关注”按钮，计数器都不增加；另外还有个进度条，它本身是能正常工作的，但需要从这个计数器获取数值来更新进度。而且我还希望实现跨页面的联动：在其他页面点击“关注”按钮时，账户信息页面里那个红色显示的计数器（就是标注了“你会看到红色的这个”的部分）也能跟着计数。

我本身不是专业程序员，之前是和朋友一起做这个项目，他教了我一些基础，但后来他离开了，我只能挤很少的空闲时间慢慢摸索，能做到现在这样已经花了好多精力了。

先给大家总结下核心问题：

进度条功能正常，但需要从计数器获取数据来更新；计数器完全不响应点击，数值不增加。

下面是我目前的代码：

HTML #

<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>
</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;
  
}

JavaScript #

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

麻烦各位帮忙看看，到底哪里出问题了？怎么才能让计数器正常工作，并且让进度条能获取到计数器的数值来更新进度呢？另外跨页面的计数同步要怎么实现呀？

备注：内容来源于stack exchange，提问作者Eliable