Hiding an Object using an HTML button

Hello Yuri,

Thank you for your response. I have written the code you detailed in the application javascript file just below the auto-generated runCode() function.

I can now successfully call the myFunction() from my script file however I still receive an error when attempting to call: v3d.puzzles.procedures.hide()

The error states the following:
Uncaught TypeError: v3d.puzzles.procedures.hide is not a function

This error exists despite runCode() running the above function and hiding the object successfully when the model loads.

Any idea what may be the cause of this issue?

Hello,

This is unlikely to be the cause of the issue because the hide function that I am using is set to hide and then show a target object a couple of seconds later. I only attempt to test this function with the button after runCode() has run the function and the object has reappeared.

Would there be another way to test this function to help troubleshoot the issue?

Calling the function from the console works when I host the application html file but it does not work when I attempt to call the function while hosting my index.html file. Instead, it returns the following error:

VM44:1 Uncaught TypeError: v3d.puzzles.procedures.hide is not a function
    at <anonymous>:1:24

NOTE: I am uncertain if this is absolutely relevant/ necessary but the index.html does contain all of the local script files via the <script> tag.

The function appears in the visual_logic.js file as follows:

function hide() {
  changeVis('blueBall', false);
  registerSetTimeout(3, function() {
    changeVis('blueBall', true);
  });
}

It is also referred to in the same file in the following statement (not sure if relevant):
this.procedures["hide"] = hide;

I do have some puzzles that hide an object when the particular object is clicked. They are working as intended inside the iframe.

Thank you for your response. I have attached the link below along with the following description of the code to help decipher the origin of the issue.

The main index html loads the iframe for the verge3d model and also displays a button (labelled “Test Button”) with an onClick event.

The onClick event triggers a method in the verge_node.js file. This is the custom javascript file I would like to be able to access the puzzle functions from even if it means using a global object such as window.

The function then triggered from the verge_node.js file (window.hideTest()) is defined a couple lines below the runCode function inside N12.js. This is where the console reports the error when the button is pressed:

N12.js:198 Uncaught TypeError: v3d.puzzles.procedures.hide is not a function

    at window.hideTest (N12.js:198)
    at buttonClick (verge_node.js:4)
    at HTMLButtonElement.onclick (index.html:18)

`

Other notes:
As mentioned previously, it appears the method can be referenced from the console if the N12.html is loaded directly instead of index.html but this is not a feasible solution for my application.

Each of the coloured balls hovering outside the box have a hide puzzle which will hide them and later make them reappear. This puzzle activates when the respective ball is clicked.

Thanks again for all your help with this matter.

Links: index.html-https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:57e73ecf67/applications/iframe_component/index.html

N12.html-https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:57e73ecf67/applications/iframe_component/N12.html

I just investigated this possibility. I made certain that v3d.PL.init(app, initOptions); was called and logged in the console from within PL.init to ensure it was being run.

Even after experimenting with defining the hide() function as a global function from within PL.init it still cannot be accessed elsewhere in the code.

Any ideas?

Even a non-optimal workaround would be beneficial :)