News Articles DOM

What happens if we manipulate DOM in requestAnimationFrame?

My understanding is whenever there is some DOM manipulation like inserting a DOM element would trigger a reflow and most likely followed by a repaint. Please correct me if I’m wrong. Quoting the MDN Web Docs, The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls […]

Get elements by class name using React functional components

Hi I would like to know how you can access element in the DOM by classname using React. Apparently document.getElementsByClassName doesn’t work. Source: React – Stack Overflow

Storing references to HTML elements in JS, what’s the convention?

In my app.js file I do a lot of document.getElementById(‘some-element’) calls. I think it would be more readable and maintainable to store the result of this call to a variable and then access the element through it whenever I need to. What’s the common way to do this in vanilla JS so that they’re available […]

Can you rotate an element using a input value?

I want to use the Input[type=range] to rotate the red circle with the id of outer, I tried to select the circle’s style, then transform, and that is equal to the value of the input, but it has to be between the parenthesis in rotateZ(), which is a string. Here is my code; var value […]

React,Bootstrap How to overwrite parent container class with container fluid

What I’m trying is when the User page loads it should override the parent container class with container-fluid and should expand to the entire screen. Here is my app.js file. function App() { return ( <Router> <section className="app wrapper container"> <nav> <Link to="/">Login</Link> <Link to="/register">Register</Link> </nav> <Routes> <Route path="/" element={<Login />} /> <Route path="/forget" element={<Forget […]

JavaScript: Listener Not Attaching To Overlay Element But Code Works When Run From Console

I don’t know why my listener is not working when running in the web app? Below is the button code: <button class="md-raised md-primary hpm-button md-button md-ink-ripple flex" type="submit" ng-transclude="" id="id_recaptcha" flex="" ng-disabled="paymentModalCtrl.disableButton()" ng-class="paymentModalCtrl.setting.captcha.enabled? ‘g-recaptcha’: ”" aria-live="polite" style="margin-left:0px; margin-right:0px;"> <div layout="row" layout-align="center center" class="ng-scope layout-align-center-center layout-row"> <span class="ng-binding">Pay 100.00 USD</span> <div flex="5" class="flex-5">&nbsp;</div> <div layout="row" layout-align="space-around" […]

Why is a numeric value altered when it is appended to the dom with jQuery?

Here is the snippet from a function: const discountPrice = parseFloat(+(discount[1].trim())).toFixed(2).toString(); //–> 550.47 console.log(`discountPrice: ${discountPrice}`, discount[1], discountPrice); //–> discountPrice: 550.47 550.47 550.47 h += ` <tr class="discountRow discountrowx"> <td nowrap> <span class="discountDesc" discountId="${discountObj.iddiscount}">${discountType}</span> </td> <td class="discountPriceDisplay">${discountPrice.toString()}</td> <input type="hidden" class="discountPrice" discountid="${discountObj.iddiscount}" name="DiscountPrice${k}" value="${discountPrice.toString()}"> </tr>`; console.log(`now it’s:`, discountPrice); This is what the string looks like after the […]

Why does `document.createElement` do not allow the creation of self-closing tags? [closed]

For example: let input_el = document.createElement(‘input’); input_el.setAttribute(‘type’,’text’); input_el.setAttribute(‘name’,’your_name’); body.prepend(input_el); Produces (tested in chrome browser): <input type="text" name="your_name"></input> And not the correct form: <input type="text" name="your_name"> For now I did not found any javascript function which would allow this. Source: JavaSript – Stack Overflow

Run javascript function on click dropdown menu

How to run a javascript function in HTML page only when a dropdown menu is selected, before any option is selected in it. I run Query when dropdown menu is clicked on, with the following: $("#_id").click(function () { Then when I select something in the same dropdown menu, script runs again. When it’s clicked on […]

can’t access the ‘header’ element inside my html file using JS

I’m trying to create an HTML element using JavaScript document.createElement("div") and then prepend/append it in my header of the document, but below is what I’m getting. enter image description here Source: JavaSript – Stack Overflow

Is there a way to simply reset the DOM?

This is my code as of now; at the bottom I have a button to reset my game call tryAgain. This does just that, but with some issues. Issue 1; after the game is reset using the code I have, sometimes I am unable to click on random buttons. Issue 2; I have a hove […]

Img content Get from blog can’t showing, using btoa for uncode img after get from url

Img content Get from blog can’t showing, using btoa for uncode img after get from URL, here’s the code I have try it, only blog IMG didn’t showing, is there something missing?i want to try apply getcontent for js but didn’t know where should I put it useEffect(() => { //fetch article from blog async […]

Event returns [object MouseEvent] rather than the text

I have my p tag which suppose to chage text when I trigger mouseover event but somehow I got [object MouseEvent] in return and not the text. HTML <p id="album-name-1" onmouseover="changeText(‘follow me around, greatest song of the album!’)"> change the text </p> JS var par = document.querySelector("#album-name-1"); par.addEventListener("mouseover", changeText); function changeText(text) { if (this.id === […]

Trying to understand what is happening in this code for udacity landing project project [closed]

Basically I’ve been looking at other projects and I am trying to understand how to do this rather than just copying it and moving on. I provided the html as well, but I mainly need help understanding what is happening in the navBuilder function. I am not sure this is vanilla JS or if it […]

how to manipulate many html elements ReactJS

I am rendering many divs which I scroll using buttons (hidden overflow, using buttons to swipe left and right) How can I do so that when i press the button all of these divs move, because assigning ID to div only works for one component and others do not move… const onRight = () => […]

script tag inject but not execute on React

this script is created and injected correctly but not execute when try to instance it, but rightly works from browser console. useEffect(() => { const script = document.createElement(‘script’); script.id = ‘mp’; script.type = ‘text/javascript’; script.src = ‘https://sdk.mercadopago.com/js/v2’; document.body.appendChild(script); const mp = new window.MercadoPago(‘PUBLIC-KEY’, { locale: ‘es-AR’ }); mp.checkout({ preference: { id: ‘489283197-ac01a776-5696-46ff-a300-98853bd3472d’ }, render: { […]

passing props into makeStyles react

I have this component const MyComponent = (props) => { const classes = useStyles(props); return ( <div className={classes.divBackground} backgroundImageLink={props.product?.image} sx={{ position: "relative" }} ></div> ); }; export default MyComponent; I am trying to pass backgroundImage link in props and trying to put into makeStyles export default makeStyles(props => ({ divBackground:{ background:`url("${props.backgroundImageLink}")`, } })); But this […]

React-pdf-print generates an empty PDF file

import React from "react"; import React from "react"; import "./styles.css"; import Printer, { print } from "react-pdf-print"; const ids = ["1"]; export default function App() { return ( <div className="App"> <Printer> <div id={ids[0]}>Hello World!</div> </Printer> <input type="button" onClick={() => print(ids)} value="Export to PDF"/> </div>); } Do not have code formatter to format the code. The […]

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.