Pass Javascript variable to TYPO3 variable

Question

With the following JS I get the height of a div

    document.addEventListener(
        "DOMContentLoaded", () => {
          const element = document.getElementById("c27");
          let text = element.offsetHeight + "px";
          document.getElementsByTagName("divSize").??? = text;
        }

    );

Now I want to pass the variable to a fluid variable as value

<f:variable name="divSize" value="???" />

How can I do it?

Answer 1

You can't. Fluid is rendered server side. JavaScript is run client side. <f:variable name="divSize" value="???" /> does not exist client side.

Answer 2

document.addEventListener(
    "DOMContentLoaded", () => {
      const element = document.getElementById("c27");
      let text = element.offsetHeight + "px";
      document.querySelector("[name=divSize]").setAttribute('value', text);
    }
);

document.getElementsByTagName("divSize") looks for <divSize> elements, not name="divSize". You can use document.getElememtsByName(), but document.querySelector() is a little simpler (it just returns the first match, so you don't have to index it).

Use setAttribute() to set the value attribute. You might be able to assign to the .value property, but that normally only exists for user input elements (<input>, <select>, and <textarea>). I don't know whether <f:variable> supports this property directly.

Answer 3

You will have to do an HTTP request either by reloading the page and adding a URL parameter or by pushing the value to the server via AJAX and providing the value as a parameter. Then you can handle the value within that request via Fluid and return either a full page or a an HTML-snippet.