java script document.getElementById() is not working

Question

hope you having great days, i'm trying to get div for change its attribute value but document.getElementById() is not working i put the statement for after the div is completly load, and even tried windows.load but nothing workout, any suggestions?


  var size_list = [[76.01, 77.81,23.99,11.09,0,11.09]
  ,[69.9, 71.56,20.51,14.22,9.59,14.22]
  ,[64.1,65.63,17.56,17.19,18.34,17.19]
  ,[59.22,60.63,15.15,19.69,25.64,19.69]
  ,[54.79,56.09,12.87,21.95,32.34,21.95]]


function size_update(src,index) {
  console.log("i'm working");
  let element = window.getComputedStyle(document.getElementById("thisid"),null)
  element.setProperty('.height',size_list[index][0]+'%');
  element.setProperty('width',size_list[index][1]+'%');
  element.setProperty('top',size_list[index][2]+'%');
  element.setProperty('right',size_list[index][3]+'%');
  element.setProperty('bottom',size_list[index][4]+'%');
  element.setProperty('left',size_list[index][5]+'%');
}


const Videoframe = ({src,index,title,before_span,span,after_span,subtitle}) =>{
  try{
    // do something
    return(
      <div>
        <script>
          function (){console.log("start!")};
        </script>
      <div className="videoframe" name = "thisid" id = "thisid" >
      <div className="textgroup1">
        <div className="title">{title}</div>
        <div className="main">
          <span>{before_span}</span>
          <i className="better">{span}</i>
          <span> {after_span}</span>
        </div>
        <div className="padding" />
        <div className="subtitle">
         {subtitle}
        </div>
      </div>
    </div>
    <script>
    function (){console.log("ended!")};
        </script>

    </div>
    );}
    finally{
      size_update(src,index);
    }


        }


export default Videoframe;
export { size_list }

tried googling and window.load

I assume this is react. Would that not mean you need some [render event](https://stackoverflow.com/questions/26556436/react-after-render-code) ? — mplungjan, Jan 17 '23 at 08:21
Welcome to Stack Overflow! Please visit the [help], take the [tour] to see what and [ask]. Do some research - [search SO for answers](https://www.google.com/search?q=reactjs+after+element+rendered+site%3Astackoverflow.com). If you get stuck, post a [mcve] of your attempt, noting input and expected output using the [\[<>\]](https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do) snippet editor. — mplungjan, Jan 17 '23 at 08:22
Hey, the element does not have setProperty method, console.log(element) and see what it logs. Also, don't use try-finally - it can cause errors. Use useEffect for running scripts on component mount/unmount — Rostyk, Jan 17 '23 at 08:24
mplungjan,Rostyk Thanks for the comment according to log, it seem getElementId in size_update return null, it seem it just can't find the element if i remove size_update function, other things works fine, it seem it can't search element from document — 5242 Bora, Jan 17 '23 at 08:34
Why would you do all that manual DOM manipulating in React, though? — mbojko, Jan 17 '23 at 08:49

Xirom · Answer 1 · 2023-01-17T08:46:28.290

window.getComputedStyle() returns the style of the object, but you need the DOM-Element.

To get an element once the document is loaded you need to use the window load event by doing either

window.addEventListener("load", () => {
  let element = document.getElementById("thisID");
});

or

window.onload = () => {
  let element = document.getElementById("thisID");
};

In both cases, you supply a function to be executed once the document is loaded. Note that the code inside the eventhandler is executed only when the site is loaded, so after the code which is written after this code snippet. If you want to access the element, you'll need to write the logic for the element inside the function.

java script document.getElementById() is not working

1 Answers1