Variable entry - Best Practices

So - I'm working on a new interactive for yet another education project on the nutrient cycle which essentially uses Hype to recreate the attached Excel document. Kids will enter the variables in blue (Any number) and it calculates in the background spitting back what's in the red.

I've started with a very basic version also attached here in Hype format. The idea being once I've figured out the entry and storage of the variables, the math part is relatively easy.

In searching the forums, I found a couple of examples that I understand on the surface, though I haven't gotten the code snippets to perform correctly yet.

How do I let someone enter text in a running Hype document? (Did I do it wrong here?)

How would I then store the numbers in those boxes as variables that I could call to do the math?

(Any hints are appreciated!)

NutrientCycleEarlyDraft.zip (55.6 KB)

You're doing it overall correctly, but note that JavaScript is case-sensitive. Specifically getElementByID and innerhtml are incorrectly capitalized. Your code should be:

var x = hypeDocument.getElementById('startSoil').innerHTML;
var y = hypeDocument.getElementById('startBiomass').innerHTML;	
var z = hypeDocument.getElementById('startLitter').innerHTML;

var total = x*y*z;

answerOne.innerHTML = total;

Then this will work!

When things don't work as you expect, I recommend looking at the developer console log in the browser - this can often give clues to the issue. (Sadly due to the dynamic nature of JavaScript, it won't always pinpoint or even report problems though...)

4 Likes

Did you hear the sound of skin hitting skin as I facepalmed myself in my office from wherever in the world you are right now?

Because this whole afternoon I was questioning the little I knew about programming because what I thought would work wasn't working

And here I was, forgetting the case sensitivity.

2 Likes

The good news is that all the rest of the logic/dataflow is correct - which is the "hard" part of programming :slight_smile:. Getting the syntax right is just tedious and often unintuitive... I personally still will sometimes type getElementByID myself, even!

1 Like

Hype Reactive Content makes excel table like behavior also really easy:

1 Like