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>
Related
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 have develop a todo app. where user insert some values and it gets save on the screen. now i want to save the values into localstorage.but its not getting saved instead i am getting a empty {}.
here is the javascript code
//crete element from input box and delete
let knoo = document.getElementById('kno')
let box= document.getElementById('txt')
let sub= document.getElementById('sub').addEventListener('click',()=>{
let para = document.createElement('ul')
para.innerText= box.value
knoo.appendChild(para)
box.value=''
localStorage.setItem('key', JSON.stringify(para))
//styling
para.addEventListener('click', ()=>{
para.style.textDecoration = 'line-through'
})
//delete
para.addEventListener('dblclick', ()=>{
knoo.removeChild(para)
})
})
here is the 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>
</head>
<body>
<h2>hi</h2>
<div id="hello">
<h1>hello</h1>
</div>
<button id="btn">delete</button> <br>
<br>
<input type="text" id="txt">
<button type="submit" id="sub">+</button>
<div id="kno"></div>
<script src="main.js"></script>
</body>
</html>
That is because you use JSON.stringify with a html element which will not work and it will always produce {}.
The JSON.stringify() method converts a JavaScript object or value to a JSON string
I solution is to use array to store the value for para and use JSON.stringify for the array
let knoo = document.getElementById('kno')
let box= document.getElementById('txt')
let storedvalue = []
if(localStorage.getItem('key')){
storedvalue = localStorage.getItem('key');
}
let sub= document.getElementById('sub').addEventListener('click',()=>{
let para = document.createElement('ul')
para.innerText= box.value
knoo.appendChild(para)
box.value=''
storedvalue.push(para.innerText)
localStorage.setItem('key', JSON.stringify(storedvalue))
//styling
para.addEventListener('click', ()=>{
para.style.textDecoration = 'line-through'
})
//delete
para.addEventListener('dblclick', ()=>{
knoo.removeChild(para)
})
})
<!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>
<h2>hi</h2>
<div id="hello">
<h1>hello</h1>
</div>
<button id="btn">delete</button> <br>
<br>
<input type="text" id="txt">
<button type="submit" id="sub">+</button>
<div id="kno"></div>
<script src="main.js"></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 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.