How can I change wordpress shortcode value, using JavaScript

Question

I am using Watupro plugin for simple test. In result window there are variables that display numeric test results: %%CATEGORY-POINTS-4%% , %%CATEGORY-POINTS-5%% etc.

I am using Progress Bar plugin, to display progress bar with results via shortcode. [wppb progress=%%CATEGORY-POINTS-4%%/130 option=green] gives me nice progress bar, based on student's results in each category.

However I want to display different colors of progress bar, depending on result. In order to achieve that, I want to change value of shortcode, based on numeric values.

I came up with this code so far:

HTML:

<div class="bar" data-score="%%CATEGORY-POINTS-4%%">[wppb progress=%%CATEGORY-POINTS-4%%/130 option=green]</div>

<div class="bar" data-score="%%CATEGORY-POINTS-5%%">[wppb progress=%%CATEGORY-POINTS-5%%/130 option=green]</div>

<script type="text/javascript">
results();
</script>

JavaScript:

function results() {
    var bar = document.getElementsByClass('bar');
    var score = bar.getAttribute('data-score');
    alert (score);
    if (score < 47) {
// ???
 }
    if (score > 46 && 4_score < 71) {
// ???
 }
    if (score > 70) {
// ???
 }

I guess I need to come up with code that changes shortcode attribute option to different color for each div respectively.

Any ideas?

Answer 1

Since you are using WP, you can try jQuery like this:

let score = jQuery('.bar').data('score'); // get element data-score
if (score > 46 && score < 71) { // your condition
$(".green").toggleClass('green yellow'); // changes class green to yellow
} 

Then create new CSS class yellow:

div.wppb-progress > span.yellow {
background: linear-gradient(to bottom, #ffe893 0%,#ffd644 33%,#f5c001 62%,#bd9400 100%);
}

Answer 2

Ok. I got it solved. I added loop, so, Javascript goes through all divs.

Here's the code:

<div id="watupro_quiz" class="quiz-area single-page-quiz">
  <div id="startOutput">&nbsp;</div>

<!--<script type="text/javascript" src="https://psy-help.ee/wp-content/scripts/test_results.js"></script>-->

  <div class="bar" data-score="71" data-less="47" data-more="70">
    <div class="wppb-wrapper ">
      <div class="wppb-progress fixed"><span class="yellow" style="width: 39.230769230769%;"><span></span></span></div>
    </div>
  </div>
  <div class="bar" data-score="62">
    <div class="wppb-wrapper ">
      <div class="wppb-progress fixed"><span class="yellow" style="width: 47.692307692308%;"><span></span></span></div>
    </div>
  </div>

  <!--<script type="text/javascript">
    results();-->
  </script>

</div>

div.wppb-wrapper {
    clear: both;
}

div.wppb-progress {
    height: 25px;
    width: 400px;
    background: #555;
    -moz-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
    position: relative;
}

div.wppb-progress > span.green {
    background: #83c783;
    background: -moz-linear-gradient(top, #83c783 0%, #52b152 33%, #008a00 62%, #005700 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#83c783), color-stop(33%,#52b152), color-stop(62%,#008a00), color-stop(100%,#005700));
    background: -webkit-linear-gradient(top, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
    background: -o-linear-gradient(top, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
    background: -ms-linear-gradient(top, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
    background: linear-gradient(to bottom, #83c783 0%,#52b152 33%,#008a00 62%,#005700 100%);
}

div.wppb-progress > span {
    display: block;
    height: 25px;
    -moz-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
    background: #5a84c4;
    background: -moz-linear-gradient(top, #5a84c4 0%, #1a2275 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5a84c4), color-stop(100%,#1a2275));
    background: -webkit-linear-gradient(top, #5a84c4 0%,#1a2275 100%);
    background: -o-linear-gradient(top, #5a84c4 0%,#1a2275 100%);
    background: -ms-linear-gradient(top, #5a84c4 0%,#1a2275 100%);
    background: linear-gradient(top, #5a84c4 0%,#1a2275 100%);
    -webkit-box-shadow: inset 0 2px 9px rgb(255 255 255 / 30%), inset 0 -2px 6px rgb(0 0 0 / 40%);
    -moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4);
    box-shadow: inset 0 2px 9px rgb(255 255 255 / 30%), inset 0 -2px 6px rgb(0 0 0 / 40%);
    overflow: hidden;
    position: relative;
}

let barElement = document.getElementsByClassName("bar");
for (let i = 0; i < barElement.length; i++) {
  let wrapper = barElement[i].firstElementChild;
  let bar = wrapper.firstElementChild;
  let span = bar.firstElementChild;
  let score = barElement[i].getAttribute("data-score");
  let low = barElement[i].getAttribute("data-less");
  let high = barElement[i].getAttribute("data-more");
  if (score < low) {
    span.classList.remove("yellow");
    span.classList.add("green");
  } if (score > high) {
    span.classList.remove("yellow");
    span.classList.add("red");
  }
}

Working example here: https://codepen.io/nick-gregory-the-looper/pen/wvympmg