2

Iam trying to update the background color of the html page when it loaded in the browser. I have Node.js script that would set the background in the page

Below is the html page and node.js script i tried so far


<html>
<style type="text/css">
    .Table
    {
        display: table;
    }
    .Title
    {
        display: table-caption;
        text-align: center;
        font-weight: bold;
        font-size: larger;
    }
    .Heading
    {
        display: table-row;
        font-weight: bold;
        text-align: center;
    }
    .Row
    {
        display: table-row;
    }
    .Cell
    {
        display: table-cell;
        border: solid;
        border-width: thin;
        padding-left: 20px;
        padding-right: 20px;
    }
</style>

<head>
<script src ="Bind_script.js">
</script>
</head>    
<h1>"The dns ip is: " <span id="myID"></span></h1>

    <div class="Heading">
        <div Class="Cell">
            <p>G</p>
        </div>
        <div Class="Cell">
            <p>facebook.com</p>
        </div>
        <div id="test">
            <span id="h" class="Cell">
                <p>H</p>
            </span>
            <span id="e" class="cell">
                <p>E</p>
            </span>
           <span id ="Time" class="Cell">   
                <P> </P>                
             </span>
        </div>


        <div Class="Cell">
            <p></p>
        </div>
    </div>



</html>


This is part of separate node.js script - Bind_script.js" which is already binded in the html page. 


function update_BG(col) {
  window.addEventListener('load', function() {
  console.log('All assets are loaded')
  document.getElementById(col).style.background = "green";
})
}

const dns = require('dns');


    dns.lookup('facebook.com', function(err,result){
    if(result='157.240.23.35'){
         update_BG("h")
    }

    });

Expected: The span id ('h') should update with green color once after the script is executed.

Actual: I am getting following error

ReferenceError: window is not defined"

HariUmesh
  • 71
  • 1
  • 9
  • 1
    `window` only exists in browser. You can't run that in node environment. Also should be `window.onload = start` (without `()` ) – charlietfl Sep 07 '19 at 16:29
  • 1
    Could you give us some more information on what is happening to Bind_script.js before it is loaded in your html? – Webber Sep 07 '19 at 16:30

3 Answers3

2

The order in which you do things is important.

To get a better understanding of window.onload and document.onload, see this answer on stack overflow on window onload vs document onload.

In general there are a few steps there are a few steps that always happen in the same order:

  1. Transpiling nodejs code to browser javascript code (if applicable)
  2. Browser downloads html file
  3. Browser requests subsequent files like scripts and styles
  4. Window gets loaded (window load event)
  5. DOM content gets loaded (DOMContentLoaded event)
  6. Document (any remaining css and images) gets loaded (document load event)

Only when DOMContentLoaded event fires, you're able to manipulate your DOM.

You may attempt the following:

To run the script before all assets are loaded

window.addEventListener('DOMContentLoaded', function() {
  console.log('DOM is loaded')
  document.getElementById("p").style.background = "green"
})

or after all assets are loaded

window.addEventListener('load', function() {
  console.log('All assets are loaded')
  document.getElementById("p").style.background = "green"
})

Example here.

Edit for use case in comment

If you also have to change the background somewhere else in your code, you can place this functionality in a function, like so;

function colorParagraphsBackground() {
  document.getElementById("p").style.background = "green"
}

window.addEventListener('DOMContentLoaded', function() {
  console.log('DOM is loaded')
  colorParagraphsBackground()
})
Webber
  • 4,672
  • 4
  • 29
  • 38
  • Thanks @Webber, this by the way solved my problem. but i need to call/invoke this built in function based on certain condition then only the color should changed. iam updating the Node.js script part above with the condition applied. – HariUmesh Sep 12 '19 at 09:45
  • 1
    @HariUmesh If it solved your problem, would you be so kind to upvote and accept the answer? I've updated my answer to account for your usecase as described in your comment. – Webber Sep 12 '19 at 09:56
0

I just checked your code and was able to make it work. Keep in mind that linking a script inside the head tag can cause issues because when the script is executed the rest of the html document has not loaded yet. Wrap your html elements in a body tag and then add the script below. This should work.

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>My Page</title>
</head>

<body>
  <h1>"The dns ip is: " <span id="myID"></span></h1>

  <div class="Heading">
    <div Class="Cell">
        <p>G</p>
    </div>
    <div Class="Cell">
        <p>facebook.com</p>
    </div>
    <div id="test">
        <span id="h" class="Cell">
            <p>H</p>
        </span>
        <span id="e" class="cell">
            <p>E</p>
        </span>
       <span id ="Time" class="Cell">   
            <P> </P>                
         </span>
    </div>


    <div Class="Cell">
        <p></p>
    </div>
  </div>
</body>
<script src="Bind_script.js"></script>

</html>
Edgar Chávez
  • 119
  • 1
  • 4
0

the window is the Envirmantal by the browser provide to some thig like scroll width and height add event listener 

window.addEventListener('load', function() {
  document.getElementById("p").style.background = "green";


}
Mohammed Al-Reai
  • 2,344
  • 14
  • 18