How to run html file on localhost3000? [duplicate] - javascript

This question already has answers here:
Serve HTML with Express
(3 answers)
Closed 3 months ago.
I have all my .js files and html linked to my server file. but when I lunch localhost3000, I get "cannot get/"
I tried anything I though could be helpful but couldn't fix the problem. Anyone knows how to fix it?
I have this for my server side
const express = require('express');
const app = express();
app.listen(3000, () => console.log('listening at port 3000!'));
app.use(express.static('codefreeze.html'));
and I have this for client side
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="codefreeze.js"></script>
<link rel="stylesheet" href="codefreeze.css">
<link href = "https://fonts.googleapis.com/css?family=Schoolbell&v1" rel="stylesheet">
<title>DIARY</title>
</head>
<body onload="Name()">
<h1>HELLO!</h1>
<p>Welcome <span id="name"></span></p>
<p id="date"></p>
<script>
document.getElementById("date").innerHTML = DATE();
</script>
<div id="user">
<label id="lbl1">Passage #1</label><br>
<textarea id="psg1" rows="10" cols="30"></textarea><br>
</div>
<button id="save" onclick="save()">SAVE</button>
<button id="add" onclick="add()">ADD</button>
<button id="delete" onclick="del()">DELETE</button>
</body>
</html>
I know something I'm doing is wrong but I cannot seem to find what.

app.get("/", (req, res) => {
response.sendFile(*your file path*);
});
This should work

Related

Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist. index.html:1

I'm making a small programm here in HTML/JS and I'm getting an error I've never seen before.
Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.
This is my code.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div>
<label for="lgn">Login:</label>
<input name="lgn" type="text" class="login-text">
</div>
<div>
<label for="psswrt">Password:</label>
<input name="psswrt" type="password" class="password-text">
</div>
<button class="submit-button">Submit</button>
<div class="answer-display"></div>
<script src="script.js"></script>
</body>
</html>
script.js
let loginData = ["test login"]
let passwordData = []
const lgn = document.querySelector(".login-text")
const pswrt = document.querySelector(".password-text")
const btn = document.querySelector(".submit-button")
const ansr = document.querySelector(".answer-display")
Please help

Access Data During HTML form Post Back

