JavaScript - How to create a working function to copy data to Clipboard?

[jackyjask]

@LCF-AT hihi!

book

[LCF-AT]

@yano65bis Thank you sending new info's how to deal with my issues.  

So what is if I want to create more than one button, maybe 5. Would be better to create any function for that instead to write 5x a button code. Is that also simply doable then? The question is how much custom parameters can I use / set in my function?

About the querySelector problem I had, so I thought already something like that its triggering an exception anyhow somewhere etc. I would like to use chains to make the code smaller but didn't knew that I have to use that ".?" combo to prevent the errors. Very good info, I like it and its working now!  

@jackyjask Thank you for that JS book for NEWBIEZ! So I have a problem with that strange "epub" extension (I don't know that yet). What tool to use to open it? I installed an Firefox AddOn called EPUBReader but this total sux. Is it possible to convert that file into simple PDF maybe? If you have more reading matter for JS I need to know as Newbie then post it too if possible.

PS: Just another question about JS. Can you recommend any JS editor tool which are similar as the online JS CSS HTML window tools? I would like to work / play with that offline too. Some small portable running tool (anything from Github maybe) would be nice. Thanks.

[LCF-AT]

So I have another TINY question about the JS basics and how to deal with commands I want to prepare BUT without to execute them.

Example: I wanna create a button what should do something if I click on it (same we talked before about it already) but I want to exec it later in my code. How to do that?

let TEST = "https://forum.tuts4you.com/";

let input=document.createElement("input");
input.type="button";
input.value="Tuts4you";
input.onclick = () => copyToClipboard(TEST);
document.body.appendChild(input).style.cursor = "pointer";

Above a simple code to create a button with some parameters and JS does create the button right away in the HTML page. My first question is what does create / Put the button on the HTML? So far I see its the last command line calling the appendChild function to put the button on HTML right. But the thing is I have maybe 3 button create codes like this to create three buttons BUT I want the last created button on first place etc (other order). Now I would like to know how to build my button codes as above and copy the entire ready preparation into a new variable and how to execute this variable later? You know what I mean right. But the code above into new variable (not sure how yet) and do exec the variable later if I want.

let BUTTON_1 = createbutton_code;
let BUTTON_2 = createbutton_code2;
let BUTTON_3 = createbutton_code3;

// later in code

execute BUTTON_3;
execute BUTTON_1;
execute BUTTON_2;

Is that possible? If yes then I also don't know how to execute (my fantasy command right now) the filled variable. Maybe you can tell me.

greetz

[yano65bis]

19 hours ago, LCF-AT said:

@yano65bis Thank you sending new info's how to deal with my issues.  

So what is if I want to create more than one button, maybe 5. Would be better to create any function for that instead to write 5x a button code. Is that also simply doable then? The question is how much custom parameters can I use / set in my function?

About the querySelector problem I had, so I thought already something like that its triggering an exception anyhow somewhere etc. I would like to use chains to make the code smaller but didn't knew that I have to use that ".?" combo to prevent the errors. Very good info, I like it and its working now!  

@jackyjask Thank you for that JS book for NEWBIEZ! So I have a problem with that strange "epub" extension (I don't know that yet). What tool to use to open it? I installed an Firefox AddOn called EPUBReader but this total sux. Is it possible to convert that file into simple PDF maybe? If you have more reading matter for JS I need to know as Newbie then post it too if possible.

PS: Just another question about JS. Can you recommend any JS editor tool which are similar as the online JS CSS HTML window tools? I would like to work / play with that offline too. Some small portable running tool (anything from Github maybe) would be nice. Thanks.

Hi

Yes, you can absolutely create multiple buttons dynamically using a function, and it’s a much cleaner and more reusable approach compared to writing the button creation code multiple times. You can pass custom parameters to the function to control things like the button text, position, and the text to copy. JavaScript functions allow you to pass as many parameters as you need.

Here’s an example of how you can create multiple buttons dynamically with a reusable function:

(function () {
  // Function to create a button dynamically
  function createButton(buttonText, textToCopy, position = { top: "10px", left: "10px" }) {
    const button = document.createElement("button");
    button.textContent = buttonText; // Set the button's text
    button.style.position = "fixed"; // Position it on the page
    button.style.top = position.top;
    button.style.left = position.left;
    button.style.zIndex = "1000"; // Ensure it appears above other elements

    // Add event listener to copy text when clicked
    button.addEventListener("click", () => {
      navigator.clipboard.writeText(textToCopy)
        .then(() => console.log(`Copied: ${textToCopy}`))
        .catch(err => console.error("Failed to copy:", err));
    });

    // Append the button to the page
    document.body.appendChild(button);
  }

  // Example: Create multiple buttons with different configurations
  createButton("Copy Text 1", "Hello World!", { top: "10px", left: "10px" });
  createButton("Copy Text 2", "JavaScript is fun!", { top: "50px", left: "10px" });
  createButton("Copy Text 3", "Dynamic buttons are cool!", { top: "90px", left: "10px" });
  createButton("Copy Text 4", "Clipboard API rocks!", { top: "130px", left: "10px" });
  createButton("Copy Text 5", "Reusable functions save time!", { top: "170px", left: "10px" });
})();

Thus you only need to call createButton() with your desired parameters for each new button.

Customizing Parameters :

You can pass as many parameters as needed by extending the function. For example, if you want to customize styles like background color or font size, you can add an additional parameter:

function createButton(buttonText, textToCopy, position = { top: "10px", left: "10px" }, styles = {}) {
  const button = document.createElement("button");
  button.textContent = buttonText;
  button.style.position = "fixed";
  button.style.top = position.top;
  button.style.left = position.left;
  button.style.zIndex = "1000";

  // Apply custom styles if provided
  for (const [key, value] of Object.entries(styles)) {
    button.style[key] = value;
  }

  // Add event listener for copying text
  button.addEventListener("click", () => {
    navigator.clipboard.writeText(textToCopy)
      .then(() => console.log(`Copied: ${textToCopy}`))
      .catch(err => console.error("Failed to copy:", err));
  });

  document.body.appendChild(button);
}

// Example with custom styles
createButton(
  "Styled Button",
  "Custom styled text!",
  { top: "210px", left: "10px" },
  { backgroundColor: "blue", color: "white", fontSize: "16px", padding: "10px" }
);

Example Output

Five buttons will appear at different vertical positions (top values).

Each button will copy its respective text when clicked.

You can easily add more buttons by calling createButton() with new parameters.

Let me know

[yano65bis]

14 hours ago, LCF-AT said:

So I have another TINY question about the JS basics and how to deal with commands I want to prepare BUT without to execute them.

Example: I wanna create a button what should do something if I click on it (same we talked before about it already) but I want to exec it later in my code. How to do that?

let TEST = "https://forum.tuts4you.com/";

let input=document.createElement("input");
input.type="button";
input.value="Tuts4you";
input.onclick = () => copyToClipboard(TEST);
document.body.appendChild(input).style.cursor = "pointer";

Above a simple code to create a button with some parameters and JS does create the button right away in the HTML page. My first question is what does create / Put the button on the HTML? So far I see its the last command line calling the appendChild function to put the button on HTML right. But the thing is I have maybe 3 button create codes like this to create three buttons BUT I want the last created button on first place etc (other order). Now I would like to know how to build my button codes as above and copy the entire ready preparation into a new variable and how to execute this variable later? You know what I mean right. But the code above into new variable (not sure how yet) and do exec the variable later if I want.

let BUTTON_1 = createbutton_code;
let BUTTON_2 = createbutton_code2;
let BUTTON_3 = createbutton_code3;

// later in code

execute BUTTON_3;
execute BUTTON_1;
execute BUTTON_2;

Is that possible? If yes then I also don't know how to execute (my fantasy command right now) the filled variable. Maybe you can tell me.

greetz

Yes, it's possible to delay button creation code ahead of time, store it in a variable, and execute it later. To achieve this, you can use JavaScript functions to encapsulate the button creation logic. Instead of immediately appending the button to the DOM, you store the function calls in variables and execute them later when needed.

How to do ?

1 -Encapsulate Button Creation Logic in a Function:

   *Create a function that generates a button but doesn't append it to the DOM immediately.

   *Return the button element from the function.

2-Store Functions or Button Elements in Variables:

    *Store the prepared button creation logic in variables.

3-Execute Later:

    *Append the buttons to the DOM in any order you prefer by calling these stored functions or manipulating stored elements.

Example:

// Function to create a button (but don't append it yet)
function createButton(buttonText, textToCopy) {
  const button = document.createElement("input");
  button.type = "button";
  button.value = buttonText;
  button.style.cursor = "pointer";

  // Add click event listener
  button.onclick = () => {
    navigator.clipboard.writeText(textToCopy)
      .then(() => console.log(`Copied: ${textToCopy}`))
      .catch(err => console.error("Failed to copy:", err));
  };

  return button; // Return the prepared button element
}

// Prepare buttons but don't append them yet
let BUTTON_1 = createButton("Tuts4you", "https://forum.tuts4you.com/");
let BUTTON_2 = createButton("Google", "https://www.google.com/");
let BUTTON_3 = createButton("GitHub", "https://github.com/");

// Execute later: Append buttons to the DOM in desired order
document.body.appendChild(BUTTON_3); // Add BUTTON_3 first
document.body.appendChild(BUTTON_1); // Add BUTTON_1 second
document.body.appendChild(BUTTON_2); // Add BUTTON_2 third

As result : you control when and in what order buttons are added to the page by calling document.body.appendChild() on the stored variables.

Executing Stored Variables

If you want to store commands (not just elements) for later execution, you can use functions as variables:

// Store commands as functions
let BUTTON_1 = () => document.body.appendChild(createButton("Tuts4you", "https://forum.tuts4you.com/"));
let BUTTON_2 = () => document.body.appendChild(createButton("Google", "https://www.google.com/"));
let BUTTON_3 = () => document.body.appendChild(createButton("GitHub", "https://github.com/"));

// Execute commands later in desired order
BUTTON_3(); // Execute BUTTON_3 first
BUTTON_1(); // Execute BUTTON_1 second
BUTTON_2(); // Execute BUTTON_2 third

 

This approach gives you full control over when and how elements are added to the page.

Greetz

 

[LCF-AT]

Hello @yano65bis, thank you very much for posting those example codes. They really looking and working nicely on the online tool. Slowly I suspect that you understand something about it! Somehow its getting a little harder but also cooler as well.

So I have two more question about JS. Question 1: What offline editor I should use? What do you use (not asking for some Visual MS stuff with tons of MB's to install). Do you know any light low size portable tool etc? My question 2: Is there somewhere a compendium of ALL internal JS function's I can use already? You know, something like API reference / hlp where many API's are described and how to use it etc. Something like that.

PS: Another question about where to place some own elements on HTML. Lets say I do create any button/s and I want to place them on specific OTHER HTML element which are already there. Just lets imagine there is a PLAYER element (like YT video player) and now I want to place a button above or below or left / right on that player element. So far I do remember I just grab again the ID of the player if present and then append my own button = should be places under the player. So what if I want to place it above so in case I can't use append function anymore right. On internet I found something about InsertBefore function. Otherwise I thought it would be doable to call appendChild function with an index value [0] etc to place the new child on top but I think its not working right.

PS: Forgot something (another question) about that first code with the command line "return button; // Return the prepared button element". So far I see you did declare the button variable as const one (not changeable) and then you do return it with that variable but why?

// Function to create a button (but don't append it yet)
function createButton(buttonText, textToCopy) {
  const button = document.createElement("input");
  button.type = "button";
  button.value = buttonText;
  button.style.cursor = "pointer";

  // Add click event listener
  button.onclick = () => {
    navigator.clipboard.writeText(textToCopy)
      .then(() => console.log(`Copied: ${textToCopy}`))
      .catch(err => console.error("Failed to copy:", err));
  };

  return button; // Return the prepared button element
}

You put that first command "document.createElement("input");" into button variable, then you adjust that variable / type / value / style then you add the event onclick operation to it = Entire variable button was edited / prepared right, but then you use the "return button" command but why? I mean, the variable is already done or not? What does it return then and where? Again into button variable? Maybe you can explain this part a little to know why I have to use the variable at return command. Thanks.

greetz

[yano65bis]

1 hour ago, LCF-AT said:

Hello @yano65bis, thank you very much for posting those example codes. They really looking and working nicely on the online tool. Slowly I suspect that you understand something about it! Somehow its getting a little harder but also cooler as well.

So I have two more question about JS. Question 1: What offline editor I should use? What do you use (not asking for some Visual MS stuff with tons of MB's to install). Do you know any light low size portable tool etc? My question 2: Is there somewhere a compendium of ALL internal JS function's I can use already? You know, something like API reference / hlp where many API's are described and how to use it etc. Something like that.

PS: Another question about where to place some own elements on HTML. Lets say I do create any button/s and I want to place them on specific OTHER HTML element which are already there. Just lets imagine there is a PLAYER element (like YT video player) and now I want to place a button above or below or left / right on that player element. So far I do remember I just grab again the ID of the player if present and then append my own button = should be places under the player. So what if I want to place it above so in case I can't use append function anymore right. On internet I found something about InsertBefore function. Otherwise I thought it would be doable to call appendChild function with an index value [0] etc to place the new child on top but I think its not working right.

PS: Forgot something (another question) about that first code with the command line "return button; // Return the prepared button element". So far I see you did declare the button variable as const one (not changeable) and then you do return it with that variable but why?

// Function to create a button (but don't append it yet)
function createButton(buttonText, textToCopy) {
  const button = document.createElement("input");
  button.type = "button";
  button.value = buttonText;
  button.style.cursor = "pointer";

  // Add click event listener
  button.onclick = () => {
    navigator.clipboard.writeText(textToCopy)
      .then(() => console.log(`Copied: ${textToCopy}`))
      .catch(err => console.error("Failed to copy:", err));
  };

  return button; // Return the prepared button element
}

You put that first command "document.createElement("input");" into button variable, then you adjust that variable / type / value / style then you add the event onclick operation to it = Entire variable button was edited / prepared right, but then you use the "return button" command but why? I mean, the variable is already done or not? What does it return then and where? Again into button variable? Maybe you can explain this part a little to know why I have to use the variable at return command. Thanks.

greetz

Hi

For lightweight, portable editors for JavaScript development you can try

1 Sublime Text:

A fast, lightweight editor with excellent support for JavaScript.

It allows you to install plugins (like JsFormat and SublimeLinter) to enhance your coding experience2.

Portable versions are available online.(just googling 😉)

2 Atom:

Open-source and cross-platform, Atom is customizable and comes with smart code completion2.

Lightweight compared to larger IDEs like Visual Studio Code.

------

For a complete reference of JavaScript's built-in functions, methods, and APIs, you can use the following resources:

MDN Web Docs:: 

https://developer.mozilla.org/en-US/docs/Web/JavaScript 

https://developer.mozilla.org/en-US/docs/Web/API

https://www.w3schools.com/js/ (for learning javascript online)

-------

Placing Elements Relative to Existing HTML Elements:

To place your dynamically created buttons relative to an existing HTML element (e.g., a video player), you can use DOM manipulation methods like appendChild, insertBefore, or CSS positioning.

- Placing Below or Inside (Using appendChild)

If you want to place the button inside the player element (e.g., below it):

const player = document.getElementById("player"); // Assume "player" is the ID of the video player
const button = document.createElement("button");
button.textContent = "My Button";
player.appendChild(button); // Places the button as the last child inside the player

- Placing Above (Using insertBefore)

If you want to place the button above the player element:

const player = document.getElementById("player");
const button = document.createElement("button");
button.textContent = "My Button";

// Insert the button before the player element in its parent container
player.parentNode.insertBefore(button, player);

Using CSS for Precise Positioning

You can use CSS styles for absolute or relative positioning:
 

const player = document.getElementById("player");
const button = document.createElement("button");
button.textContent = "My Button";
button.style.position = "absolute"; // Position relative to its nearest positioned ancestor
button.style.top = `${player.offsetTop - 50}px`; // Place above the player
button.style.left = `${player.offsetLeft}px`; // Align horizontally with the player
document.body.appendChild(button);

------

 return button ?

The return statement outputs the fully prepared button element from the function.

Without return, the function would execute but not give you access to the created element outside of its scope.

By returning button, you can store it in a variable (let BUTTON_1 = createButton(...)) and manipulate or append it later.

 

Why Use const?

Declaring button as const ensures that its reference cannot be reassigned (e.g., pointing it to a different object). However, you can still modify its properties (e.g., .type, .value, .style) because objects are "mutable".

So the return statement allows a function to output a value (like a DOM element), enabling reuse and flexibility in your code.

Greetz

 

 

[LCF-AT]

@yano65bis Thank you for detailed description so far but I have another small question. I didn't understood when using the inerHMTL / outerHTML / or nothing to my JS command property. Could you explain that a little with any examples? Using getElementById or getElementById.innerHTML etc. Still don't know.

greetz

EDIT: About Editors / test tools for JS / HTML / CSS like online. Sublime Text is too complicated to setup all the stuff manually. I need some ready testing tool like those online ones. Is there no local tool like that I can use offline?

Edited April 7 by LCF-AT
Add Question

[yano65bis]

2 hours ago, LCF-AT said:

@yano65bis Thank you for detailed description so far but I have another small question. I didn't understood when using the inerHMTL / outerHTML / or nothing to my JS command property. Could you explain that a little with any examples? Using getElementById or getElementById.innerHTML etc. Still don't know.

greetz

EDIT: About Editors / test tools for JS / HTML / CSS like online. Sublime Text is too complicated to setup all the stuff manually. I need some ready testing tool like those online ones. Is there no local tool like that I can use offline?

Hi

@LCF-AT  it appears you are stuck in js world 😀 ?

So you still have problems with innerHTML, outerHTML,right ?

Ok i will try to explane all  ✍ ;

The difference between innerHTML, outerHTML, and directly working with DOM elements (without these properties) can be confusing at first. Let me give you a clear explanation and show you some examples.

1. innerHTML

What It Does:

innerHTML allows you to get or set the HTML content inside an element. It includes all child elements, text, and HTML tags within the selected element.

Use Case:

When you need to modify or retrieve the content inside an element.

Example: Using innerHTML

// Example HTML: <div id="exampleDiv">Hello, <b>World</b>!</div>
const div = document.getElementById("exampleDiv");

// Get the inner HTML content
console.log(div.innerHTML); // Outputs: "Hello, <b>World</b>!"

// Set new inner HTML content
div.innerHTML = "New <i>Content</i>";
// Resulting HTML: <div id="exampleDiv">New <i>Content</i></div>

Key Notes:

Setting innerHTML replaces all the existing content inside the element.

You can include raw HTML tags in the string (e.g., <i>), which will be parsed and rendered.

 

2. outerHTML

What It Does:

outerHTML allows you to get or replace the entire element itself, including its opening and closing tags, along with its content.

Use Case:

When you want to replace or retrieve the entire element, not just its inner content.

Example: Using outerHTML

// Example HTML: <div id="exampleDiv">Hello, <b>World</b>!</div>
const div = document.getElementById("exampleDiv");

// Get the outer HTML (the entire element)
console.log(div.outerHTML); // Outputs: "<div id="exampleDiv">Hello, <b>World</b>!</div>"

// Replace the entire element with new content
div.outerHTML = '<p id="newElement">This is a new paragraph!</p>';
// Resulting HTML: <p id="newElement">This is a new paragraph!</p>

Key Notes:

Unlike innerHTML, setting outerHTML replaces the selected element itself in the DOM.

After replacing an element using outerHTML, any reference to that original element becomes invalid because it no longer exists in the DOM.

Let me know if you'd like further clarification! 😊

 

[LCF-AT]

@yano65bis Thanks for your answer with examples but I have one big question. WHAT?! So for me it looks somehow same using inner or outerHTML. OK, if I understood you right then inner only grabs the inside after ID element and outer grabs just entire = all of it. Should I only use it if I wanna modify anything on that lines / Elements etc? Otherwise if I just try to grab info's like ID / Query etc to fetch dada from source / src like URLs and stuff then I don't need to use inner or outer right?

PS: Still could not find any offline playground JS HTML CSS tool! Is there nothing? Just find online tools. Found another one here..

https://liveweave.com/

....I wan to have offline / external / portable etc.

greetz

[yano65bis]

12 hours ago, LCF-AT said:

@yano65bis Thanks for your answer with examples but I have one big question. WHAT?! So for me it looks somehow same using inner or outerHTML. OK, if I understood you right then inner only grabs the inside after ID element and outer grabs just entire = all of it. Should I only use it if I wanna modify anything on that lines / Elements etc? Otherwise if I just try to grab info's like ID / Query etc to fetch dada from source / src like URLs and stuff then I don't need to use inner or outer right?

PS: Still could not find any offline playground JS HTML CSS tool! Is there nothing? Just find online tools. Found another one here..

https://liveweave.com/

....I wan to have offline / external / portable etc.

greetz

@LCF-AT : When You don’t Need innerHTML or outerHTML ?

If you just want to fetch specific attributes (like id, src, or URLs), you don’t need innerHTML or outerHTML. Instead, use properties like .getAttribute() or direct access via .src, .href, etc.

Example:

xml
<img id="image" src="https://example.com/image.jpg" alt="Example Image">

javascript
const img = document.getElementById("image");
console.log(img.src); // Outputs: "https://example.com/image.jpg"
console.log(img.getAttribute("alt")); // Outputs: "Example Image"

Why You don’t Always Need innerHTML or outerHTML ?

If your goal is simply to extract specific data (like URLs, IDs, or text), these properties are unnecessary.

For example, if you want to fetch a URL from an <img> tag, accessing .src directly is more efficient than using innerHTML.

Here’s an example of using direct access via .src, .href, and other similar properties to retrieve or modify data from HTML elements:

Example: Accessing and Modifying Attributes :

xml
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Direct Access Example</title>
</head>
<body>
  <!-- Image with src attribute -->
  <img id="image" src="https://example.com/image.jpg" alt="Example Image">

  <!-- Anchor with href attribute -->
  <a id="link" href="https://example.com" target="_blank">Visit Example</a>

  <!-- Video with src attribute -->
  <video id="videoPlayer" src="https://example.com/video.mp4" controls></video>

  <!-- Script to demonstrate direct access -->
  <script>
    // Access the image element
    const img = document.getElementById("image");
    console.log("Image Source:", img.src); // Outputs: https://example.com/image.jpg
    console.log("Image Alt Text:", img.alt); // Outputs: Example Image

    // Modify the image source
    img.src = "https://example.com/new-image.jpg";
    console.log("Updated Image Source:", img.src); // Outputs: https://example.com/new-image.jpg

    // Access the anchor element
    const link = document.getElementById("link");
    console.log("Anchor HREF:", link.href); // Outputs: https://example.com

    // Modify the anchor href
    link.href = "https://new-example.com";
    console.log("Updated Anchor HREF:", link.href); // Outputs: https://new-example.com

    // Access the video element
    const video = document.getElementById("videoPlayer");
    console.log("Video Source:", video.src); // Outputs: https://example.com/video.mp4

    // Modify the video source
    video.src = "https://example.com/new-video.mp4";
    console.log("Updated Video Source:", video.src); // Outputs: https://example.com/new-video.mp4
  </script>
</body>
</html>

Accessing Attributes:

.src: Retrieves the src attribute value of elements like <img> or <video>.

.href: Retrieves the href attribute value of <a> (anchor) elements.

.alt: Retrieves the alt attribute value of <img> elements.

Modifying Attributes:

You can directly assign new values to these properties (e.g., img.src = "new-url").

Output:

The console.log() statements show the current values of attributes in the browser's developer console.

Other example  : 

Fetching URLs for Processing

If you’re working with dynamic content (e.g., fetching URLs for images or videos), direct access is efficient:

javascript
const videoURL = document.getElementById("videoPlayer").src;
console.log("Video URL:", videoURL);

Dynamic Updates

You can dynamically update attributes based on user interactions or API responses:

javascript
const img = document.getElementById("image");
img.src = "https://api.example.com/new-image.jpg";

thus :

If you only need specific attributes like src, href, or alt, accessing them directly is faster and avoids unnecessary overhead.

innerHTML retrieves all child elements and text inside an element, which is unnecessary if you only need a single attribute.

greetz

[LCF-AT]

@yano65bis Thank you for another detailed examples. Good one. How can I test it in Sublime like I can do in...

https://developer.mozilla.org/de/play

...online playground? So I have another question about those all items I can use / find inside of HTML. Do you have some full list of all elements, tag names, attributes, properties and all that. Maybe you know some kind of visually card / leaflet I can look on it quickly to remember etc? I always forget what what is you know.

Look...

<img id="image" src="https://example.com/image.jpg" alt="Example Image">

<a id="link" href="https://example.com" target="_blank">Visit Example</a>

<video id="videoPlayer" src="https://example.com/video.mp4" controls></video>

img & a & video = elements right. All others = attributes? So that somehow what is hard to keep in mind correctly. Is there some kind of "donkey bridge" which could help to remember? What is the controls at video tag inside, how to call this? Otherwise I like that chain commands without to move anything into extra variable or something. Do you have any more complex chain examples what is possible? I know I'm using those chains in uBO AddOn sometimes to modify some website elements but also in this case its not always clear for me when using the > or * operator + functions etc but its interesting of course. Just need to find out the logically way behind of that to understand every step.

greetz