Forums

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    

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

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  

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

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