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.
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 want to apply click event on anchor tags but when I click on first then get the data-id value of first and also redirect to href value similarly if I click on second link then get the data-id of second link only and redirect to its href value.
<!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>
One
Two
Three
<script>
const body = document.querySelector('body');
body.onclick = (e) => {
e.preventDefault();
let link = body.querySelector('.link');
console.log(link);
}
</script>
</body>
</html>
This is the code I'm trying but when I click on any of the anchor tag then only first anchor tag accessing.
This is what I did and now it's working perfect.
<!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>
One
Two
Three
<script>
const body = document.querySelector('body');
body.onclick = (e) => {
e.preventDefault();
let anc = e.target;
const data = {
a: anc.getAttribute('data-id')
}
localStorage.setItem('data', JSON.stringify(data));
window.location = anc.getAttribute('href');
}
</script>
</body>
</html>
I'm trying to change the background color of a div element on button press but I'm getting the error Cannot set property 'BackgroundColor' of undefined. The event handler for the button is inside the window.onload event. I thought at that point every element inside the html document would be loaded, but apparently not.
Here is the 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=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.getElementsByClassName("random").style.BackgroundColor= "black";
});
}
</script>
</body>
</html>
try the following code segment.
the issue is document.getElementsByClassName("random") returning an array of elements.So you should select one element from that array and get the style of that element.
And BackgroundColor should be backgroundColor
<!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>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.getElementsByClassName("random")[0].style.backgroundColor= "black";
});
}
</script>
</body>
</html>
You can this out - getElementsByClassName produces error "undefined"
Another alternative could be this.
<body>
<div id="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.getElementById("random").style.backgroundColor= "black";
});
}
</script>
Modify the script as follows and try again:
<!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>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function() {
document.getElementById("button").addEventListener('click', function() {
document.querySelector(".random").style.backgroundColor= "black";
});
}
</script>
</body>
</html>
Look into comments by #Bravo, document.getElementsByClassName("random") returns a HTMLCollection, not a single element - therefore document.getElementsByClassName("random").style is 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>
<div class="random">This should become unreadable</div>
<button id="button">Click me!</button>
<script>
window.onload = function () {
document
.getElementById('button')
.addEventListener('click', function () {
const button = document.getElementsByClassName('random');
for (let index = 0; index < button.length; index++) {
const element = button[index];
element.style.backgroundColor = 'black';
}
// if you will have only one element with class=random or if you only want to apply style to the first element with class=random, then
// button[0].style.backgroundColor = 'black';
// in your case, you should add an id to the element and use id as the selector
});
};
</script>
</body>
</html>
i will create a Checkout system for gastro.
How i can wríte this.
I will create a list than write this on another page "home.php",
than i need a script were i can onclick writeout "deftige KartoffelSuppe" and the price.
i love you guys,
<script>
let Suppe =["Deftige Kartoffelsuppe, 4,80"];
</script>
<button id="btn0">Deftige Kartoffelsuppe</button>
<div id="Ausgabe"></div>
Greedings from Germany
Michael Burat
<!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" />
<title>Static Template</title>
</head>
<body>
<button id="btn0">Deftige Kartoffelsuppe</button>
<div id="ausgabe"></div>
<script>
let suppe = ["Deftige Kartoffelsuppe, 4,80"];
const btn = document.querySelector("#btn0");
const ausgabe = document.querySelector("#ausgabe");
btn.addEventListener("click", () => {
ausgabe.innerHTML = suppe;
});
</script>
</body>
</html>
i changed the id names to lowercase and added a eventListener to handle the click.
innerHTML is what you wanted i guess.
And thanks for loving me btw.
and this is a clean version of coding something like this:
<!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" />
<title>Static Template</title>
</head>
<body>
<button id="btn0">Deftige Kartoffelsuppe</button>
<div id="ausgabe"></div>
<script>
const data = [
{
name: "Deftige Kartoffelsuppe",
preis: "4,80€"
}
];
const btn = document.querySelector("#btn0");
const ausgabe = document.querySelector("#ausgabe");
btn.addEventListener("click", () => {
ausgabe.innerHTML = `${data[0].name} für nur ${data[0].preis}`;
});
</script>
</body>
</html>
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>