I want to instantiate a web component based on a <template> element in the DOM using JS to set 2 slot values title and text. template HTML <template id="tiddler-display"> <div class="tiddler"> <h1><slot name="title">TITLE</slot></h1> <p><slot name="text">TEXT</slot></p> </div> </template> How does one…
in reactjs, I have a function that scrolls elements when given a useRef: ref.current?.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center", }); When this function is called on multiple elements at once, only the one that is called first will actually…
I am currently working on a on a small project, if you can call it that way. It’s pretty simple two buttons which affect a <p> element that alone works, but now I decided to use Objects and DOM to…
I'm using a switch statement to determine which button is being pressed, they both work with the same function when changing the documents background color, however, when I pass in the actual element and target it within the function and…
I am trying to position a svg with text in exactly the same position as div with text, no matter the font family used or font size The problem comes with the first element being offset in x and y…
This is my Ball: import CSS from "csstype"; const circleAroundNumber: CSS.Properties = { borderRadius: "50%", width: "70px", height: "70px", padding: "8px", position: "absolute", borderBlockWidth: "2px", borderBlockColor: "black", textAlign: "center", fontSize: "32px", fontFamily: "Arial, sans-serif", }; interface Props { children: string;…
I am doing a "pixel art" web page, and I don't want the "pencil" to draw when I am not pressing the button on the mouse, I try to do this but either I can make the "pencil" work with…
I have recently been trying to understand how to select elements and manipulate them using the html tree generator and JavaScript. How do I select the second last element of the last element child and also how do I select…
I am trying to use localStorage to store and load the checked state of a checkbox. The values are being correctly stored and retrieved from localStorage, but the checkbox is not reflecting these values when the page loads. Here’s a…
I want to select OKBTN let main = document.querySelector("#main"); let okBtn = document.querySelector("#ok"); function myAlert(title,msg,icon){ let card = ""; card += `<div class="card"> <img src="${icon}.jpg"> <h1>${title}</h1> <p>${msg}</p> <button id="ok">OK</button> </div>`; main.innerHTML = card; } okBtn.addEventListener("click", function(){ main.style.display = "none"; });…