HTML Need some help about javascript and bar

[OldSailor]

Before opening this thread, I spent hours trying to solve the problem on my own, but I'm exhausted.

I am designing an HTML based game and I have a rank progression bar. When the bar reaches enough $rankpoint value, it resets and it works fine until here.

The problem is that I can't set the $rankpoint variable. When I made the bar, I set the $rankpoint variable via JavaScirpt (let rankpoint = 0) and now I can't increase or decrease this variable with the <<set>> macro, in short, I can't interfere with the variable. What I don't understand is that $rankpoint is defined as 0 in StoryInit.

Example:
When I write <<set $rankpoint to $rankpoint +10>> at the beginning of the "patrol" passage, $rankpoint does not change, but when I change $rankpoint to other variables like $energy and $health, it works fine.

I have no javascript knowledge. Do I need to increase $rankpoint via javascript, if so, how can I do this?

NOTE: I use Twine/Sugarcube

 

[Alcahest]

JavaScript variables are not the same as SugarCube variables. You are describing two different rankpoint variables, one in JavaScript and one in SugarCube, and they are unrelated to each other. To change the SugarCube variable $rankpoint from within JavaScript, you can access it with State.variables.rankpoint.

Increasing $rankpoint by 10 as you did should work. Test it by typing out the variable before and after the change. But if the value of $rankpoint is used somwhere on the page, you must update that part of the page, or the change won't be noticeable to the player until the next passage/page.

 

[guest1492]

As stated above, you declared a JavaScript variable instead of initializing a SugarCube variable. Thus <<set $rankpoint to $rankpoint +10>> is basically <<set $rankpoint to undefined + 10>> (which means the value of $rankpoint is still undefined).

 

[OldSailor]

Thank you for all your concern. When I found out that I had two different variables in Javascript and Sugarcube, I deleted all my code in Javascript. And after hours of research, I found a way to advance my bar using HTML.

I just had to put @value="$rankpoint" in <<progress>>, my god...

 

[osanaiko]

It is a learning process and all developers have to make their way step by step.

In this case the problem was an incorrect "mental model" of sugarcube games - I guess you already knew some Javascript, and assumed that an HTML game must be running in the JS environment... now you have corrected the mental model to understand that Sugarcube creates it's own runtime environment within the HTML / Javascript world...

By publicly posting your trouble and the solution, you have created one more small record of knowledge which will help other new developers in the future...

 

[OldSailor]

It is a learning process and all developers have to make their way step by step.

In this case the problem was an incorrect "mental model" of sugarcube games - I guess you already knew some Javascript, and assumed that an HTML game must be running in the JS environment... now you have corrected the mental model to understand that Sugarcube creates it's own runtime environment within the HTML / Javascript world...

By publicly posting your trouble and the solution, you have created one more small record of knowledge which will help other new developers in the future...

I solved most of the places I got stuck in my project thanks to what people like me wrote in the forums. If I can help someone who has the same problem I had, I'm happy.