I'm re-teaching myself web development after 15-years of no web development. I'm currently learning Node.js and ExpressJS. I have a registration form on index.html. I'm trying to transfer the data entered to a form on response.html. When I click Submit, the form is posted to response.html. In response.html under Devtools I see the data under Payload. How do I access this data so I can populate the form using client-side JavaScript on response.html?
File Structure
server.js
var express = require('express');
var bodyParser = require('body-parser');
var app = express();
// Create application/x-www-form-urlencoded parser
var urlencodedParser = bodyParser.urlencoded({ extended: false });
app.use(express.static(`${__dirname}/static`));
app.get('/index.html', function (req, res) {
res.sendFile( __dirname + "/" + "index.html" );
});
app.post('/response.html', urlencodedParser, function (req, res) {
res.sendFile(`${__dirname}/static/response.html`);
});
var server = app.listen(8000, function () {
var host = server.address().address;
var port = server.address().port;
console.log(`Server is listening onhttp://${host}:${port}`);
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration</title>
</head>
<body>
<h1>Registration Form</h1>
<form action="/response.html" method="POST">
<label>First Name: <input type="text" name="first_name"><br></label>
<label>Last Name: <input type="text" name="last_name"></label>
<input type="submit" value="Submit">
</body>
</html>
response.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Verify</title>
</head>
<body>
<h1>Verify Data</h1>
<form action="/process_final" method="POST">
<label>First Name: <input type="text" name="first_name"><br></label>
<label>Last Name: <input type="text" name="last_name"></label>
<input type="submit" value="Submit">
</body>
<button id='getHeaders' type='button'>Get Headers</button>
<script src='./response.js'></script>
</body>
</html>
My thinking is this will unload some of the processing from the server. I am aware of templating engines such as ejs and handlbars. I'm also aware of session storage and local storage. I'm reluctant to use storage since there may be sensitive data used in the final product. Attached are screenshots of the folder structure and html files. Also included is the html code and server.js.
After seven hours of searching the web, my conclusion is this is not possible. From what I read accessing the header information using client-side JavaScript is not possible. There are a few exceptions such as User Agent though.
You can access the data in the server side using req.body.first_name and req.body.last_name or you can destructure it like const { firstname, lastname } = req.body

Firefox addon popup JavaScript not working

My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<title>Youpotify</title>
</head>
<body>
<div class="download">
<div class="video">
<button id="video">Download this video</button>
</div>
<div class="playlist">
<button id="playlist">Download this playlist</button>
</div>
<div class="channel">
<button id="channel">Download this channel</button>
</div>
</div>
<script>
document.getElementById("video").addEventListener("click", () => {
document.getElementById("video").style.backgroundcolor = "red";
});
</script>
</body>
</html>
I loaded this addon on Temporary Extension and I click the button but the background color did not change.
I wanted to run my JavaScript file in firefox addon popup HTML file, but it didn't work.
There are a couple of potential issues here:
First, inline Javascript (inside <script></script> tags) is not permitted by default.
To include Javascript to your popup, you need to put it into a separate Javascript file and reference is with:
<script src="index.js"></script>
where your index.js is in the same folder and has your code:
document.getElementById("video").addEventListener("click", () => {
document.getElementById("video").style.backgroundColor = "red";
});
Second,
document.getElementById("video").style.backgroundcolor = "red";
has incorrect attribute, it should be style.backgroundColor with a capital C.

angular is not defined In AngularJS

I am new to AngularJS and currently, I am doing controllers in AngularJS, but I don't know I got an error angular is not defined Line number 21 if someone knows the issue inform me.
<!DOCTYPE html>
<html lang="en" ng-app="myLangApp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" integrity="sha512-7oYXeK0OxTFxndh0erL8FsjGvrl2VMDor6fVqzlLGfwOQQqTbYsGPv4ZZ15QHfSk80doyaM0ZJdvkyDcVO7KFA==" crossorigin="anonymous" referrerpolicy="no-referrer" async></script>
</head>
<body>
<div ng-controller="language">
Select your favorite language:
<button ng-click="selectLanguage('PHP')">PHP</button>
<button ng-click="selectLanguage('javascript')">javascript</button>
<button ng-click="selectLanguage('cpp')">cpp</button>
<button ng-click="selectLanguage('java')">java</button>
<p>You have selected: {{ myFavLang }}</p>
</div>
<script>
var app = angular.module('myLangApp', []);
app.controller('language',($scope)=>{
$scope.myFavLang = 'None';
})
</script>
</body>
</html>
just add simple script to load the angular
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js" ></script>

How to fix Uncaught TypeError: Cannot read property 'addEventListener' of null (not related to position of script file...I think) [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I am completely new to JavaScript, and I can't figure out why I'm getting this error: Uncaught TypeError: Cannot read property 'addEventListener' of null.
I followed the advice posted in response to a similar question and put the file containing my JavaScript in the bottom of my body, but that didn't fix it. I also tried making the button onclick=checkValidity(), but that didn't work either.
document.getElementById("loginButton").addEventListener("click",
checkValidity);
function checkValidity() {
var usrName = document.getElementById("inputUsername").value;
var usrPswd = document.getElementById("inputPswrd").value;
if(usrName == "admin" && usrPswd == "123"){
window.open("HtmlPage2.html");
}
else {
alert("Your username and password are incorrect.");
}
}
and the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Document</title>
</head>
<body>
<div class=wrap>
<input type="text" id="inputUsername">
<p>Username</p>
<input type="password" id="inputPswrd">
<p>Password</p>
<button id="loginButton">Log in</button>
<p id="login"></p>
</div>
<script type="text/javascript" src="Script.js" async></script>
</body>
</html>
What I want the code to do is check whether the input in the inputUsername and inputPswrd match that specified in the if...else function, and if so, open a new window; otherwise alert an error message.
EDIT: If I move all the code above to the top of my JS file, it will work as intended and open a new window, but then the code for that new page won't run (but the new page code does run it's at the top of my JS file). The error message I get when the new window opens is line 1: Uncaught TypeError: Cannot read property 'value' of null at Script.js:1.
Additional code:
JS for HTML page 2:
document.getElementById("greeting").innerHTML="Welcome";
document.getElementById("productButtonOne").addEventListener("click",
addToCart);
document.getElementById("productButtonTwo").addEventListener("click",
addToCart);
document.getElementById("productButtonThree").addEventListener("click",
addToCart);
var clicks = 0;
function addToCart() {
clicks = clicks + 1;
document.getElementById("cartProductsTotal").innerHTML = "You have " +
clicks + " items in your shopping cart.";
}
Beginning of HTML for page 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Document</title>
</head>
<body>
<div class=wrap>
<h1 id="greeting"></h1>
<div id="productOne" class="cartItem">
<button id="productButtonOne" class="cartItems">Add to cart</button>
<img src="monaLisa.jpg" id="monaLisaImage">
<h2 class="productDescriptions">Mona Lisa</h2>
<p>This painting is great.</p>
<span class=price>This item costs $10.</span>
</div>
Place the scirpt tag after body it will work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<title>Document</title>
</head>
<body>
<div class=wrap>
<input type="text" id="inputUsername">
<p>Username</p>
<input type="password" id="inputPswrd">
<p>Password</p>
<button id="loginButton">Log in</button>
<p id="login"></p>
</div>
<script type="text/javascript" src="Script.js" async></script>
</body>
<script>
document.getElementById("loginButton").addEventListener("click", checkValidity);
function checkValidity() {
var usrName = document.getElementById("inputUsername").value;
var usrPswd = document.getElementById("inputPswrd").value;
if(usrName == "admin" && usrPswd == "123"){
window.open("HtmlPage2.html");
}
else {
alert("Your username and password are incorrect.");
}
}
</script>
</html>
remove this line <script type="text/javascript" src="Script.js" async></script>, I think your code loads the wrong script.

Categories