Reference/Print data within an Element ID into <script> code

Design help Custom code
1

Hey all! I need help with something. I’m using chart.js to get some charts into a dashboard for my students. I have text boxes with labels such as #8pt, #7pt, #6pt, etc. with numbers in those boxes. Is there a way to take those numbers from the element IDs and put it into the “data” section of the following code, preferably using variables?

<script>
  const ctx = document.getElementById('myChart');
	var eight = [ELEMENT ID CONTENT REFERENCE HERE];
	var seven = [ELEMENT ID CONTENT REFERENCE HERE];
	var six = [ELEMENT ID CONTENT REFERENCE HERE];
	var five = [ELEMENT ID CONTENT REFERENCE HERE];
	var four = [ELEMENT ID CONTENT REFERENCE HERE];
	var three = [ELEMENT ID CONTENT REFERENCE HERE];
	var two = [ELEMENT ID CONTENT REFERENCE HERE];
	var one = [ELEMENT ID CONTENT REFERENCE HERE];
  
  new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ['8+', '7', '6', '5', '4', '3', '2', '1-'],
      datasets: [{
        label: '# of Days',
        data: [eight, seven, six, five, four, three, two, one],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
</script>

Thank you!

2

Hey Maxwell,

You’ll need to share your readonly project link in order to see the element arrangement you’re using. In general if you’re trying to pull data from text boxes it’s easiest if you put ID’s, classes, or custom attributes on them to make them easily referencable.

3

@Maxwell_Mandell sounds doable.

Here’s one way of getting the values a user enters and assigning it to a variable.

In your case, you’d assign each form input to each of these:

var eight = [ELEMENT ID CONTENT REFERENCE HERE];
var seven = [ELEMENT ID CONTENT REFERENCE HERE];
var six = [ELEMENT ID CONTENT REFERENCE HERE];
var five = [ELEMENT ID CONTENT REFERENCE HERE];
var four = [ELEMENT ID CONTENT REFERENCE HERE];
var three = [ELEMENT ID CONTENT REFERENCE HERE];
var two = [ELEMENT ID CONTENT REFERENCE HERE];
var one = [ELEMENT ID CONTENT REFERENCE HERE];

Once assigned, it looks like your chart.js stuff is good to go (the data attribute).

Hope that helps!

4

Hey! Unfortunately, my website contains private student information within the CMS, so I’m not comfortable sharing a read-only link. I might copy and paste my problem into another project and share that one, once I have time (or if I don’t figure it out)

5

Thank you! The information isn’t coming from a form input, but is coming from a spreadsheet. The numbers in the spreadsheet are turned into a text value that are then assigned to that specific element ID. Here’s a snippet of the code that takes the info from the spreadsheet:
The variable “Sheet” is just the first part of the URL and the “'{{wf {"path":"gid","type":"PlainText"} }}” is a reference to a datapoint within the CMS.

<script>
var Webflow = Webflow || []; //Point Statistics Fetch
Webflow.push(function() { 
    fetch(Sheet + '{{wf {&quot;path&quot;:&quot;gid&quot;,&quot;type&quot;:&quot;PlainText&quot;\} }}&single=true&range=K12&output=csv')
        .then(function(response) { return response.text() })
        .then(value => {
            $('#7pt').text(value);
        });
});
</script>

Would this option still work?
I hope this helps explain!

6

Based on the limited amount we can see, it appears you’re just trying to pull the text content of specifically ID’s elements?

var eight = document.getElementById('8pt').innerText

However the approach you’re taking to access your sheet data is a bit concerning. If you’re pulling each value separately than you’re querying your Google Sheet Url at least 8 times per page. The APi might be a better choice for you, and you can retrieve JSON that way as well.

7

I’m not a professional web designer by any means, so any tips are very helpful! I’ll try the code you reccomended. What APi should I use, and are there any resources on how I can learn more about it?

8

You’d want to use the current Google Sheets API v4 in order to get the full range of access, and not worry about the endpoint suddenly shutting down ( Google’s shut down public URL formatting endpoints several times now without warning ).