JavaScript chatbot - deleting the whole frame rather than just the message

JavaScript chatbot - deleting the whole frame rather than just the message - javascript

I have the following webpage with chatbot inside. When you click a message it deletes it (pop up option) but this also happens (deletion option) when you try to click the outside of the frame and just inside the frame (not on a message) - which I want to prevent.
repl.it:
https://replit.com/#amalsheikh2309/WhisperedRelevantOutsourcing#index.html
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Chat Room</title>
<style>
body {
background-color: #f2f2f2;
}
#chatroom {
width: 500px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
overflow: scroll;
font-family: Arial, sans-serif;
color: #333;
border: 1px solid #ccc;
box-shadow: 2px 2px 2px #ccc;
}
#messages {
height: 350px;
overflow: scroll;
background-color: #fff;
padding: 10px;
border-radius: 3px;
}
#messages div {
margin-bottom: 10px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 3px;
}
#message-input {
padding: 10px;
border-radius: 3px;
border: 1px solid #ccc;
box-sizing: border-box;
width: 100%;
margin-bottom: 10px;
}
#send-button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 16px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="chatroom">
<div id="messages"></div>
<form>
<input type="text" id="message-input" placeholder="Type your message here...">
<button type="submit" id="send-button">Send</button>
</form>
</div>
<script>
const messageInput = document.getElementById('message-input');
const messagesContainer = document.getElementById('messages');
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const message = messageInput.value;
messageInput.value = '';
const messageElement = document.createElement('div');
messageElement.innerText = message;
messagesContainer.appendChild(messageElement);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
});
document.getElementById("messages").addEventListener("click", function(e) {
if (e.target && e.target.nodeName == "DIV") {
var message = confirm("Are you sure you want to delete this message?");
if (message == true) {
e.target.remove();
}
}
});
</script>
</body>
</html>
I can see that the problem lies here
document.getElementById("messages").addEventListener("click", function(e) {
if (e.target && e.target.nodeName == "DIV") {
var message = confirm("Are you sure you want to delete this message?");
if (message == true) {
e.target.remove();
}
}
});
but I am not sure how to prevent it deleting the entire DIV and what to replace that part of the code with.
Thanks in advance.

ok so i figured it out
after you append messageElement text. add classlist of message
then in your if statement
if (e.target && e.target.classList.contains("message")) {
this should only activate click event when you click on a message
<!DOCTYPE html>
<html>
<head>
<title>Chat Room</title>
<style>
body {
background-color: #f2f2f2;
}
#chatroom {
width: 500px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
overflow: scroll;
font-family: Arial, sans-serif;
color: #333;
border: 1px solid #ccc;
box-shadow: 2px 2px 2px #ccc;
}
#messages {
height: 350px;
overflow: scroll;
background-color: #fff;
padding: 10px;
border-radius: 3px;
}
#messages div {
margin-bottom: 10px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 3px;
}
#message-input {
padding: 10px;
border-radius: 3px;
border: 1px solid #ccc;
box-sizing: border-box;
width: 100%;
margin-bottom: 10px;
}
#send-button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 16px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="chatroom">
<div id="messages"></div>
<form>
<input type="text" id="message-input" placeholder="Type your message here...">
<button type="submit" id="send-button">Send</button>
</form>
</div>
<script>
const messageInput = document.getElementById('message-input');
const messagesContainer = document.getElementById('messages');
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const message = messageInput.value;
messageInput.value = '';
const messageElement = document.createElement('div');
messageElement.innerText = message;
messagesContainer.appendChild(messageElement);
messageElement.classList.add("message");
messagesContainer.scrollTop = messagesContainer.scrollHeight;
});
document.getElementById("messages").addEventListener("click", function(e) {
if (e.target && e.target.classList.contains("message")) {
var message = confirm("Are you sure you want to delete this message?");
if (message == true) {
e.target.remove();
}
}
});
</script>
</body>
</html>

You have added event listener to #messages div that's why it removes all children from the #messages div. Instead of #messages div you should add click event listener to single message.

Related

Javascript - How do I change attribute of each generated textbox?

