Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

help with javascript to css to twine

StoryInit passage
<<set $myFont=["20px", "40px", "60px", "80px"]>>
<style>

  <button class="content">Fight</button>
  <button class="content">Bag</button>
  <button class="content">Pokemon</button>
  <button class="content">Run</button>

</style>

<<set $elements = document.getElementsByClassName("content")>>
<<for _x = 0; _x < $elements.length; _x++>>

<<set $elements[_x].style.fontSize=$myFont[_x]>>


<</for>>
Removing the style shows the buttons all the same size, while adding it gives an "undefined function" error.

How do I get this array to loop through the Class CSS and change each ones font size accordingly? Put it in the passageheader or before the passage loads its DOMS? or whatevers?

Comments

  • My guess is it has something to do with state variables and accessing those. Perhaps writing this getelements function
    var elements = document.getElementsByClassName("content");
    
    in <script> </script> tags. Then assign var elements to a $sugarcube/twine variable and use that for my loop?
  • edited January 2017
    Okay, I managed it with this code heavily borrowed from themadexile
    <<click "move run chance higher">>
    <<set $runchance += 10>>
    <</click>>
    <<click "move run chance lower">>
    <<set $runchance -= 10>>
    <</click>>
    
    
    <<chancebar $runchance>>
    
    
    @
    
    <<print $args[0]>>
    <</widget>>
    
    I'm close but no cigar. the button isnt changing in size.
  • edited January 2017
    @'>;>
    
    <<print $args[0]>>
    <</widget>>
    
    
    
    Here is a widget that changes text/box size dynamically depending on the argument given to it. The last iteration was not printing correctly so I moved the button tags inside the print macro and after many many other trials and that worked.

    If I understood state.variables better perhaps I'd give another knock at doing this the other way I had planned,
  • edited January 2017
    Am I going to have problems using html <buttons> in the same way I would twine's <<buttons>> ?

    Edit: I tested <button> with <<button>>and found them interchangeable for my means. it seems to not change the code much to my untrained eye if i double up on the <,> signs , thankfully.
Sign In or Register to comment.