values from input box is not saving on localstorage - javascript

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>

Related

I'm trying to make the users audio downloadable but having issues

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!

How to inject working alert code from a HTML text form?

I am fairly new coding in JavaScript and web development, and I was wondering if there was any way to input an alert through an HTML text form and have it run on another page after it has been submitted, right now this is what I have.
index.html
<!DOCTYPE html>
<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>form</title>
</head>
<body>
<form action="results.html" method="GET">
<div>
<label>Name</label> <input style="width: 400px;" size=400px type="text" name="name" id="name" placeholder="username" required>
</div>
<button type="reset">Reset</button>
<button type="submit">Submit</button>
</form>
</body>
results.html
<!DOCTYPE html>
<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>Results</title>
</head>
<body>
<div id="results"></div>
Back to Form
<script>
const resultsList = document.getElementById('results')
new URLSearchParams(window.location.search).forEach((value,
name) => {
resultsList.append(`${name}: ${value}`)
resultsList.append(document.createElement('br'))
})
</script>
</body>
I want to get something like this
My input
What I am trying to achieve
You have to receive a variable that you send with the "get" method.
With the window.location object. This code gives you GET without the question mark.
let myTextAlert = window.location.search.substr(1)
(You can use split() method to get rid of &)
Next in Your div or insert js:
<div id="results">
<script>
alert("This page Says:" + myTextAlert);
</script>
</div>

Hi guys how can i print in #Ausgabe with a button click

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>

how to appendchild with addeventlistener

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>

adding simple event listener

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.

Categories