I have tried this code to no avail.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="list" cols="30" rows="10"></textarea>
<input type="button" id="btn" value="submit">
<script>
var string = document.getElementById('list');
var btn = document.getElementById('btn')
btn.addEventListener('click', () => {
var link = 'http://localhost/oke.php?list=' + string.value;
oke(link);
});
async function oke(data) {
var post = await fetch(data);
var resp = await post.json();
}
</script>
</body>
</html>
for example, the value of Textarea is as follows
tiger
rhino
elephant
wolf
and if possible I want after one of the lists has been processed, it will disappear from the Textarea.
thanks
Related
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>
This question already has answers here:
How to change the Content of a <textarea> with JavaScript
(6 answers)
Closed 2 years ago.
How can add the following JavaScript code (a random number generator)?
function randomNumber(max) {
return Math.floor(Math.random() * max + 1);
}
const list = []
while(list.length < 25) {
let nbr = randomNumber(25)
if(!list.find(el => el === nbr))
list.push(nbr)
}
console.log("list",list)
into this textarea and displaying them with DOM?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
<script src="app.js"></script>
</body>
</html>
// Using an id to get the element
const textarea = document.getElementById('area');
function randomNumber(max) {
return Math.floor(Math.random() * max + 1);
}
const list = []
while(list.length < 25 ){
let nbr = randomNumber(25)
if(!list.find(el => el === nbr))
list.push(nbr)
}
// Set the value to the list
textarea.value = list;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<textarea name="" id="area" cols="30" rows="10"></textarea>
<script src="app.js"></script>
</body>
</html>
I am trying to create an HTML form which consists of title, text area , post button and clear button. My aim is to clear the text area if the user clicks the Clear button, but before that an alert to appear asking the user if he is sure he wants to clear the text. If the user Types OK, the text area to be erased, if the user types Cancel, the method to be cancelled.
I tried the following code, but I have noticed that whatever input I type, or button I press, the text in the text area is erased by default. How do I prevent that and therefore make it work?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="global.css">
</head>
<body>
<form >
<input type="text" id="title" name="title">
<textarea id="blog_textarea" name="blog" placeholder="Your Text">
</textarea>
<br><button type="submit" id="post" name="submission" value="Submit">Post</button>
<button id="clear_button" onclick="clearFun()" >Clear</button>
</form>
<p id="demo"></p>
<script>
function clearFun() {
var par_output="";
var txt = prompt("To confirm, please type OK, or to stay type Cancel ");
if (txt == "OK" || "ok") {
document.getElementById("blog_textarea").value = "";
} else {
par_output = "Please type OK to confirm or Cancel";
}
document.getElementById("par_output").innerHTML = demo;
}
</script>
</body>
</html>
Also there is Jsfiddle if that helps
Many Thanks guys
you need to write both condition seperatly and form tag is also effect to clear it
if (txt == "OK" ||txt == "ok")
This should work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<textarea id="textarea"></textarea>
<br />
<button id="clearbutton">Clear</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#clearbutton').click(async () => {
const clear = await prompt('Clear? Type ok');
if (clear.toLowerCase() === 'ok') {
$('#textarea').val('');
}
});
</script>
</body>
</html>
In plain JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<textarea id="textarea"></textarea>
<br />
<button id="clearbutton">Clear</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
document
.getElementById('clearbutton')
.addEventListener('click', async () => {
const clear = await prompt('Clear? Type ok');
if (clear.toLowerCase() === 'ok') {
document.getElementById('textarea').value = '';
}
});
</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>
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.