skip to Main Content

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?

3

Answers


  1. 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.

    Login or Signup to reply.
  2. You can’t. Fluid is rendered server side. JavaScript is run client side. <f:variable name="divSize" value="???" /> does not exist client side.

    Login or Signup to reply.
  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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search