Dynamic Sections in Datapages

[Prophecy]

How do I write the correct JavaScript to deploy dynamic sections within a datapage?
I have 3 sections containing a HTML block with different content in each.
Based on a calculated field which contains a percentage. I only want to show the relevant section and hide the others
Section 1 = % range >0 & < 33
Section 2 = % range >34 & < 66
Section 3 = % range >66 & < 100

[MayMusic]

Assign an ID to each section by adding HTML blocks before and after and under advanced tab uncheck HTML editor.

HTML Block above:

<div id="first_Section">

HTML Block below:

</div>

Then have a JS to get the value and show/hide the section. If you have the link to the page I can give you the code

[Prophecy]

https://c0dcr523.caspio.com/dp/daec7000ff004040d11246a2bb11

[Prophecy]

I have placed a HTML block above and below as recommended and I've tried this code below with no result?

if ([@field:Health_Check_Total_Score%] < 33) {<div id="Section_2"

} else if ([@field:Health_Check_Total_Score%] < 66) {<div id="Section_3"

} else {<div id="Section_4"
}

[Prophecy]

On 9/28/2019 at 5:44 AM, MayMusic said:

Assign an ID to each section by adding HTML blocks before and after and under advanced tab uncheck HTML editor.

HTML Block above:

<div id="first_Section">

HTML Block below:

</div>

Then have a JS to get the value and show/hide the section. If you have the link to the page I can give you the code

I have placed a HTML block above and below as recommended and I've tried this code below with no result?

if ([@field:Health_Check_Total_Score%] < 33) {<div id="Section_2"

} else if ([@field:Health_Check_Total_Score%] < 66) {<div id="Section_3"

} else {<div id="Section_4"
}

[Prophecy]

On 9/28/2019 at 5:44 AM, MayMusic said:

Assign an ID to each section by adding HTML blocks before and after and under advanced tab uncheck HTML editor.

HTML Block above:

<div id="first_Section">

HTML Block below:

</div>

Then have a JS to get the value and show/hide the section. If you have the link to the page I can give you the code

Hi MayMusic,

I really appreciate your assistance!  I've placed the the block above and below as advised and attempted the JS code myself with no result.

Please review my JS and let me know where I've gone wrong?

<script>

var calcField = [@field:Health_Check_Total_Score#]; 

if (calcField < 33) {
  document.getElementById('Section_2').style.display = 'block';
  document.getElementById('Section_3').style.display = 'none';
  document.getElementById('Section_4').style.display = 'none';
} elseif (calcField < 66) {
  document.getElementById('Section_2').style.display = 'none';
  document.getElementById('Section_3').style.display = 'block';
  document.getElementById('Section_4').style.display = 'none';
} elseif (calcField < 100) {
  document.getElementById('Section_2').style.display = 'none';
  document.getElementById('Section_3').style.display = 'none';
  document.getElementById('Section_4').style.display = 'block';
}
</script> 

[Vitalikssssss]

Hi @Prophecy,

First, you should use Caspio`s build-in event handlers (e.g. Datapage ready).

Second, you should change the way how you trying to reference calculated field.

You use Submission form along with Calculated Value form element as I have understood.

If my assumption is correct than you can use the following code:

<div id="Section_2" style="display:none;">

Some text Section 2

</div>
  
<div id="Section_3" style="display:none;">

Some text Section 3

</div>
  
<div id="Section_4" style="display:none;">

Some text Section 4

</div>

<-- This code goes into Datapage footer-->
  
<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {

let calcField 

setInterval( function() {
  
  calcField = document.querySelector("[id^='InsertRecordText']").innerHTML; //insert your field name i.o. Text
  
  Hide(calcField); 

}, 2000); //interval of function execution 2 sec

function Hide (calcField) {

if (calcField < 33) {

  document.getElementById('Section_2').style.display = 'block';
  document.getElementById('Section_3').style.display = 'none';
  document.getElementById('Section_4').style.display = 'none';
} else if (calcField < 66 && calcField >= 33 ) {

  document.getElementById('Section_2').style.display = 'none';
  document.getElementById('Section_3').style.display = 'block';
  document.getElementById('Section_4').style.display = 'none';

} else if (calcField < 100 && calcField >= 66) {

  document.getElementById('Section_2').style.display = 'none';
  document.getElementById('Section_3').style.display = 'none';
  document.getElementById('Section_4').style.display = 'block';

}
}       
});
</script>

Hope this helps.

Regards,

vitalikssssss