Trouble getting elements with Javascript in twine

Authoring Twine
1

If you are requesting technical assistance with Twine, please specify:
Twine Version:2.5.1
Story Format: SugarCube 2.36.1

I’m trying to setup a dropdown that has different options enabled depending on story progress. ie when the player gets a crowbar, the “pry open” selection is enabled. However I can’t for the life of me get any type of object selector to work if the code is properly placed. It’s all null pointers and empty sets. I know the selectors work because when I ran it postdisplay purely from Javascript it performed fine. But that runs the script on every page and that isn’t what I need.

Here’s my current failure :

Story :

 <select name="action" id="action">
  <option value="0" selected>Create</option>
  <option value="1" disabled>Destroy</option>
  <option value="2" disabled>Manipulate</option>
</select>

<<run setup.craftclean("action", 1, true) >>

Javascript

window.setup = window.setup || {};

setup.craftclean = function(iden, value, on) {
  
  var target = $( iden );
  target.disabled = true;
  
};

Any assistance would be appreciated. I know I’m missing something small related to Twine, but I chose this so I wouldn’t have to dig through 2000 manuals in order to perform otherwise simple code.

2

Well! It was just as ridiculously simple as I thought it might be. No idea how I stumbled onto the answer in the documentation but the “done” macro did the trick. I got tricked by all the stuff meant to run on every page instead of the easy things.

Working code

 <select name="action" id="action">
  <option value="0" selected>Create</option>
  <option value="1" disabled>Destroy</option>
  <option value="2" disabled>Manipulate</option>
</select>

<<done>>
<<run setup.craftclean("action", 1, true) >>
<</done>>

And the Javascript

setup.craftclean = function(iden, value, on) {
  
  const target = document.getElementById(iden);
  target.options[value].disabled = !on;
  
};
1 Like