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.
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.
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>
Related
I have a html file and 2 JavaScript files: mainscript.js and script1.js. I inject the script1.js inside the mainscript.js. However, what happens is that by calling script1.js, the htmltags created by mainscript.js got removed. Any idea why this happens?
html code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Linear Call</title>
</head>
<body>
<div id="main"><p>hi</p></div>
<script src="js/recursion_linear/MainScript.js">
</script>
</body>
</html>
mainscript.js:
const loadScript = async(url) => {
const response = await fetch(url)
const script = await response.text()
eval(script)
}
var s = document.createElement("span");
document.write("<br>");
s.innerText="This is main script";
s.id="mainscript";
document.body.append(s);
const scriptUrl_1 = "js/recursion_linear/Script1.js"
loadScript(scriptUrl_1)
script1.js:
document.write("<br>");
var s = document.createElement("span");
s.innerText="This is Script1";
s.id="script1";
document.body.append(s);
The output is
This is Script1
While the expected one is
This is main script
This is Script1
I have node js running a server that loads an html file with express. This html file has javascript that hides and shows a picture on the page with a button. I want to use the same function to hide and show the picture without the need for a button by calling the method in the main.js file that contains the rest of the application code. However, whenever I call the method it gives me a document not defined error. The button that calls the same function when clicked works however. I am not sure what the problem is (new to node).
web.js:
const hider = require("./public/script");
function site(){
const express = require('express');
const path = require('path');
const port = 3000;
const app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.listen(port, () => console.log("Server Started on: 127.0.0.1:"+port));
};
function hidePic(){
hider.hide();
}
module.exports = { site , hidePic}
File loaded by express. The button to hide the image works.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="hide()">Try it</button>
<div id="picture1">
<img src="img.jpg" alt="img">
</div>
<script src="script.js"></script>
</body>
</html>
script.js:
function hide() {
var x = document.getElementById("picture1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
module.exports = { hide }
Main program
main.js:
const web = require("./website")
web.site();
web.hidePic(); //Want this to hide picture in on webserver from within this file
I currently have an html page where I use javascript to add a link to a different port on the same host, as in the code below.
If I'm on a machine with address 192.168.1.10:8090 the link provided is 192.168.1.10:5000
I'm trying to the same function to a wordpress site, but can't work out how to add javascript and add a link to the page (or reference an existing link).
I've not used wordpress before, so grateful for any help with this.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
</head>
<body>
<div id="ext_link" style="text-align:center">
<script>
window.onload = function(){
var x = location.hostname;
var init = "http://";
var link_stem = x.concat(':5000');
var link_address = init.concat(link_stem);
console.log(link_address);
var a = document.createElement('a');
var linkText = document.createTextNode("Link to Port 5000");
a.appendChild(linkText);
a.title = "LinkToPort5000";
a.href = link_address;
document.getElementById("ext_link").appendChild(a);
};
</script>
</div>
</body>
</html>
I'm trying to create and save files using javascript.
This is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.con/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/styles.css">
</head>
<body>
<div class="container" id="form-container">
<textarea class= "form-control" placeholder ="File Contents..." rows="10"></textarea>
<input id= "content" class="form-control" placeholder="Input Text Here...">
<button id="createButton" class="btn btn-success">Create File</button>
</div>
</body>
<script>
require('./renderer.js')
</script>
</html>
The page looks like this currently. For some reason I don't understand, the button to create file doesn't work I click it but nothing happens. It does not create a file, nor does it open a location where you want to save the file.
This is my Javascript code:
var app = require('electron').remote;
var dialog = app.dialog;
var fs = require('fs');
document.getElementbyId('createButton').onclick = () => {
dialog.showSaveDialog((fileName) => {
if(fileName === undefined){
alert("You didnt save the file");
return;
}
var content = document.getElementbyId('content').value;
fs.writeFile(FileName, content, (err) => {
if(err) console.log(err);
alert("The file has been succesfully saved")
})
});
};
Why won't the 'Create File' button work?
The function you are trying to use is called document.getElementById, using the camel-case naming convention. Your code would look like this, when corrected:
//... require statements as in your code
document.getElementById("createButton").onclick = () => {
// ...
var content = document.getElementById("content").value;
// ...
}
I'm new to JavaScript and already encountered a problem. When I run the code and the browser pops up, it[browser] does not show anything. What I have is the testMethod.js file with one method:
function testMethod(num1, num2){
var value = num1 + num2;
return value;
}
and an HTML file from where I'm trying to run:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> My JavaScript</title>
<script language = "javascript" src = testMethod.js"></script>
</head>
<body>
<script language = "javascript" type = "text/javascript">
// var getValue = testMethod(2,3);
document.write("The result is " + testMethod(5,3));
</script>
<noscript>
<h3> This site requires JavaScript</h3>
</noscript>
</body>
</html>
The code is not implementing the result at all. It shows only a blank page browser.
It seems you have a quote missing in the html, it should say src="testMethod.js" where you are including the script in the first place.