I'm trying to create an simple web page to test the crypto module in js, but even when i use browserify my brower returns Uncaught ReferenceError: require is not defined.
My script.js:
const { createHash } = require('crypto');
function hasher() {
const password = document.getElementById("js_n_password").value;
const hash = createHash(password);
document.getElementById("hashed").innerHTML = password;
}
My index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="bundle.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Web Hash</h1>
<form class="input" id="input">
<label for="n_password">Password:</label>
<input type="password" id="js_n_password" name="n_password">
</form>
<button onclick="hasher()">hash it</button>
<p class="hashed" id="hashed"> </p>
</body>
</html>
Why browserify isn't working and how can i make it work?
PS: add module.exports = function (n) { return n * 111 } to script.js doesn't change anything.
Related
The library I am using: https://github.com/icambron/moment-countdown
My code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- https://github.com/icambron/moment-countdown -->
<script src="moment.min.js"></script>
<script src="countdown.min.js"></script>
<script src="moment-countdown.min.js"></script>
</head>
<body>
<input type="datetime-local" id="timeInputHTML" onchange="mainfunc()>
<p id="pel"></p>
<script>
function mainfunc() {
timeVar = document.getElementById("timeInputHTML").value;
// var timeInputVar = moment("2045-01-01 00:00:00").countdown().toString();
var timeInputVar = moment(timeVar).countdown().toString();
document.getElementById("pel").innerHTML = timeInputVar;
}
// Run above function every 1 second
setInterval(mainfunc, 1000);
</script>
</body>
</html>
The question: How do I make the variable timeVar when it obtains its values from timeInputHTML in the HTML code, not contain contain a T in the middle like so: "2018-05-05T14:30" I believe this is what is wrong with my code and is causing the Uncaught TypeError if it is not the issue then please can you explain to me what is please?
The image / screenshot:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!-- https://github.com/icambron/moment-countdown -->
<script src="moment.min.js"></script>
<script src="countdown.min.js"></script>
<script src="moment-countdown.min.js"></script>
</head>
<body>
<input type="datetime-local" id="timeInputHTML" onchange="mainfunc()">
<p id="pel"></p>
<script>
function mainfunc() {
timeVar = document.getElementById("timeInputHTML").value;
// var timeInputVar = moment("2045-01-01 00:00:00").countdown().toString();
var timeInputVar = moment(timeVar).countdown().toString();
document.getElementById("pel").innerHTML = timeInputVar;
}
// Run above function every 1 second
setInterval(mainfunc, 1000);
</script>
</body>
</html>
your are missing " this in input function it should be like this
<input type="datetime-local" id="timeInputHTML" onchange="mainfunc()">
I'm making a HEX to RGB colour converter and I have done all the things I think you are suppose to do and that is my JS code and HTML code
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Colour Converter</title>
</head>
<body>
<center>
<h1>Hex - RGB</h1>
<input id="hex">
<input id="rgb">
<script src="Main.js"></script>
</center>
</body>
</html>
Javascript
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input",ToHex);
function ToHex() {
console.log("Test")
}
and I get this Error
Uncaught TypeError: Cannot read property 'addEventListener' of null
at Main.js:3
I just got started learn JavaScript and I'm fairly new
You should make a few changes:
First, you need to run your script after the entire DOM has loaded. If you run your script before the DOM has fully loaded, then your document.getElementById won't be able to find the element and will return null.
Second, you also need to change ToHEX() to ToHEX in your addEventListener. The former was executing ToHEX immediately and returning nothing. The latter will pass the function to the addEventListener. Edit: It looks like you just updated your question to address this.
Here is the corrected code:
document.addEventListener("DOMContentLoaded", function(event) {
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input",ToHEX);
function ToHex() {
console.log("Test")
}
});
Lastly, you should also move your <script src="Main.js"></script> line back into the header -- it doesn't need to be inserted after your HTML. Including the script after your HTML doesn't mean that it will run after the page has loaded.
This code seems to work. I fixed code order and typo error.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Colour Converter</title>
</head>
<body>
<center>
<h1>Hex - RGB</h1>
<input id="hex">
<input id="rgb">
<script>
function ToHex() {
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", ToHex);
</script>
</center>
</body>
</html>
Thanks Bassem Rabia It works
HTML
<!doctype html>
<html lang="en">
<head></head>
<body>
<input id="hex">
<input id="rgb">
<script src="main.js"></script>
</body>
</html>
JavaScript
document.addEventListener("DOMContentLoaded", function(event){
function toHex(){
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", toHex);
});
Also, you have 2 mistakes in this line
HexInput.addEventListener("input",ToHEX());
the name of the method is misspelled
When you attach the event handler you just pass the reference to the function and not the invocation
So this would be the correct one
HexInput.addEventListener("input",ToHex);
http://prntscr.com/ic1vom
<!doctype html>
<html lang="en">
<head></head>
<body>
<input id="hex">
<input id="rgb">
<script src="main.js"></script>
</body>
</html>
main.js
document.addEventListener("DOMContentLoaded", function(event){
function toHex(){
console.log("Test");
}
var HexInput = document.getElementById("hex");
var RGBInput = document.getElementById("rgb");
HexInput.addEventListener("input", toHex());
});
I keep getting this error: {"code":"MethodNotAllowedError","message":"POST is not allowed"} when submitting my HTML form. My Javascript seems to work fine because it works when I put it inside the HTML in a script tag, but when I try to use it in its own file, I get this error on a form submit. I am launching this code from Adobe Dreamweaver and am using the realtime preview mode in Chrome/Safari. Here is my code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link href="dopeStyles.css" rel="stylesheet" type="text/css">
</head>
<body>
<form action="" method="post" id="numberForm">
<label for="enterNumber">Enter any number to multiply it by 10: </label>
<input type="number" id="enterNumber"><br>
<input type="submit"><br>
<label for="result">Result: </label>
<input type="number" id="result">
</form>
</body>
<script src="trippyJavascript.js"></script>
</html>
& here is the Javascript:
function calculate()
{
'use strict';
var numInput = document.getElementById('enterNumber').value;
numInput*= 10;
document.getElementById('result').value = numInput;
return false;
}
function init()
{
'use strict';
document.getElementByID('numberForm').onsubmit = calculate;
}
window.onload = init;
Hi i have tested you code.The mistake is 'document.getElementById' in this way not 'document.getElementByID'.
function calculate()
{
'use strict';
var numInput = document.getElementById('enterNumber').value;
numInput*= 10;
document.getElementById('result').value = numInput;
return false;
}
function init()
{
'use strict';
document.getElementById('numberForm').onsubmit = calculate;
}
window.onload = init;
I'm just starting out in Javascript, and I'm trying to put my scripts in a separate file. They work just fine when they're in the html file, but as soon as I move them to their own separate file it stops working.
Here's my html file:
<!DOCTYPE html>
<head>
<meta lang = "en">
<link rel="stylesheet" type="text/css" href="css/mainStyle.css">
<script src="js/script1.js"></script>
<title>Web Dev Practice</title>
</head>
<body>
<h1>First JavaScript Example</h1>
<button type="button" onclick="changeText()">ClickMe!</button>
<p id="demo">This is just a test.</p>
</br>
</br>
<h1>Second JavaScript Example</h1>
<img id="lightBulb" onclick="changeImage()" src="res/img/pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn it on or off.</p>
</body>
</html>
And here's my js file:
<script>
function changeText(){
var string_first = "This is just a test.";
var string_second = "Woah, it actually works!";
if(document.getElementById("demo").innerHTML == string_first){
document.getElementById("demo").innerHTML = string_second;
} else{
document.getElementById("demo").innerHTML = string_first;
}
}
<script>
function changeImage(){
var image = document.getElementById('lightBulb');
if(image.src.match("bulbon")){
image.src = "res/img/pic_bulboff.gif";
}
else{
image.src = "res/img/pic_bulbon.gif";
}
}
</script>
The <script> tags are html things, not javascript, so you don't need (and can't have) them in your external files. What browser are you using? Many have a built in console that can help you see what errors, if any, your page is throwing.
I have the following code that works:
<html>
<head>
<script>
function loaded(){
oFormElement = document.forms['test form'].elements["txtStatus"];
oFormElement.value = "just loaded";
}
</script>
</head>
<body onload="loaded()">
<p>my first socket.io test</p>
<form id = "test form">
<input type="text" id ="txtStatus" value="">
</form>
</body>
</html>
now, if I include the reference to socket.io, it stops working
<html>
<head>
<script src="socket.io/socket.io.js">
<script>
function loaded(){
is this because socket.io handles from elements in it's own way, or is because the browser cannot find socket.io ? Is there any way to debug this/fix this ?
You need to close the first <script> tag...
<html>
<head>
<script src="socket.io/socket.io.js"></script>
<script>
function loaded(){
// ...