How to display value from a Javascript function onto an HTML page?

Question

index.js file

const {BrowserWindow, app, globalShortcut} = require('electron');
const url = require('url');
const si = require('systeminformation');



let win = null

function boot() {
//console.log(process.type)
win = new BrowserWindow({
    width: 600,
    height: 500,
    frame: false
})

var output = document.getElementById("output");
output.innerHTML = "hello world"
//win.loadURL(file:'//${__dirname}/index.html')
win.loadURL('file://' + __dirname + '/index.html');
win.on('closed', () => {
    win = null
})
}

app.on('ready', boot);

**index.html file **

<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" href="style.css">

</head>
<body>
<div id="content">
    <header>
        <div class="option" id="close">X</div>
        <div class="option" id="minimize">-</div>
    </header>
<div id="text">z</div>


 <h1>
  <p id="output"></p>
</h1>
</div>
<script src="./assets/js/script.js"></script>
</body>
</html>

So I am using the value from the following snippet to be display into my HTML page

var output = document.getElementById("output");
output.innerHTML = "hello world"

Through this on my HTML page:

<h1>
  <p id="output"></p>
</h1>

But it gives me the error:

"reference error :document is not defined "

By the way I am creating an Electron app. Just trying to display some data from my javascript page to html page.

GKK · Accepted Answer · 2017-09-10 15:21:27Z

2

As per the code you provided, you are referring to the document before it gets loaded.

var output = document.getElementById("output"); // <- here and
output.innerHTML = "hello world";
win.loadURL('file://' + __dirname + '/index.html'); // <- here

Check if the DOM is ready before manipulating it.

answered Sep 10, 2017 at 15:21

GKK

1085 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mohammad Qasim Over a year ago

did the same as you suggested. Added the code before the main call that is win.loadURL function.

GKK Over a year ago

Move var output = document.getElementById("output"); output.innerHTML = "hello world"; code block to script.js file. It'll get executed when the DOM is ready.

GKK Over a year ago

Be sure to remove the code block I mentioned above from index.js

Supriya · Accepted Answer · 2017-09-10 15:21:13Z

0

The name of your JavaScript file is index.js. But you are including script.js file in the script tag. Change the script tag to specify path of index.js file:

<script src="./path_of_file/index.js"></script>

answered Sep 10, 2017 at 15:21

Supriya

172 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to display value from a Javascript function onto an HTML page?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related