I Am currently working on a small project but tried everything and can't come up with a solution to my problem. I'm working on a to do list and using javascript to generate textboxes with a button that stores its value. The Button generates a textbox and 3 additional buttons (1 delete task button (red), 1 change its value button (yellow) and 1 completed button (green) which moves the task to a new list and generates 2 additional buttons delete task and the yellow button which does the same as preview). The problem is that when generating x amount of textboxes only the first textbox will work when changing its value (clicking on yellow button), how can I make it so each button works individually for respective textbox.
The same problem remains when clicking on the green button (completed button) in which only the first textbox in the list will display its value.
const syssla = document.querySelector("#min-syssla");
let firstbutton = document.querySelector(".firstbutton");
const ullist = document.querySelector(".unorderedlist");
const listdone = document.querySelector(".list-done");
firstbutton.addEventListener("click", task);
function task(event) {
const tododiv = document.createElement("div");
tododiv.classList.add("todo");
const list = document.createElement('li');
list.classList.add('todo-item');
tododiv.appendChild(list);
const completedButton = document.createElement('button');
completedButton.innerText = "Färdig";
completedButton.classList.add("complete_btn");
list.appendChild(completedButton);
const editButton = document.createElement('button');
editButton.innerText = "Ändra";
editButton.classList.add("edit_btn");
list.appendChild(editButton);
const eraseButton = document.createElement('button');
eraseButton.innerText = "Radera";
eraseButton.classList.add("erase_btn");
list.appendChild(eraseButton);
var textinput = document.createElement("input");
textinput.type = "text";
textinput.setAttribute('disabled', 'disabled');
textinput.classList.add("newbox");
list.appendChild(textinput);
textinput.value = syssla.value;
ullist.appendChild(tododiv);
firstbutton.value = "";
event.preventDefault();
}
ullist.addEventListener('click', deletecheckbox);
function deletecheckbox(e) {
let item = e.target;
if (item.classList[0] === 'erase_btn') {
const make = item.parentElement;
make.remove();
}
if (item.classList[0] === 'complete_btn') {
const radera1 = item.parentElement;
let completedButton = document.querySelector(".complete_btn");
const tododiv2 = document.createElement("div");
tododiv2.classList.add("todo2");
const list2 = document.createElement('li');
list2.classList.add('todo-item2');
tododiv2.appendChild(list2);
const editButton1 = document.createElement('button');
editButton1.innerText = "Ändra";
editButton1.classList.add("edit_btn1");
list2.appendChild(editButton1);
const eraseButton1 = document.createElement('button');
eraseButton1.innerText = "Radera";
eraseButton1.classList.add("erase_btn1");
list2.appendChild(eraseButton1);
let textinput2 = document.createElement("input");
textinput2.type = "text";
textinput2.setAttribute('disabled', 'disabled');
textinput2.classList.add("newbox2");
list2.appendChild(textinput2);
listdone.appendChild(tododiv2);
textinput = document.querySelector(".newbox");
textinput2.value = textinput.value;
radera1.remove();
}
editButton = document.querySelector(".edit_btn");
editButton.addEventListener('click', change());
function change() {
textinput = document.querySelector(".newbox");
if (item.classList[0] === "edit_btn") {
if (textinput.disabled === true) {
textinput.removeAttribute('disabled', 'disabled');
} else if (textinput.disabled === false) {
textinput.setAttribute('disabled', 'disabled');
}
}
}
}
listdone.addEventListener('click', donebox);
function donebox(ev) {
let item1 = ev.target;
if (item1.classList[0] === 'erase_btn1') {
const eraser = item1.parentElement;
eraser.remove();
}
if (item1.classList[0] === 'edit_btn1') {
textinput2 = document.querySelector(".newbox2");
if (textinput2.disabled === true) {
textinput2.removeAttribute('disabled', 'disabled');
} else if (textinput2.disabled === false) {
textinput2.setAttribute('disabled', 'disabled');
}
}
}
body {
margin: 0;
padding: 0;
background-size: cover;
}
h1 {
text-align: center;
font-size: 60px;
margin: 0 auto;
padding: 25px;
-webkit-text-stroke: 1.5px white;
background-color: rgb(48, 49, 51, 0.7);
opacity: 1;
}
#min-syssla {
position: relative;
left: 70px;
top: 50px;
border: 2px solid blue;
height: 25px;
width: 170px;
}
#wrapper-box {
border: 1px black;
position: relative;
top: 35px;
display: block;
width: 450px;
height: 700px;
background-image: linear-gradient(180deg, lightblue, blue 90%);
border: 3px outset blue;
border-top-left-radius: 5%;
border-top-right-radius: 5%;
z-index: 1;
padding: 10px;
margin-left: 37.5%;
margin-right: 40%;
}
.firstbutton {
position: relative;
left: 270px;
bottom: 18px;
border: 1px ridge blue;
border-radius: 5px;
padding: 3px;
width: 80px;
height: 30px;
}
h2 {
margin: 30px;
}
.todo-item {
margin-top: 20px;
}
.complete_btn {
margin-left: 20px;
float: right;
padding: 6px;
color: white;
border: 1.5px solid black;
background-color: green;
border-radius: 5px;
font-family: arial;
font-weight: bold;
}
.complete_btn:hover {
background-color: rgb(86, 234, 7, 0.9);
}
.erase_btn {
float: right;
margin-left: 22px;
padding: 6px;
color: white;
border: 1.5px solid black;
background-color: red;
border-radius: 5px;
font-family: arial;
font-weight: bold;
}
.erase_btn:hover {
background-color: rgb(255, 84, 84, 0.9);
}
.edit_btn {
float: right;
margin-left: 20px;
padding: 6px;
color: black;
border: 1.5px solid black;
background-color: yellow;
border-radius: 5px;
font-family: arial;
font-weight: bold;
}
.edit_btn:hover {
background-color: rgb(213, 219, 46, 0.9);
}
.newbox {
border-radius: 5px;
border: 2px ridge darkorange;
padding: 5px;
}
.erase_btn1 {
float: right;
margin-right: 25px;
padding: 6px;
color: white;
border: 1.5px solid black;
background-color: red;
border-radius: 5px;
font-family: arial;
font-weight: bold;
}
.erase_btn1:hover {
background-color: rgb(255, 84, 84, 0.9);
}
.edit_btn1 {
margin-right: 75px;
float: right;
padding: 6px;
color: black;
border: 1.5px solid black;
background-color: yellow;
border-radius: 5px;
font-family: arial;
font-weight: bold;
}
.edit_btn1:hover {
background-color: rgb(213, 219, 46, 0.9);
}
.newbox2 {
border-radius: 5px;
padding: 5px;
border: 2px ridge greenyellow;
}
.todo-item2 {
margin-top: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Kunskapskontroll</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel=stylesheet href="css/style.css">
</head>
<body>
<h1>Mina Sysslor</h1>
<div id="wrapper-box">
<input type="text" id="min-syssla" placeholder="Min syssla" name="min-syssla"><br><br><br>
<button class="firstbutton" type="submit">Lägg till</button>
<div class="syssla-container">
<h2>Att göra</h2>
<ul class="unorderedlist"></ul>
<h2>Färdiga</h2>
<ul class="list-done"></ul>
</div>
I haven't tried much because I have no clue of how to manage to change the attribute for every new textbox.

How to get console messages in iframe with javascript?

I've gone through all the other asked questions but none of them work. I'm trying to do it on the code block below. How can I get console messages from within an iframe? I can get it from outside the iframe, but I can't add console messages inside the iframe to the html. I had some trouble adding the script tag.
function coderunfunc(cls, ind) {
let html = document.querySelector(`.${cls} .html-code-run-${ind} code`).textContent;
let css = document.querySelector(`.${cls} .css-code-run-${ind} code`).textContent;
let js = document.querySelector(`.${cls} .javascript-code-run-${ind} code`).textContent;
let sc1='script >';
let sc2='/script >';
let jsa = '<'+sc1 + js + '<' + sc2
let cdo =`${html} <style>${css}</style> ${jsa}`
var iframe = document.createElement('iframe');
iframe.classList.add('iframe-css');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(cdo);
if (document.querySelector(`.${cls} iframe`)) {
document.querySelector(`.${cls} iframe`).remove();
}
document.querySelector(`.${cls}`).appendChild(iframe);
}
main.main pre {
display: block;
background-color: #f6f6f6;
color: #000;
padding: 10px;
max-height: 350px;
overflow-y: scroll;
margin: 0;
border: 1px solid #212121;
}
main.main code {
background-color: #f6f6f6;
margin: 0;
padding: 0;
color: #000;
padding: 0px 5px;
}
.main pre code {
padding: 0;
margin: 0;
word-break: break-all !important;
}
.info-r-h {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 2px solid #212121;
border-bottom: 2px solid #212121;
padding-top: 2px;
padding-bottom: 2px;
}
.info-r-h button {
padding: 10px 20px;
background-color: #212121;
color: #fff;
outline: none;
border: none;
border-right: 2px solid #fff;
border-left: 2px solid #fff;
cursor: pointer;
}
.code-run-button {
display: block;
padding: 10px 20px;
margin-top: 10px;
font-size: 20px;
background-color: #0095ff;
border: none;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.iframe-css {
display: block;
width: 100%;
border: 1px solid #212121;
background-color: #fff;
margin-top: 10px;
height: auto;
}
<main class="main">
<div class="code-run-1" id="1">
<div class="info-r-h"><span>HTML</span><button onclick="copyelement('html-code-run-1')">Kopyala</button></div>
<pre class="html-code-run-1" spellcheck="false">
<code>asdasdasdas</code>
</pre>
<div class="info-r-h"><span>CSS</span><button onclick="copyelement('css-code-run-1')">Kopyala</button></div>
<pre class="css-code-run-1" spellcheck="false">
<code> *{
color:red;
}</code></pre>
<div class="info-r-h"><span>JAVASCRIPT</span><button onclick="copyelement('javascript-code-run-1')">Kopyala</button></div>
<pre class="javascript-code-run-1" spellcheck="false">
<code> console.log('asd');</code></pre>
<button class="code-run-button" id="1" onclick="coderunfunc('code-run-1',1)">RUN</button></div>
<div class="denem"></div>
</main>

You can add following to the iframe js code. This will replace the original window.console.log with a custom log method that also sends the data to the parent frame.
const originalLog = console.log;
console.log = (...args) => {
parent.window.postMessage({ type: 'log', args: args }, '*')
originalLog(...args)
};
And in your parent you can listen to these message events:
window.addEventListener('message', e => {
const data = e.data
if (data.type === 'log') {
console.log('received from child', data.args)
}
})
So here is a working example:
function coderunfunc(cls, ind) {
let html = document.querySelector(`.${cls} .html-code-run-${ind} code`).textContent;
let css = document.querySelector(`.${cls} .css-code-run-${ind} code`).textContent;
let js = document.querySelector(`.${cls} .javascript-code-run-${ind} code`).textContent;
js = `const originalLog = console.log;
console.log = (...args) => {
parent.window.postMessage({ type: 'log', args: args }, '*')
originalLog(...args)
};` + js
let sc1='script >';
let sc2='/script >';
let jsa = '<'+sc1 + js + '<' + sc2
let cdo =`${html} <style>${css}</style> ${jsa}`
var iframe = document.createElement('iframe');
iframe.classList.add('iframe-css');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(cdo);
if (document.querySelector(`.${cls} iframe`)) {
document.querySelector(`.${cls} iframe`).remove();
}
document.querySelector(`.${cls}`).appendChild(iframe);
}
window.addEventListener('message', e => {
const data = e.data
if (data.type === 'log') {
console.log('received from child', data.args)
}
})
main.main pre {
display: block;
background-color: #f6f6f6;
color: #000;
padding: 10px;
max-height: 350px;
overflow-y: scroll;
margin: 0;
border: 1px solid #212121;
}
main.main code {
background-color: #f6f6f6;
margin: 0;
padding: 0;
color: #000;
padding: 0px 5px;
}
.main pre code {
padding: 0;
margin: 0;
word-break: break-all !important;
}
.info-r-h {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 2px solid #212121;
border-bottom: 2px solid #212121;
padding-top: 2px;
padding-bottom: 2px;
}
.info-r-h button {
padding: 10px 20px;
background-color: #212121;
color: #fff;
outline: none;
border: none;
border-right: 2px solid #fff;
border-left: 2px solid #fff;
cursor: pointer;
}
.code-run-button {
display: block;
padding: 10px 20px;
margin-top: 10px;
font-size: 20px;
background-color: #0095ff;
border: none;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.iframe-css {
display: block;
width: 100%;
border: 1px solid #212121;
background-color: #fff;
margin-top: 10px;
height: auto;
}
<main class="main">
<div class="code-run-1" id="1">
<div class="info-r-h"><span>HTML</span><button onclick="copyelement('html-code-run-1')">Kopyala</button></div>
<pre class="html-code-run-1" spellcheck="false">
<code>asdasdasdas</code>
</pre>
<div class="info-r-h"><span>CSS</span><button onclick="copyelement('css-code-run-1')">Kopyala</button></div>
<pre class="css-code-run-1" spellcheck="false">
<code> *{
color:red;
}</code></pre>
<div class="info-r-h"><span>JAVASCRIPT</span><button onclick="copyelement('javascript-code-run-1')">Kopyala</button></div>
<pre class="javascript-code-run-1" spellcheck="false">
<code> console.log('asd');</code></pre>
<button class="code-run-button" id="1" onclick="coderunfunc('code-run-1',1)">RUN</button></div>
<div class="denem"></div>
</main>

Removing all todos bring them back when I add

I was building a todo app , everything is work very well until i decided to add a button to remove all todos(ul) in one click. When I click on the button of remove all todos is removed but when I click on add button they all come back at once.
const input = document.getElementById('input');
const addBtn = document.getElementById('btn');
const removeBtn = document.getElementById('removeBtn')
const todoList = document.getElementById('todoList');
var ulElement = document.createElement('ul');
let placeholderValue = '';
// This code is for clear placeholder value
input.addEventListener('focus' , () => {
placeholderValue = input.placeholder;
input.placeholder = '';
});
input.addEventListener('blur' , ()=> {
input.placeholder = placeholderValue;
});
// this function is for add to do to a list
function addTodo(){
let liElements = document.createElement('li');
todoList.appendChild(ulElement);
ulElement.appendChild(liElements);
liElements.classList.add('liElement')
liElements.innerHTML = input.value;
// this code is for remove todo from the list
liElements.addEventListener('contextmenu' , (e)=> {
e.preventDefault();
liElements.classList.add('done');
});
liElements.addEventListener('dblclick' , (e) => {
e.preventDefault()
liElements.remove()
});
};
addBtn.addEventListener('click' , addTodo)
removeBtn.addEventListener('click' , () => {
ulElement.remove()
});
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#1,600&display=swap');
*{
margin: 0;
box-sizing: border-box;
font-family: 'Playfair Display', serif;
}
body{
background-color: #DC86A9;
}
.mainInput {
display: flex;
justify-content: center;
margin-top: 15%;
}
.mainInput input + button {
margin-left: 10px;
}
.mainInput input {
width: 500px;
height: 50px;
border: none;
border-radius: 50px;
box-shadow: 4px 4px 60px white;
padding: 25px;
}
.mainInput input::placeholder{
font-size: 22px;
text-align: center;
}
.mainInput button {
border-radius: 10px ;
background-color: rgb(102, 102, 255);
margin-left: 10px;
border: none;
border-radius: 550px;
color: white;
font-weight: 900;
font-size: 32px;
width: 80px;
cursor: pointer;
box-shadow: 4px 4px 30px white;
}
.btn1 {
font-size: 14px !important;
background-color: rgb(252, 53, 53) !important;
padding-left: 5px;
}
span {
display: flex;
justify-content: center;
margin-top: 50px;
font-size: 30px;
color: white;
}
.todoList {
display:flex;
justify-content:center;
margin-top : 2%;
}
.todoList ul {
list-style-type: none;
margin-right: 30px;
color: white;
font-size: 26px;
font-weight: 500
}
.todoList ul li {
cursor: pointer;
}
.done {
color: rgb(190, 190, 190);
text-decoration: line-through
}
.note {
display: flex;
justify-content: center;
margin-top: 10px;
font-size: 14px;
color: white;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>TodoApp</title>
</head>
<body>
<div class="mainInput">
<input type="text" class="input" id="input" placeholder="Enter your todo : ">
<button class="btn" id="btn">+</button><button class="btn btn1" id="removeBtn">RemoveAll</button>
</div>
<span> Todo list : </span>
<div class="todoList" id="todoList"></div>
<span class="note">Right click to make todo done</span>
<span class="note">dbl click to remove todo</span>
<script src="js/main.js"></script>
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
</body>
</html>

Change your remove logic to this to empty everything inside your <ul>
removeBtn.addEventListener('click' , () => {
ulElement.innerHTML = "";
});

You can use remove the child to remove all child elements.
const input = document.getElementById('input');
const addBtn = document.getElementById('btn');
const removeBtn = document.getElementById('removeBtn')
const todoList = document.getElementById('todoList');
var ulElement = document.createElement('ul');
let placeholderValue = '';
// This code is for clear placeholder value
input.addEventListener('focus' , () => {
placeholderValue = input.placeholder;
input.placeholder = '';
});
input.addEventListener('blur' , ()=> {
input.placeholder = placeholderValue;
});
// this function is for add to do to a list
function addTodo(){
let liElements = document.createElement('li');
todoList.appendChild(ulElement);
ulElement.appendChild(liElements);
liElements.classList.add('liElement')
liElements.innerHTML = input.value;
// this code is for remove todo from the list
liElements.addEventListener('contextmenu' , (e)=> {
e.preventDefault();
liElements.classList.add('done');
});
liElements.addEventListener('dblclick' , (e) => {
e.preventDefault()
liElements.remove()
});
};
addBtn.addEventListener('click' , addTodo)
removeBtn.addEventListener('click' , () => {
while (ulElement.firstChild) ulElement.removeChild(ulElement.firstChild);
ulElement.remove()
});
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#1,600&display=swap');
*{
margin: 0;
box-sizing: border-box;
font-family: 'Playfair Display', serif;
}
body{
background-color: #DC86A9;
}
.mainInput {
display: flex;
justify-content: center;
margin-top: 15%;
}
.mainInput input + button {
margin-left: 10px;
}
.mainInput input {
width: 500px;
height: 50px;
border: none;
border-radius: 50px;
box-shadow: 4px 4px 60px white;
padding: 25px;
}
.mainInput input::placeholder{
font-size: 22px;
text-align: center;
}
.mainInput button {
border-radius: 10px ;
background-color: rgb(102, 102, 255);
margin-left: 10px;
border: none;
border-radius: 550px;
color: white;
font-weight: 900;
font-size: 32px;
width: 80px;
cursor: pointer;
box-shadow: 4px 4px 30px white;
}
.btn1 {
font-size: 14px !important;
background-color: rgb(252, 53, 53) !important;
padding-left: 5px;
}
span {
display: flex;
justify-content: center;
margin-top: 50px;
font-size: 30px;
color: white;
}
.todoList {
display:flex;
justify-content:center;
margin-top : 2%;
}
.todoList ul {
list-style-type: none;
margin-right: 30px;
color: white;
font-size: 26px;
font-weight: 500
}
.todoList ul li {
cursor: pointer;
}
.done {
color: rgb(190, 190, 190);
text-decoration: line-through
}
.note {
display: flex;
justify-content: center;
margin-top: 10px;
font-size: 14px;
color: white;
}
<div class="mainInput">
<input type="text" class="input" id="input" placeholder="Enter your todo : ">
<button class="btn" id="btn">+</button><button class="btn btn1" id="removeBtn">RemoveAll</button>
</div>
<span> Todo list : </span>
<div class="todoList" id="todoList"></div>
<span class="note">Right click to make todo done</span>
<span class="note">dbl click to remove todo</span>
<script src="https://kit.fontawesome.com/a81368914c.js"></script>

You needed to simplify.
Here there is a static UL and the button empties it
const input = document.getElementById('input');
const addBtn = document.getElementById('btn');
const removeBtn = document.getElementById('removeBtn')
const todoList = document.getElementById('todoList');
let placeholderValue = '';
// This code is for clear placeholder value
input.addEventListener('focus', () => {
placeholderValue = input.placeholder;
input.placeholder = '';
});
input.addEventListener('blur', () => {
input.placeholder = placeholderValue;
});
// this function is for add to do to a list
function addTodo() {
let liElement = document.createElement('li');
liElement.classList.add('liElement')
liElement.innerHTML = input.value;
todoList.appendChild(liElement);
// this code is for remove todo from the list
liElement.addEventListener('contextmenu', (e) => {
e.preventDefault();
liElement.classList.add('done');
});
liElement.addEventListener('dblclick', (e) => {
e.preventDefault()
liElement.remove()
});
};
addBtn.addEventListener('click', addTodo)
removeBtn.addEventListener('click', () => {
document.getElementById("todoList").innerHTML = "";
});
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#1,600&display=swap');
* {
margin: 0;
box-sizing: border-box;
font-family: 'Playfair Display', serif;
}
body {
background-color: #DC86A9;
}
.mainInput {
display: flex;
justify-content: center;
margin-top: 15%;
}
.mainInput input+button {
margin-left: 10px;
}
.mainInput input {
width: 500px;
height: 50px;
border: none;
border-radius: 50px;
box-shadow: 4px 4px 60px white;
padding: 25px;
}
.mainInput input::placeholder {
font-size: 22px;
text-align: center;
}
.mainInput button {
border-radius: 10px;
background-color: rgb(102, 102, 255);
margin-left: 10px;
border: none;
border-radius: 550px;
color: white;
font-weight: 900;
font-size: 32px;
width: 80px;
cursor: pointer;
box-shadow: 4px 4px 30px white;
}
.btn1 {
font-size: 14px !important;
background-color: rgb(252, 53, 53) !important;
padding-left: 5px;
}
span {
display: flex;
justify-content: center;
margin-top: 50px;
font-size: 30px;
color: white;
}
.todoList {
display: flex;
justify-content: center;
margin-top: 2%;
}
.todoList ul {
list-style-type: none;
margin-right: 30px;
color: white;
font-size: 26px;
font-weight: 500
}
.todoList ul li {
cursor: pointer;
}
.done {
color: rgb(190, 190, 190);
text-decoration: line-through
}
.note {
display: flex;
justify-content: center;
margin-top: 10px;
font-size: 14px;
color: white;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>TodoApp</title>
</head>
<body>
<div class="mainInput">
<input type="text" class="input" id="input" placeholder="Enter your todo : ">
<button class="btn" id="btn">+</button><button class="btn btn1" id="removeBtn">RemoveAll</button>
</div>
<span> Todo list : </span>
<div class="todoList">
<ul id="todoList"></ul>
</div>
<span class="note">Right click to make todo done</span>
<span class="note">dbl click to remove todo</span>
<script src="js/main.js"></script>
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
</body>
</html>

Why the following button does not work?

This question is completely different due to the fact that this Time I am integrating the code from a jsfiddle with the answer of another question but I am asking about an error that I am getting in the process,
I am writing an small script to produce some tables, the main idea is to copy text into my first text area called:
<textarea cols="70" rows="15" id="text" ></textarea>
to the press the button called: Generate tables:
<button id="generate">Generate tables</button><br>
That calles the function called: generate
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function() {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g,
'"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
to produce the tables in the second text area called: out1
<div cols="3" rows="15" id="out1" ></div>
I don't know why when I copy text to the fist area an press the button nothing happens, I would like to appreciate any suggestion to fix the code, thanks in advance, I really appreciate the support,
<!DOCTYPE html>
<html>
<head>
<script>
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function() {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g,
'"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
</script>
</head>
<style>
table{background:#CCC;border:1px solid #000;}
table td{padding:15px;border:1px solid #DDD;}
textarea {
color:GreenYellow ;
background-color: black;
margin-top: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
}
body {background-color:#000C17;}
#out1 {
background-color: gray;
margin-top: 150px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
float:center;
width:700px;
overflow-y: auto;
height: 200px;
padding: 50px;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 15px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 25px;
padding: 25px;
width: 20%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
</style>
<body>
<textarea cols="70" rows="15" id="text" ></textarea>
<div cols="3" rows="15" id="out1" ></div>
<div class="wrapper">
<button id="generate">Generate tables</button><br>
</body>
</html>

Your javascript is fine.. The problem is your code is executed before the DOM loaded properly. Since your DOM is not loaded when the script executed, so your JS thrown error.
Look at my snippet, I've correcting your script.
<!DOCTYPE html>
<html>
<head>
<style>
table {
background: #CCC;
border: 1px solid #000;
}
table td {
padding: 15px;
border: 1px solid #DDD;
}
textarea {
color: GreenYellow;
background-color: black;
margin-top: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
}
body {
background-color: #000C17;
}
#out1 {
background-color: gray;
margin-top: 150px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
float: center;
width: 700px;
overflow-y: auto;
height: 200px;
padding: 50px;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 15px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 25px;
padding: 25px;
width: 20%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
</style>
</head>
<body>
<textarea cols="70" rows="15" id="text"></textarea>
<div cols="3" rows="15" id="out1"></div>
<div class="wrapper">
<button id="generate">Generate tables</button><br>
<script>
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function () {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g
, '"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
</script>
</body>
</html>

Custom Javascript Prompt Dialog Box (how to retrieve value and store it as var)

I frantically need your help,
The variable "x" can normally be set using the following method (default)
var x = prompt("Please enter your name:","John Smith")
I'd very much similarly like to mimic the same idea and writting it such that it will work with my existing dynamic/custom dialog/prompt box. To this end, I am very not much familiar with asynchronous javascript and have little experience in that impossible department.
Expected result:
var x = alertBox('Enter your firstname','prompt','John Smith')
Here is the HTML/CSS and Javascript Markup:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function testit() {
var x = alertBox('Enter your firstname','prompt','John Smith')
alert(x)
}
function alertBox(text, type, ptext) {
var button = '<div id="alertBox_button_div" ><input id="alertBox_button" class="button" style="margin: 7px;" type="button" value="Close" onclick="alertBox_hide()"></div>'
var field = '<div><input id="ptext" class="field" type="text"></div>'
if (type == "err") {
document.getElementById('alertBox_text').innerHTML = text + button
document.getElementById('alertBox_text').style.color = "#FF0000"
document.getElementById('alertBox_text').style.top = "50%"
}
else if (type == "ok") {
document.getElementById('alertBox_text').innerHTML = text + button
document.getElementById('alertBox_text').style.top = "50%"
}
else if (type == "prompt") {
document.getElementById('alertBox_text').innerHTML = text + field + button
document.getElementById('alertBox_text').style.top = "25%"
document.getElementById('alertBox_button').value = "OK"
if (ptext) { document.getElementById('ptext').value = ptext }
}
else {
document.getElementById('alertBox_text').innerHTML = text
}
document.getElementById('alertBox_container').style.visibility = 'visible'
}//end function
function alertBox_hide() {
document.getElementById('alertBox_container').style.visibility = 'hidden'
}
</script>
<style type="text/css">
.field {
border: 1px solid #808080;
width: 475px;
font-family: Arial;
font-size: 9pt;
padding-left: 3px;
font-weight: bold;
margin: 1px;
}
#alertBox {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: Arial;
font-size: 9pt;
visibility: hidden;
}
#alertBox_container {
border: 1px solid #808080;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
color: rgb(11,63,113);
}
#alertBox_titlebar {
cursor: pointer;
height: 22px;
width: 100%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
line-height:22px;
font-weight: bold;
}
#alertBox_close {
line-height: 10px;
width: 17px;
margin-top: 2px;
margin-right: 2px;
padding: 1px;
position:absolute;
top:0;
right:0;
font-size: 10px;
font-family: tahoma;
font-weight: bold;
color: #464646;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color:#ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
}
#alertBox_close:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
#alertBox_text {
position: absolute;
width: 100%;
height: auto;
top: 50%;
text-align: center;
}
.button {
color: #464646;
font-family: Arial;
font-size: 9pt;
height: 23px;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color: #ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
width: 67px;
}
}
.button:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
</style>
</head>
<body>
<input type="button" value="testme" onclick="testit()">
<br>
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text"></div>
</div>
</div>
</body>
</html>

add a return value to your alertBox() function.
function alertBox(arg1,arg2,arg3)
{
// do your stuff here
var ishallreturn = document.getElementById("ptext").value;
return ishallreturn;
}

We Keep Coding

JavaScript is the programming language of the Web.

JavaScript chatbot - deleting the whole frame rather than just the message - javascript

You have added event listener to #messages div that's why it removes all children from the #messages div. Instead of #messages div you should add click event listener to single message.

Related

Javascript - How do I change attribute of each generated textbox?

How to get console messages in iframe with javascript?

Removing all todos bring them back when I add

Why the following button does not work?

Custom Javascript Prompt Dialog Box (how to retrieve value and store it as var)

Categories

Resources