I am trying post a Webhook using javascript. My goal is to allow the user to type their Webhook URL, and when they click "send", it should send my Webhook message.
I am new to Javascript and not sure what I am doing wrong!
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>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="background">
<input type="text" id="input" placeholder="paste webhook here">
<button id="send" onclick="sendMessage()">send</button>
</div>
</body>
<script src="index.js"></script>
</html>
Javascript:
function sendMessage() {
let grabData = document.getElementById("input");
var request = new XMLHttpRequest();
request.open("POST", grabData);
request.setRequestHeader('Content-type', 'application/json');
var myEmbed = {
title: "Test Successful! 🥳",
color: hexToDecimal("#2A67E8")
}
var params = {
username: "objexive",
avatar_url: "https://i.ibb.co/7X9szNY/exhbition-webhookicon1.png",
embeds: [ myEmbed ]
}
request.send(JSON.stringify(params));
// function that converts a color HEX to a valid Discord color
function hexToDecimal(hex) {
return parseInt(hex.replace("#",""), 16)
}
}
for anyone that has the problem, it was a very simple fix. add .value to "grabData"
Related
I'm trying to make an audio editor but can't seem to get audio value. I've tried document.getElementById("audio).value and document.getElementById("audio").data but both return undefined
<!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>Document</title>
</head>
<body>
<input id="file" type="file">
<button id="save" onclick="save()">Save</button>
</body>
<script>
var audio;
document.getElementById("file").addEventListener("change",function(e){
var read=new FileReader()
read.onload=function(){
var aud=document.createElement("audio")
aud.id="audio"
aud.src=read.result
document.body.appendChild(aud)
aud.play()
}
read.readAsDataURL(document.getElementById("file").files[0])
})
function save(){
var aud=document.getElementById("audio").value
console.log(aud)
var a=document.createElement("a")
a.href=aud
a.download="test.mp3"
document.body.appendChild(a)
a.click()
}
</script>
</html>
The result is undefined because the audio doesn't has a attribute called value instead of value use src
<!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>Document</title>
</head>
<body>
<input id="file" type="file">
<button id="save" onclick="save(event)">Save</button>
</body>
<script>
var audio;
document.getElementById("file").addEventListener("change",function(e){
var read=new FileReader()
read.onload=function(){
var aud=document.createElement("audio")
aud.id="audio"
aud.src=read.result
document.body.appendChild(aud)
aud.play()
}
read.readAsDataURL(document.getElementById("file").files[0])
})
function save(e){
var aud=document.getElementById("audio").src;
var a=document.createElement("a")
a.href=aud
a.download="test.mp3"
document.body.appendChild(a)
a.click()
}
</script>
</html>
Run code snippet
If You use it the audio gonna be downloadable!
I got this prompt that makes it change the document.title when the prompt has been submitted, but i want it to make it so that if my prompt equals something, it cancels out the prompt, how to do that?
here is my HTML and JS, also it changes the h1 text, in the snippet it wont change the stackoverflow title cause it's already pre defined.
P.S: i know it's gonna be something small i missed, but pardon me for that i'm still a beginner >_<
const h1 = document.getElementById('h1');
function myFunction() {
let mainTitle = "Enter website title..."
let websiteTitle = prompt("What is your website title?", mainTitle)
if(websiteTitle != null ) {
document.title = websiteTitle;
h1.innerText = websiteTitle;
} else if(document.title === mainTitle) {
websiteTitle = null;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="pets.css">
</head>
<body>
<h1 id="h1">Website Title here!</h1>
<button onclick="myFunction()">Change Website Title</button>
<script src="pets.js"></script>
</body>
</html>
I'm not sure if I understood what you are trying to do, but I'll leave here a snippet with the solution to the problem I think you have:
const h1 = document.getElementById('h1');
function myFunction() {
let mainTitle = "Enter website title..."
let websiteTitle = prompt("What is your website title?", mainTitle)
if(websiteTitle != null ) {
document.title = websiteTitle;
h1.innerText = websiteTitle;
}
if(websiteTitle === mainTitle) {
window.location.reload();
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="pets.css">
</head>
<body>
<h1 id="h1">Website Title here!</h1>
<button onclick="myFunction()">Change Website Title</button>
<script src="pets.js"></script>
</body>
</html>
I can't close a prompt yourself, the user has to do it, you may want to use an input and manually hide it / show it to simulate a prompt.
I want that by pressing a button, an element has been added to my page(DOM).
That's my code:
const input = document.getElementById('test');
const button = document.getElementById('B');
const form = document.querySelector('form')
const message = document.createElement('h1');
function creat () {
document.body.appendChild(message);
console.log(message);
}
form.addEventListener('submit', creat)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<form>
<input id="test" type="text">
<button id="B">submit</button>
</form>
<script src="./app.js"></script>
</body>
</html>
I don't understand why it doesn't work
You need to prevent form submission from redirecting with event.preventDefault(). And create a new h1 element inside the creat function.
And as a bonus, you may need to clear the input after appending the child and stay focused.
const input = document.getElementById('test');
const button = document.getElementById('B');
const form = document.querySelector('form')
function creat (e) {
e.preventDefault();
const message = document.createElement('h1');
message.innerText = input.value;
document.body.appendChild(message);
input.value = ''
input.focus()
}
form.addEventListener('submit', creat)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<form>
<input id="test" type="text">
<button id="B">submit</button>
</form>
<script src="./app.js"></script>
</body>
</html>
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.
I need to add a simple event listener. It just doesn't work even while testing with console.log. Here are my files:
index.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CHAT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form>
<input id='input' cols="30" rows="10"></input>
<button id='send'>Send</button>
</form>
<div id='output' style='background-color: aqua;'> 1 </div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.2/socket.io.js'></script>
<script src="./scripts/sockets.js"></script>
</script>
</html>
sockets.js
var socket = io.connect('http://localhost:3000/chat');
var input = document.getElementById('input');
var send = document.getElementById('send');
var output = document.getElementById('output');
console.log('send');
send.addEventListener('click', () => {
console.log('event listener added');
/*socket.emit('sending', {
input: input.value
});
input.value = '';*/
});
Also I want to admit that path is correct. "Send" was posted in console, but 'event listener added' - was not.