Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Make Click Counter and Progress Bar work hand in hand

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

2

Answers


  1. 0

    your code pen is incomplete, are you using php ? jquery ? right now it just return that : .document.getElementById.("clicks").innerHTML = clicks + "clicks"
    is an invalid method call

    Login or Signup to reply.
  2. 0

    You spelled var wrong (it is not capitalized). You have two stray .’s (dot’s) in your line to set the .innerHTML

    Change your js to be:

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

    As far as making number of clicks available on another web page, you will need to look into using localStorage.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search