Unable to edit the label text - javascript

I have tried to insert the data into the ToDo List and it is working but i am unable to edit the name and number field in the edit box of ToDo list.
And also the list is showing is not properly having padding and i tried to put padding in the list but whole list is shifting towards the left.
Also I tried with table concept in JavaScript but for that i need the loop and the database but i dont want to use the database or any other storage
var taskInput = document.getElementById("new-task");
var nameInput = document.getElementById("new-name");
var numberInput = document.getElementById("new-number");
var addButton = document.getElementsByTagName("button")[0];
var incompleteTask = document.getElementById("incomplete-tasks");
var completedTask = document.getElementById("completed-tasks");
var createNewTaskElement = function (taskString, nameString, numberString) {
var listItem = document.createElement("li");
var checkBox = document.createElement("input");
var label = document.createElement("label");
var label1 = document.createElement("label1");
var label2 = document.createElement("label2");
var editInput = document.createElement("input");
var editInput1 = document.createElement("input");
var editInput2 = document.createElement("input");
var editButton = document.createElement("button");
var deleteButton = document.createElement("button");
label.innerText = taskString;
label1.innerText = nameString;
label2.innerText = numberString;
checkBox.type = "checkbox";
editInput.type = "text";
editInput1.type = "text";
editInput2.type = "text";
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(label1);
listItem.appendChild(editInput1);
listItem.appendChild(label2);
listItem.appendChild(editInput2);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
alert("You added '" + label.innerText + "' to the ToDO list");
return listItem;
}
var addTask = function () {
var listItem = createNewTaskElement(taskInput.value,nameInput.value,numberInput.value);
if (taskInput.value == "") {
alert("You must enter a task");
}
else if (nameInput.value == "") {
alert("You must enter a Name");
}
else if (numberInput.value == "") {
alert("You must enter a Phone Number");
} else {
incompleteTask.appendChild(listItem);
}
bindTaskEvents(listItem, taskCompleted);
taskInput.value = "";
nameInput.value = "";
numberInput.value = "";
}
var editTask = function () {
var listItem = this.parentNode;
var editInput = listItem.querySelector('input[type=text]');
var label = listItem.querySelector("label");
var containsClass = listItem.classList.contains("editMode");
if (containsClass) {
label.innerText = editInput.value;
alert("You edited " + label.innerText);
} else {
editInput.value = label.innerText;
}
listItem.classList.toggle("editMode");
}
var deleteTask = function () {
var listItem = this.parentNode;
var ul = listItem.parentNode;
alert("You deleted " + listItem.querySelector("label").innerText);
ul.removeChild(listItem);
}
var taskCompleted = function () {
var listItem = this.parentNode;
completedTask.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
alert("You completed " + listItem.querySelector("label").innerText);
}
var taskIncomplete = function () {
var listItem = this.parentNode;
incompleteTask.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
var bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
var checkBox = taskListItem.querySelector("input[type=checkbox]");
var editButton = taskListItem.querySelector("button.edit");
var deleteButton = taskListItem.querySelector("button.delete");
editButton.onclick = editTask;
deleteButton.onclick = deleteTask;
checkBox.onchange = checkBoxEventHandler;
}
for (var i = 0; i < incompleteTask.children.length; i++) {
bindTaskEvents(incompleteTask.children[i], taskCompleted);
}
for (var i = 0; i < completedTask.children.length; i++) {
bindTaskEvents(completedTask.children[i], taskIncomplete);
}
var input = document.getElementById("new-number");
input.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
addTask();
}
});
.container {
height: 525px;
width: 450px;
margin: 100px auto;
}
ul {
margin: 0;
padding: 0;
}
li * {
float: left;
}
li,
h3 {
clear: both;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
input,button {
outline: none;
}
button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 10px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
}
button:hover {
color: #333;
}
h3, label[for='new-task'] {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 0;
text-transform: uppercase;
}
input[type="text"] {
margin: 0;
font-size: 18px;
line-height: 18px;
height: 18px;
padding: 10px;
border: 1px solid #ddd;
background: #fff;
border-radius: 8px;
font-family: Lato, sans-serif;
color: #888;
margin-left: 50px;
}
input[type="text"]:focus {
color: #333;
}
label[for='new-task'] {
display: block;
margin: 0 0 20px;
}
input#new-task,#new-name,#new-number {
width: 260px;
margin-bottom: 10px;
}
input:focus{
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border-color: #5AB0DB;
}
input:hover {
border: 1px solid #999;
border-radius: 5px;
}
p>button:hover {
color: #0FC57C;
}
li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
li>input[type="checkbox"] {
margin: 0 10px;
position: relative;
top: 15px;
}
li>label {
font-size: 18px;
line-height: 40px;
width: 190px;
padding: 0 0 0 11px;
}
li>input[type="text"] {
width: 180px;
}
#completed-tasks label {
text-decoration: line-through;
color: #888;
}
ul li input[type=text] {
display: none;
}
ul li.editMode input[type=text] {
display: block;
}
ul li.editMode label {
display: none;
}
th{
padding-right: 70px;
}
<!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">
<link rel="stylesheet" href="style.css" type="text/css">
<title>To DO List</title>
</head>
<body style="background-color: #ebeff0">
<div class="container">
<h3 style="text-align: center;">Add Task</h3>
<br>
<label>Add Task</label>
<input id="new-task" type="text" required><br>
<label>Name</label>
<input id="new-name" type="text" required><br>
<label>Phone Number</label>
<input id="new-number" type="text" required><br>
<h3 style="text-align: center;">Todo</h3>
<ul id="incomplete-tasks">
</ul>
<h3 style="text-align: center;">Completed Tasks</h3>
<ul id="completed-tasks">
</ul>
</div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>

I have created the class and then edited the inputs
var taskInput = document.getElementById("new-task");
var nameInput = document.getElementById("new-name");
var numberInput = document.getElementById("new-number");
var addButton = document.getElementsByTagName("button")[0];
var incompleteTask = document.getElementById("incomplete-tasks");
var completedTask = document.getElementById("completed-tasks");
var createNewTaskElement = function (taskString, nameString, numberString) {
var listItem = document.createElement("li");
var checkBox = document.createElement("input");
var label = document.createElement("label");
var label1 = document.createElement("label");
var label2 = document.createElement("label");
var editInput = document.createElement("input");
var editInput1 = document.createElement("input");
var editInput2 = document.createElement("input");
var editButton = document.createElement("button");
var deleteButton = document.createElement("button");
label.innerText = taskString;
label1.innerText = nameString;
label2.innerText = numberString;
label.className = "task";
label1.className = "name";
label2.className = "number";
checkBox.type = "checkbox";
editInput.type = "text";
editInput1.type = "text";
editInput2.type = "text";
editInput.className = "edit";
editInput1.className = "edit1";
editInput2.className = "edit2";
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";
listItem.appendChild(checkBox);
listItem.appendChild(label);
listItem.appendChild(editInput);
listItem.appendChild(label1);
listItem.appendChild(editInput1);
listItem.appendChild(label2);
listItem.appendChild(editInput2);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
alert("You added '" + label.innerText + "' to the ToDO list");
return listItem;
}
var addTask = function () {
var listItem = createNewTaskElement(taskInput.value, nameInput.value, numberInput.value);
if (taskInput.value == "") {
alert("You must enter a task");
} else if (nameInput.value == "") {
alert("You must enter a Name");
} else if (numberInput.value == "") {
alert("You must enter a Phone Number");
} else {
incompleteTask.appendChild(listItem);
}
bindTaskEvents(listItem, taskCompleted);
taskInput.value = "";
nameInput.value = "";
numberInput.value = "";
}
var editTask = function () {
var listItem = this.parentNode;
var editInput = listItem.querySelector('.edit');
var editInput1 = listItem.querySelector('.edit1');
var editInput2 = listItem.querySelector('.edit2');
var label = listItem.querySelector(".task");
var label1 = listItem.querySelector(".name");
var label2 = listItem.querySelector(".number");
var containsClass = listItem.classList.contains("editMode");
if (containsClass) {
label.innerText = editInput.value;
label1.innerText = editInput1.value;
label2.innerText = editInput2.value;
alert("You edited " + label.innerText);
} else {
editInput.value = label.innerText;
editInput1.value = label1.innerText;
editInput2.value = label2.innerText;
}
listItem.classList.toggle("editMode");
}
var deleteTask = function () {
if (confirm("Are you sure you want to delete this task?") == true) {
var listItem = this.parentNode;
var ul = listItem.parentNode;
alert("You deleted " + listItem.querySelector("label").innerText);
} else {
alert("You cancelled the task");
}
ul.removeChild(listItem);
}
var taskCompleted = function () {
var listItem = this.parentNode;
if (confirm("Are you sure you want to mark this task as complete?") == true) {
completedTask.appendChild(listItem);
bindTaskEvents(listItem, taskIncomplete);
alert("You completed " + listItem.querySelector("label").innerText);
} else {
alert("You cancelled the task");
}
}
var taskIncomplete = function () {
var listItem = this.parentNode;
incompleteTask.appendChild(listItem);
bindTaskEvents(listItem, taskCompleted);
}
var bindTaskEvents = function (taskListItem, checkBoxEventHandler) {
var checkBox = taskListItem.querySelector("input[type=checkbox]");
var editButton = taskListItem.querySelector("button.edit");
var deleteButton = taskListItem.querySelector("button.delete");
editButton.onclick = editTask;
deleteButton.onclick = deleteTask;
checkBox.onchange = checkBoxEventHandler;
}
for (var i = 0; i < incompleteTask.children.length; i++) {
bindTaskEvents(incompleteTask.children[i], taskCompleted);
}
for (var i = 0; i < completedTask.children.length; i++) {
bindTaskEvents(completedTask.children[i], taskIncomplete);
}
var input = document.getElementById("new-number");
.container {
height: 525px;
width: 700px;
margin: 100px auto;
}
ul {
margin: 0;
padding: 0;
}
li * {
float: left;
}
li,
h3 {
clear: both;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
input,button {
outline: none;
}
button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
margin: 10px 0 0;
font-family: Lato, sans-serif;
cursor: pointer;
}
button:hover {
color: #333;
}
h3, label[for='new-task'] {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 0;
text-transform: uppercase;
}
input[type="text"] {
margin: 0;
font-size: 18px;
line-height: 18px;
height: 18px;
padding: 10px;
border: 1px solid #ddd;
background: #fff;
border-radius: 8px;
font-family: Lato, sans-serif;
color: #888;
margin-left: 50px;
}
input[type="text"]:focus {
color: #333;
}
label[for='new-task'] {
display: block;
margin: 0 0 20px;
}
input#new-task,#new-name,#new-number {
width: 260px;
margin-bottom: 10px;
}
input:focus{
outline: none;
box-shadow: 0px 0px 5px #61C5FA;
border-color: #5AB0DB;
}
input:hover {
border: 1px solid #999;
border-radius: 5px;
}
p>button:hover {
color: #0FC57C;
}
li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;
}
li>input[type="checkbox"] {
margin: 0 10px;
position: relative;
top: 15px;
}
li>label {
font-size: 18px;
line-height: 40px;
width: 100px;
padding: 0 0 0 11px;
}
li>input[type="text"] {
width: 100px;
}
li>button{
padding-left: 3px;
}
li>button:hover{
border: 1px solid black;
color: #c54f0f;
}
#completed-tasks label {
text-decoration: line-through;
color: #888;
}
ul li input[type=text] {
display: none;
}
ul li.editMode input[type=text] {
display: block;
}
ul li.editMode label {
display: none;
}
#AddBtn{
align-items: center;
border: 1px solid black !important;
background-color: white;
}
<!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">
<link rel="stylesheet" href="style.css" type="text/css">
<title>To DO List</title>
</head>
<body style="background-color: #ebeff0">
<div class="container">
<h3 style="text-align: center;">Add Task</h3>
<br>
<label>Add Task</label>
<input id="new-task" type="text" required><br>
<label style="padding-right: 05px;">Name</label>
<input id="new-name" type="text" required><br>
<label>Phone Number</label>
<input id="new-number" type="text" required><br>
<button id="AddBtn" onclick="addTask()">Add</button>
<h3 style="text-align: center;">Todo</h3>
<ul id="incomplete-tasks">
</ul>
<h3 style="text-align: center;">Completed Tasks</h3>
<ul id="completed-tasks">
</ul>
</div>
</body>
<script type="text/javascript" src="main.js"></script>
</html>

Related

Connect generated divs in JS

I am have a button that generates a div and button inside that div that generates another div. Whenever one of those superdivs generated by the main button, I want to connect each of those subdivs with a line. They are draggable, so the line should also be draggable. I saw LeaderLineJS, but then I try what it says in the docs after a div was created, it doesn't work.
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">
<link rel="stylesheet" href="./static/styles.css">
<title>Program Visualizer And Generator</title>
</head>
<body>
<div id="buttons">
<button id="create-box">Create Class</button>
<button id="myBtn">View Code (C++)</button>
</div>
<div id="box-container"></div>
<div id="myModal" class="modal">
<div class="modal-content">
<code></code>
</div>
</div>
<script src="./functionality/main.js"></script>
</body>
</html>
javascript:
var generatedCode = "";
var classNameCode = {};
var classVariables = {};
var variableName = "";
var amtVars = 0;
document.getElementById("create-box").addEventListener("click", function() {
amtVars = 0;
var methodCount = 0;
let box = document.createElement("div");
box.classList.add("box");
let title = document.createElement("h2");
title.innerHTML = "Class";
box.appendChild(title);
let classTitle = document.createElement('input');
classTitle.classList.add('class-name-form');
let classTitleBtn = document.createElement('button');
classTitleBtn.innerText = "Set Class Name";
classTitleBtn.classList.add('class-name-btn');
box.appendChild(classTitle);
box.appendChild(classTitleBtn);
document.getElementById("box-container").appendChild(box);
let createSubclassButton = document.createElement("button");
createSubclassButton.innerHTML = "Add Method";
box.appendChild(createSubclassButton);
let createInstanceVariable = document.createElement('button');
createInstanceVariable.classList.add('add-variable');
createInstanceVariable.innerHTML = "Add instance variable";
box.appendChild(createInstanceVariable);
// Enable resizing and dragging
box.addEventListener("mousedown", startDrag);
box.addEventListener("mousemove", drag);
box.addEventListener("mouseup", endDrag);
box.addEventListener("mouseleave", endDrag);
let offset = [0, 0];
let isDown = false;
function startDrag(e) {
isDown = true;
offset = [
this.offsetLeft - e.clientX,
this.offsetTop - e.clientY
];
}
function drag(e) {
if (!isDown) return;
e.preventDefault();
this.style.left = (e.clientX + offset[0]) + 'px';
this.style.top = (e.clientY + offset[1]) + 'px';
}
function endDrag(e) {
isDown = false;
}
createInstanceVariable.addEventListener('click', function() {
let instanceVar = document.createElement('div');
instanceVar.classList.add('instance-var');
let instanceTitle = document.createElement('h2');
instanceTitle.innerText = `Variable`;
instanceVar.append(instanceTitle);
let varName = document.createElement('input');
varName.classList.add('varName-form');
varName.placeholder = "Set variable name";
instanceVar.append(varName);
let varNameBtn = document.createElement('button');
varNameBtn.innerText = "Set Variable Name";
varNameBtn.classList.add('var-name-btn');
instanceVar.append(varNameBtn);
let varType = document.createElement('input');
varType.placeholder = 'Specify variable type';
varType.classList.add('variable-type-form');
let varTypeBtn = document.createElement('button');
varTypeBtn.innerText = "Set variable type";
varTypeBtn.classList.add('method-type-btn');
instanceVar.appendChild(varType);
instanceVar.appendChild(varTypeBtn);
document.getElementById("box-container").appendChild(instanceVar);
instanceVar.style.left = box.offsetLeft + box.offsetWidth + 10 + 'px';
instanceVar.style.top = box.offsetTop + 'px';
instanceVar.addEventListener("mousedown", startDrag);
instanceVar.addEventListener("mousemove", drag);
instanceVar.addEventListener("mouseup", endDrag);
instanceVar.addEventListener("mouseleave", endDrag);
varNameBtn.addEventListener('click', function() {
variableName = varName.value;
instanceTitle.innerText = `Variable ${variableName}`;
});
varTypeBtn.addEventListener('click', function() {
if(amtVars === 0){
classNameCode[classTitle.value] += `\n\tprivate: \n\t\t${varType.value} ${variableName};\n`;
amtVars++;
} else{
classNameCode[classTitle.value] += `\n\t\t${varType.value} ${variableName};\n`;
}
});
});
createSubclassButton.addEventListener("click", function() {
let subBox = document.createElement("div");
subBox.classList.add("subbox");
let subTitle = document.createElement("h2");
subTitle.innerText = `Method`;
subBox.append(subTitle);
let methodTitle = document.createElement('input');
methodTitle.classList.add('method-name-form');
methodTitle.placeholder = 'Set method name'
let methodTitleBtn = document.createElement('button');
methodTitleBtn.innerText = "Set Method Name";
methodTitleBtn.classList.add('method-name-btn');
subBox.appendChild(methodTitle);
subBox.appendChild(methodTitleBtn);
let returnType = document.createElement('input');
returnType.placeholder = 'Specify return type';
returnType.classList.add('method-return-type-form');
let returnTypeBtn = document.createElement('button');
returnTypeBtn.innerText = "Set return type";
returnTypeBtn.classList.add('method-return-type-btn');
subBox.appendChild(returnType);
subBox.appendChild(returnTypeBtn);
document.getElementById("box-container").appendChild(subBox);
subBox.style.left = box.offsetLeft + box.offsetWidth + 10 + 'px';
subBox.style.top = box.offsetTop + 'px';
subBox.addEventListener("mousedown", startDrag);
subBox.addEventListener("mousemove", drag);
subBox.addEventListener("mouseup", endDrag);
subBox.addEventListener("mouseleave", endDrag);
methodTitleBtn.addEventListener('click', function() {
console.log(methodTitle.value);
subTitle.innerText = `Method ${methodTitle.value}`;
});
returnTypeBtn.addEventListener('click', function() {
console.log(returnType.value);
if (methodCount === 0) {
classNameCode[classTitle.value] += `\tpublic:\n\t\t${returnType.value} ${methodTitle.value}() {\n\n\t\t}`;
methodCount++;
amtVars = 0;
} else {
classNameCode[classTitle.value] += `\n\t\t${returnType.value} ${methodTitle.value}() {\n\n\t\t}`;
amtVars = 0;
}
});
});
classTitleBtn.addEventListener("click", function() {
console.log(classTitle.value);
// generatedCode = `class ${classTitle.value} {\n\t`
title.innerHTML = `Class ${classTitle.value}`;
classNameCode[classTitle.value] = `\nclass ${classTitle.value} {\n`
});
});
// MODAL FOR CODE GENERATION
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var modalContent = document.querySelector('.modal-content');
btn.onclick = function() {
modal.style.display = "block";
modalContent.innerText = "";
console.log(classNameCode);
if (Object.keys(classNameCode).length === 0) {
modalContent.innerText = "No Code Yet";
}
for (var key in classNameCode) {
var codeToAppend = `${classNameCode[key]} \n}`;
console.log(codeToAppend);
modalContent.innerText += codeToAppend;
}
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Css:
body {
background-size: 40px 40px;
background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
background-color: darkgray;
}
#create-box {
padding: 10px 20px;
background-color: #4CAF50;
border-radius: 5px;
border: none;
color: white;
}
#create-box:hover{
background-color: #5dc861;
cursor: pointer;
}
#create-box:active{
cursor:pointer
}
.box {
position: absolute;
width: 250px;
height: 250px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
border-radius: 5px;
resize: both;
overflow: auto;
z-index: 1;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.box h2 {
margin: 0;
padding: 10px;
}
.subbox {
width: 200px;
height: 200px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
position: absolute;
z-index: 1;
border-radius: 5px;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
white-space: pre;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
#myBtn{
padding: 10px 20px;
background-color: #4CAF50;
border-radius: 5px;
border: none;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#myBtn:hover{
background-color: #5dc861;
cursor: pointer;
}
#myBtn:active{
cursor:pointer
}
#buttons{
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.class-name-form{
border-radius: 5px;
border: 1px solid black;
}
button{
border-radius: 5px;
border: none;
background-color: rgb(170, 207, 207);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button:hover{
cursor: pointer;
background-color: rgb(198, 224, 224);
}
button:active{
cursor: pointer;
}
.instance-var{
width: 200px;
height: 200px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
position: absolute;
z-index: 1;
border-radius: 5px;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Connect divs with a dynamic line

I have a button that generates a big box that is resizable and draggable. Inside of that div is another button to generate another smaller div. I want the smaller divs to be connected the bigger divs by a line. I tried leaderline, but that did not work. I want the big div to connect to each of its "child" divs. If there are 2 big divs, I dont want the big divs to be connected to each other, but instead be their own div with their own "network" of lines.
var generatedCode = "";
var classNameCode = {};
var classVariables = {};
var structNameCode = {};
var javaNameCode = {};
var variableName = "";
var amtVars = 0;
// Checking selected language
var dropDown = document.getElementById('language');
console.log(dropDown.value);
document.getElementById("create-box").addEventListener("click", function() {
amtVars = 0;
var methodCount = 0;
let box = document.createElement("div");
box.classList.add("box");
let title = document.createElement("h2");
title.innerHTML = "Class";
box.appendChild(title);
let classTitle = document.createElement('input');
classTitle.classList.add('class-name-form');
let classTitleBtn = document.createElement('button');
classTitleBtn.innerText = "Set Class Name";
classTitleBtn.classList.add('class-name-btn');
box.appendChild(classTitle);
box.appendChild(classTitleBtn);
document.getElementById("box-container").appendChild(box);
let createSubclassButton = document.createElement("button");
createSubclassButton.innerHTML = "Add Method";
box.appendChild(createSubclassButton);
let createInstanceVariable = document.createElement('button');
createInstanceVariable.classList.add('add-variable');
createInstanceVariable.innerHTML = "Add instance variable";
box.appendChild(createInstanceVariable);
box.addEventListener("mousedown", startDrag);
box.addEventListener("mousemove", drag);
box.addEventListener("mouseup", endDrag);
box.addEventListener("mouseleave", endDrag);
let offset = [0, 0];
let isDown = false;
function startDrag(e) {
isDown = true;
offset = [
this.offsetLeft - e.clientX,
this.offsetTop - e.clientY
];
}
function drag(e) {
if (!isDown) return;
e.preventDefault();
this.style.left = (e.clientX + offset[0]) + 'px';
this.style.top = (e.clientY + offset[1]) + 'px';
}
function endDrag(e) {
isDown = false;
}
createInstanceVariable.addEventListener('click', function() {
methodCount = 0;
let instanceVar = document.createElement('div');
instanceVar.classList.add('instance-var');
let instanceTitle = document.createElement('h2');
instanceTitle.innerText = `Variable`;
instanceVar.append(instanceTitle);
let varName = document.createElement('input');
varName.classList.add('varName-form');
varName.placeholder = "Set variable name";
instanceVar.append(varName);
let varNameBtn = document.createElement('button');
varNameBtn.innerText = "Set Variable Name";
varNameBtn.classList.add('var-name-btn');
instanceVar.append(varNameBtn);
let varType = document.createElement('input');
varType.placeholder = 'Specify variable type';
varType.classList.add('variable-type-form');
let varTypeBtn = document.createElement('button');
varTypeBtn.innerText = "Set variable type";
varTypeBtn.classList.add('method-type-btn');
instanceVar.appendChild(varType);
instanceVar.appendChild(varTypeBtn);
document.getElementById("box-container").appendChild(instanceVar);
instanceVar.style.left = box.offsetLeft + box.offsetWidth + 10 + 'px';
instanceVar.style.top = box.offsetTop + 'px';
instanceVar.addEventListener("mousedown", startDrag);
instanceVar.addEventListener("mousemove", drag);
instanceVar.addEventListener("mouseup", endDrag);
instanceVar.addEventListener("mouseleave", endDrag);
varNameBtn.addEventListener('click', function() {
variableName = varName.value;
instanceTitle.innerText = `Variable ${variableName}`;
});
varTypeBtn.addEventListener('click', function() {
if (amtVars === 0) {
classNameCode[classTitle.value] += `\n\tprivate: \n\t\t${varType.value} ${variableName};\n`;
javaNameCode[classTitle.value] += `\n private ${varType.value} ${variableName};`;
console.log(javaNameCode[classTitle.value]);
amtVars++;
} else {
classNameCode[classTitle.value] += `\n\t\t${varType.value} ${variableName};\n`;
javaNameCode[classTitle.value] += `\n private ${varType.value} ${variableName};`;
}
});
});
createSubclassButton.addEventListener("click", function() {
let subBox = document.createElement("div");
subBox.classList.add("subbox");
let subTitle = document.createElement("h2");
subTitle.innerText = `Method`;
subBox.append(subTitle);
let methodTitle = document.createElement('input');
methodTitle.classList.add('method-name-form');
methodTitle.placeholder = 'Set method name'
let methodTitleBtn = document.createElement('button');
methodTitleBtn.innerText = "Set Method Name";
methodTitleBtn.classList.add('method-name-btn');
subBox.appendChild(methodTitle);
subBox.appendChild(methodTitleBtn);
let returnType = document.createElement('input');
returnType.placeholder = 'Specify return type';
returnType.classList.add('method-return-type-form');
let returnTypeBtn = document.createElement('button');
returnTypeBtn.innerText = "Set return type";
returnTypeBtn.classList.add('method-return-type-btn');
subBox.appendChild(returnType);
subBox.appendChild(returnTypeBtn);
document.getElementById("box-container").appendChild(subBox);
subBox.style.left = box.offsetLeft + box.offsetWidth + 10 + 'px';
subBox.style.top = box.offsetTop + 'px';
subBox.addEventListener("mousedown", startDrag);
subBox.addEventListener("mousemove", drag);
subBox.addEventListener("mouseup", endDrag);
subBox.addEventListener("mouseleave", endDrag);
methodTitleBtn.addEventListener('click', function() {
console.log(methodTitle.value);
if (methodTitle.value === classTitle.value) {
subTitle.innerText = `Constructor for class ${classTitle.value}`;
} else {
subTitle.innerText = `Method ${methodTitle.value}`;
}
});
returnTypeBtn.addEventListener('click', function() {
console.log(returnType.value);
if (methodCount === 0) {
classNameCode[classTitle.value] += `\tpublic:\n\t\t${returnType.value} ${methodTitle.value}() {\n\n\t\t}`;
javaNameCode[classTitle.value] += `\n public ${returnType.value} ${methodTitle.value}(){\n\n}`;
console.log(javaNameCode[classTitle.value]);
methodCount++;
amtVars = 0;
} else {
classNameCode[classTitle.value] += `\n\t\t${returnType.value} ${methodTitle.value}() {\n\n\t\t}`;
javaNameCode[classTitle.value] += `\n public ${returnType.value} ${methodTitle.value}(){\n\n }`;
console.log(javaNameCode[classTitle.value]);
amtVars = 0;
}
});
});
classTitleBtn.addEventListener("click", function() {
console.log(classTitle.value);
// generatedCode = `class ${classTitle.value} {\n\t`
title.innerHTML = `Class ${classTitle.value}`;
classNameCode[classTitle.value] = `\nclass ${classTitle.value} {\n`
javaNameCode[classTitle.value] = `\n public class ${classTitle.value} {\n`;
});
});
var createStructBtn = document.getElementById('create-struct');
createStructBtn.addEventListener('click', () => {
var nameCount = 0;
var dTypeCount = 0;
var amtStructMembers = 0;
let structBox = document.createElement('div');
structBox.classList.add('structBox');
let structBoxTitle = document.createElement('h2');
structBoxTitle.classList.add('structBoxTitle');
structBoxTitle.innerText = 'Struct';
structBox.appendChild(structBoxTitle);
let structNameForm = document.createElement('input');
structNameForm.classList.add('structNameForm');
structBox.appendChild(structNameForm);
document.getElementById('box-container').appendChild(structBox);
let structNameBtn = document.createElement('button');
structNameBtn.innerText = "Set struct name";
structNameBtn.classList.add('structNameBtn');
structBox.appendChild(structNameBtn);
// Create the attribute div for each var attr of the struct
let structAtrBtn = document.createElement('button');
structAtrBtn.innerText = "Add a struct member";
structBox.appendChild(structAtrBtn);
structNameBtn.addEventListener('click', () => {
structBoxTitle.innerText = `Struct ${structNameForm.value}`;
});
// When they create a new instance variable div
structAtrBtn.addEventListener('click', () => {
nameCount = 0;
let structAtrBox = document.createElement('div');
structAtrBox.classList.add('structAtrBox');
let structAtrBoxTitle = document.createElement('h2');
structAtrBoxTitle.innerText = "Member";
structAtrBox.appendChild(structAtrBoxTitle);
// Data Type
let memberDType = document.createElement('input');
memberDType.placeholder = 'Set member data type';
structAtrBox.appendChild(memberDType);
let memberDTypeSubmit = document.createElement('button');
memberDTypeSubmit.innerText = 'Set datatype';
structAtrBox.appendChild(memberDTypeSubmit);
// Name
let memberName = document.createElement('input');
memberName.placeholder = 'Set member name';
structAtrBox.appendChild(memberName);
let memberNameSubmit = document.createElement('button');
memberNameSubmit.innerText = 'Set name';
structAtrBox.appendChild(memberNameSubmit);
document.getElementById("box-container").appendChild(structAtrBox);
structAtrBox.style.left = structBox.offsetLeft + structBox.offsetWidth + 10 + 'px';
structAtrBox.style.top = structBox.offsetTop + 'px';
structAtrBox.addEventListener("mousedown", startDrag);
structAtrBox.addEventListener("mousemove", drag);
structAtrBox.addEventListener("mouseup", endDrag);
structAtrBox.addEventListener("mouseleave", endDrag);
let offset = [0, 0];
let isDown = false;
function startDrag(e) {
isDown = true;
offset = [
this.offsetLeft - e.clientX,
this.offsetTop - e.clientY
];
}
function drag(e) {
if (!isDown) return;
e.preventDefault();
this.style.left = (e.clientX + offset[0]) + 'px';
this.style.top = (e.clientY + offset[1]) + 'px';
}
function endDrag(e) {
isDown = false;
}
// TODO: Add event handlers for both btn clicks
memberDTypeSubmit.addEventListener('click', () => {
console.log(`Data type: ${memberDType.value}`);
});
memberNameSubmit.addEventListener('click', () => {
if (nameCount === 0){
console.log(`Member ${memberName.value}`);
structAtrBoxTitle.innerText = `Member ${memberName.value}`;
nameCount++;
}
if (amtStructMembers === 0){
structNameCode[structNameForm.value] = `\nstruct {\n ${memberDType.value} ${memberName.value};\n`;
amtStructMembers++;
} else {
structNameCode[structNameForm.value] += `
${memberDType.value} ${memberName.value};\n`;
}
});
});
structBox.addEventListener("mousedown", startDrag);
structBox.addEventListener("mousemove", drag);
structBox.addEventListener("mouseup", endDrag);
structBox.addEventListener("mouseleave", endDrag);
let offset = [0, 0];
let isDown = false;
function startDrag(e) {
isDown = true;
offset = [
this.offsetLeft - e.clientX,
this.offsetTop - e.clientY
];
}
function drag(e) {
if (!isDown) return;
e.preventDefault();
this.style.left = (e.clientX + offset[0]) + 'px';
this.style.top = (e.clientY + offset[1]) + 'px';
}
function endDrag(e) {
isDown = false;
}
});
// MODAL FOR CODE GENERATION
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var modalContent = document.querySelector('.modal-content');
btn.onclick = function() {
modal.style.display = "block";
modalContent.innerText = "";
console.log(classNameCode);
if (dropDown.value == "c++") {
if (Object.keys(classNameCode).length === 0 && Object.keys(structNameCode).length === 0) {
modalContent.innerText = "No Code Yet";
}
for (var i in structNameCode){
var codeForAppending = `${structNameCode[i]} \n}, ${i};\n`;
console.log(codeForAppending);
modalContent.innerText += codeForAppending;
}
for (var key in classNameCode) {
var codeToAppend = `${classNameCode[key]} \n}`;
console.log(codeToAppend);
modalContent.innerText += codeToAppend;
}
} else {
if (Object.keys(javaNameCode).length === 0) {
modalContent.innerText = "No Code Yet";
}
for (var key in javaNameCode) {
var code = `${javaNameCode[key]} \n}`;
modalContent.innerText += code;
}
}
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {
background-size: 40px 40px;
background-image: radial-gradient(circle, #000000 1px, rgba(0, 0, 0, 0) 1px);
background-color: darkgray;
}
#create-box {
padding: 10px 20px;
background-color: #4CAF50;
border-radius: 5px;
border: none;
color: white;
}
#create-box:hover{
background-color: #5dc861;
cursor: pointer;
}
#create-box:active{
cursor:pointer
}
#create-struct {
padding: 10px 20px;
background-color: #4CAF50;
border-radius: 5px;
border: none;
color: white;
}
#create-struct:hover{
background-color: #5dc861;
cursor: pointer;
}
#create-struct:active{
cursor:pointer
}
.box {
position: absolute;
width: 250px;
height: 250px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
border-radius: 5px;
resize: both;
overflow: auto;
z-index: 1;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.box h2 {
margin: 0;
padding: 10px;
}
.subbox {
width: 200px;
height: 200px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
position: absolute;
z-index: 1;
border-radius: 5px;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
white-space: pre;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
#myBtn{
padding: 10px 20px;
background-color: #4CAF50;
border-radius: 5px;
border: none;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#myBtn:hover{
background-color: #5dc861;
cursor: pointer;
}
#myBtn:active{
cursor:pointer
}
#buttons{
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.class-name-form{
border-radius: 5px;
border: 1px solid black;
}
button{
border-radius: 5px;
border: none;
background-color: rgb(170, 207, 207);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button:hover{
cursor: pointer;
background-color: rgb(198, 224, 224);
}
button:active{
cursor: pointer;
}
.instance-var{
width: 200px;
height: 200px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
position: absolute;
z-index: 1;
border-radius: 5px;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.structBox {
position: absolute;
width: 250px;
height: 250px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
border-radius: 5px;
resize: both;
overflow: auto;
z-index: 1;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.structAtrBox {
width: 200px;
height: 200px;
background-color: #f1f1f1;
border: 1px solid #d3d3d3;
position: absolute;
z-index: 1;
border-radius: 5px;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
#language {
padding: 10px 20px;
background-color: #4CAF50;
border-radius: 5px;
border: none;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
<!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">
<link rel="stylesheet" href="./static/styles.css">
<title>Program Visualizer And Generator</title>
</head>
<body>
<div id="buttons">
<button id="create-box">Create Class</button>
<button id="create-struct">Create Struct</button>
<button id="myBtn">View Code</button>
<select name="language" id="language">
<option value="c++" id="OptionC">C++</option>
<option value="java">Java</option>
</select>
</div>
<div id="box-container"></div>
<div id="struct-container"></div>
<div id="myModal" class="modal">
<div class="modal-content">
<code></code>
</div>
</div>
<script src="./functionality/main.js"></script>
</body>
</html>

querySelector doesn't work for elements that created by appendchild

i have written this code for An
IOT project
JS code
CSS code
HTML code
var DID = "7223187";
var RPNL = document.createElement("div");
RPNL.id = "Relays-panel";
RPNL.dataset.did = DID;
RPNL.style.display = "block";
document.getElementById("Relays").appendChild(RPNL);
var lable = document.createElement("label");
lable.style.position = "relative";
lable.style.left = "35%";
RPNL.appendChild(lable);
var input1 = document.createElement("input");
input1.type = "hidden";
input1.name = "formName";
input1.value = "onoffswitchs";
lable.appendChild(input1);
var div1 = document.createElement("div");
lable.appendChild(div1);
var div2 = document.createElement("div");
div2.style.marginTop = "-7px";
div2.style.width = "Auto";
div2.style.cssFloat = "left";
div2.style.color = "white";
div2.style.marginLeft = "-28%";
div2.style.paddingRight = "30%";
div1.appendChild(div2);
var div21 = document.createElement("div");
div21.className = "tab";
div2.appendChild(div21);
var but1 = document.createElement("button");
but1.className = "tablinks";
but1.style.borderBottom = "7px solid red";
but1.dataset.rn = "3";
but1.dataset.idtag = DID;
but1.onclick = function() {
openRelay(this)
};
but1.innerHTML = "scnd3";
div21.appendChild(but1);
var but2 = document.createElement("button");
but2.className = "tablinks";
but2.style.borderBottom = "7px solid red";
but2.dataset.rn = "2";
but2.dataset.idtag = DID;
but2.onclick = function() {
openRelay(this)
};
but2.innerHTML = "scnd2";
div21.appendChild(but2);
var but3 = document.createElement("button");
but3.className = "tablinks";
but3.style.borderBottom = "7px solid red";
but3.dataset.rn = "1";
but3.dataset.idtag = DID;
but3.onclick = function() {
openRelay(this)
};
but3.innerHTML = "scnd1";
div21.appendChild(but3);
var div22 = document.createElement("div");
div22.id = "R1d";
div22.dataset.Tag = "Rtab1";
div22.className = "tabcontent";
div22.style.display = "none";
div2.appendChild(div22);
var div221 = document.createElement("div");
div221.className = "onoffswitch";
div22.appendChild(div221);
var switch1 = document.createElement("input");
switch1.type = "checkbox";
switch1.className = "onoffswitch-checkbox";
switch1.id = "R1";
switch1.dataset.drn = "1";
switch1.dataset.idtag = DID;
switch1.onchange = function() {
Butscan2(this)
};
switch1.checked = false;
div221.appendChild(switch1);
var lable221 = document.createElement("label");
lable221.className = "onoffswitch-label";
lable221.htmlFor = "R1";
switch1.appendChild(lable221);
var span2211 = document.createElement("span");
span2211.className = "onoffswitch-inner";
lable221.appendChild(span2211);
var span2212 = document.createElement("span");
span2212.className = "onoffswitch-switch";
lable221.appendChild(span2212);
var div23 = document.createElement("div");
div23.id = "R2d";
div23.dataset.Tag = "Rtab2";
div23.className = "tabcontent";
div23.style.display = "none";
div2.appendChild(div23);
var div231 = document.createElement("div");
div231.className = "onoffswitch";
div23.appendChild(div231);
var switch2 = document.createElement("input");
switch2.type = "checkbox";
switch2.className = "onoffswitch-checkbox";
switch2.id = "R2";
switch2.dataset.drn = "2";
switch2.dataset.idtag = DID;
switch2.onchange = function() {
Butscan2(this)
};
switch2.checked = false;
div231.appendChild(switch2);
var lable222 = document.createElement("label");
lable222.className = "onoffswitch-label";
lable222.htmlFor = "R2";
switch2.appendChild(lable222);
var span2221 = document.createElement("span");
span2221.className = "onoffswitch-inner";
lable222.appendChild(span2221);
var span2222 = document.createElement("span");
span2222.className = "onoffswitch-switch";
lable222.appendChild(span2222);
var div24 = document.createElement("div");
div24.id = "R3d";
div24.dataset.Tag = "Rtab3";
div24.className = "tabcontent";
div24.style.display = "none";
div2.appendChild(div24);
var div241 = document.createElement("div");
div241.className = "onoffswitch";
div24.appendChild(div241);
var switch3 = document.createElement("input");
switch3.type = "checkbox";
switch3.className = "onoffswitch-checkbox";
switch3.id = "R3";
switch3.dataset.drn = "3";
switch3.dataset.idtag = DID;
switch3.onchange = function() {
Butscan2(this)
};
switch3.checked = false;
div241.appendChild(switch3);
var lable223 = document.createElement("label");
lable223.className = "onoffswitch-label";
lable223.htmlFor = "R3";
switch3.appendChild(lable223);
var span2231 = document.createElement("span");
span2231.className = "onoffswitch-inner";
lable223.appendChild(span2231);
var span2232 = document.createElement("span");
span2232.className = "onoffswitch-switch";
lable223.appendChild(span2232);
var table1 = document.createElement("table");
table1.style.width = "Auto";
table1.style.cssFloat = "right";
table1.style.marginRight = "-28%";
table1.style.color = "white";
div1.appendChild(table1);
var tbody1 = document.createElement("tbody");
table1.appendChild(tbody1);
var tr1 = document.createElement("tr");
tbody1.appendChild(tr1);
var table2 = document.createElement("table");
table2.style.width = "Auto";
table2.style.color = "white";
lable.appendChild(table2);
var tr21 = document.createElement("tr");
table2.appendChild(tr21);
var form21 = document.createElement("form");
tr21.appendChild(form21);
var th21 = document.createElement("th");
th21.style.position = "relative";
th21.style.right = "39px";
th21.style.paddingRight = "89px";
form21.appendChild(th21);
var h21 = document.createElement("h");
h21.innerHTML = "Time disabled:";
th21.appendChild(h21);
var radio1 = document.createElement("input");
radio1.type = "radio";
radio1.name = "R1Tset";
radio1.dataset.tag = "OFFradio";
radio1.dataset.idtag = DID;
radio1.onclick = function() {
showRtimer(this.dataset.idtag, 0)
};
radio1.checked = true;
th21.appendChild(radio1);
var br1 = document.createElement("br");
th21.appendChild(br1);
var h22 = document.createElement("h");
h22.innerHTML = "Timer:";
th21.appendChild(h22);
var radio2 = document.createElement("input");
radio2.type = "radio";
radio2.name = "R1Tset";
radio2.dataset.tag = "OFFradio";
radio2.dataset.idtag = DID;
radio2.onclick = function() {
showRtimer(this.dataset.idtag, 1)
};
radio2.checked = false;
th21.appendChild(radio2);
var h23 = document.createElement("h");
h23.innerHTML = "Auto Time:";
th21.appendChild(h23);
var radio3 = document.createElement("input");
radio3.type = "radio";
radio3.name = "R1Tset";
radio3.dataset.tag = "OFFradio";
radio3.dataset.idtag = DID;
radio3.onclick = function() {
showRtimer(this.dataset.idtag, 2)
};
radio3.checked = false;
th21.appendChild(radio3);
var div3 = document.createElement("div");
div3.id = "Timer-Setting";
div3.dataset.Tag = "countdown";
div3.style.position = "relative";
div3.style.right = "100px";
div3.style.display = "none";
lable.appendChild(div3);
var h31 = document.createElement("h");
h31.innerHTML = "Time Set :";
div3.appendChild(h31);
var br2 = document.createElement("br");
div3.appendChild(br2);
var h32 = document.createElement("h");
h32.innerHTML = "H :";
div3.appendChild(h32);
var radio4 = document.createElement("input");
radio4.type = "number";
radio4.name = "hour";
radio4.value = '0';
radio4.min = '0';
radio4.max = '24';
radio4.style.width = "30px";
div3.appendChild(radio4);
var h33 = document.createElement("h");
h33.innerHTML = "M :";
div3.appendChild(h33);
var radio5 = document.createElement("input");
radio5.type = "number";
radio5.name = "minute";
radio5.value = '0';
radio5.min = '0';
radio5.max = '59';
radio5.style.width = "30px";
div3.appendChild(radio5);
var h34 = document.createElement("h");
h34.innerHTML = "S :";
div3.appendChild(h34);
var radio6 = document.createElement("input");
radio6.type = "number";
radio6.name = "second";
radio6.value = '30';
radio6.min = '0';
radio6.max = '59';
radio6.style.width = "30px";
div3.appendChild(radio6);
var div4 = document.createElement("div");
div4.id = "Time-Setting";
div4.dataset.Tag = "ATime";
div4.style.position = "relative";
div4.style.right = "100px";
div4.style.display = "none";
lable.appendChild(div4);
var h41 = document.createElement("h");
h41.innerHTML = "ON time Setting :";
div4.appendChild(h41);
var radio7 = document.createElement("input");
radio7.type = "time";
div4.appendChild(radio7);
var br3 = document.createElement("br");
div4.appendChild(br3);
var h42 = document.createElement("h");
h42.innerHTML = "OFF time Setting : ";
div4.appendChild(h42);
var radio8 = document.createElement("input");
radio8.type = "time";
div4.appendChild(radio8);
function showRtimer(Didm, timeMode) {
var va = document.querySelector('[data-did="' + Didm + '"]');
if (timeMode == 0) {
va.querySelector('[data-Tag="ATime"]').style.display = "none";
va.querySelector('[data-Tag="countdown"]').style.display = "none";
} else if (timeMode == 1) {
va.querySelector('[data-Tag="ATime"]').style.display = "none";
va.querySelector('[data-Tag="countdown"]').style.display = "block";
} else if (timeMode == 2) {
va.querySelector('[data-Tag="ATime"]').style.display = "block";
va.querySelector('[data-Tag="countdown"]').style.display = "none";
}
}
function openRelay(evt) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
var va = document.querySelector('[data-did="' + evt.dataset.idtag + '"]');
var val = va.querySelector('[data-Tag="Rtab' + evt.dataset.rn + '"]');
val.style.display = "block";
evt.className += " active";
}
/* Setting background color green */
body {
background-color: #008060;
}
/* all links on mouse hover have a golden reaction */
#links {
text-decoration: none;
color: #305030;
}
#links:hover {
color: gold;
}
/* Relay Number Tabs (in Farsi relay 1 , Relay 2 , ... ) general settings */
.tab {
overflow: hidden;
border-bottom: 1px solid #ccc;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 22px;
color: floralwhite;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #00bf4442;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ad2626;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
/* Fade in tabs */
#-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Circle pushButtons (like setting buttons) CSS */
.pushButton {
position: relative;
width: 60px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.pushButton-checkbox {
display: none;
}
.pushButton-label {
display: block;
overflow: hidden;
cursor: pointer;
width: 60px;
height: 60px;
background-color: #A8EDC4;
border: 3px solid silver;
border-radius: 100%;
}
.pushButton-inner {
display: block;
width: 200%; //margin-left: -100%;}
.pushButton-inner {
display: block;
float: left;
width: 100%;
height: 100%;
font-size: 15px;
position: relative;
top: 17px;
left: 4px;
color: #004400;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.Window {
position: relative;
top: 70px;
left: 30px;
background-color: #00AA88;
width: 350px;
border: 10px solid #006633;
border-radius: 40px;
}
.setting-forms {
position: relative;
top: 5px;
left: 15px;
width: 90%;
border-top: 3px solid silver;
border-bottom: 3px solid silver;
}
#keys {
width: 60px;
height: 60px;
background-color: olive;
border: 3px solid silver;
border-radius: 100%;
position: absolute;
top: 90px;
}
#keys-inner {
position: relative;
top: 17px;
left: 7px;
color: silver;
}
#Relays-panel,
#Temp_attach,
#PIR_attach {
position: relative;
align: center;
background-color: #204020;
color: white;
width: 320px;
border-radius: 10px;
border: 5px solid white;
}
{
margin-bottom: 10px;
padding: 10%;
position: relative;
float: right;
background-color: #204020;
color: white;
width: 320px;
border-radius: 10px;
border: 5px solid white;
}
#Relays {
position: absolute;
top: 200px;
width: 50%;
right: 1%;
}
#sensor_settings {
position: absolute;
top: 200px;
width: 50%;
}
#temp_temp,
#temp_tolerance {
width: 90%;
}
/* Relay ON - OFF Slider switchs CSS */
.onoffswitch {
right: 27%;
position: relative;
width: 90px;
float: right;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch-checkbox {
display: none;
}
.onoffswitch-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 2px solid #7A7A7A;
border-radius: 50px;
}
.onoffswitch-inner {
display: block;
width: 200%;
margin-left: -100%;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
display: block;
float: left;
width: 50%;
height: 40px;
padding: 0;
line-height: 40px;
font-size: 20px;
color: white;
font-family: Trebuchet, Arial, sans-serif;
font-weight: bold;
box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "ON";
padding-left: 5px;
background-color: #A8EDC4;
color: #139402;
text-align: left;
}
.onoffswitch-inner:after {
content: "OFF";
padding-right: 5px;
background-color: #F0AAB5;
color: #AD2626;
text-align: right;
}
.onoffswitch-switch {
display: block;
width: 28px;
margin: 6px;
background: #AD2626;
position: absolute;
top: 0;
bottom: 0;
right: 46px;
border: 2px solid #7A7A7A;
border-radius: 50px;
transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {
right: 0px;
background-color: #139402;
}
<div id='Relays'>
<div id='Relays-panel' data-did='7223184' style="display: block;">
<!--form method='POST' style='position:relative;left:35%;'-->
<label style='position:relative;left:35%;'>
<input type='hidden' name='formName' value='onoffswitchs'>
<div>
<div style="margin-top: -7px; width:Auto; float: left; color:white; margin-left: -28%;padding-right: 30%;">
<div class="tab" >
<button class="tablinks" style="border-bottom: 7px solid red;" data-rn='3' data-idtag="7223184" onclick="openRelay(this)">FST3</button>
<button class="tablinks" style="border-bottom: 7px solid red;" data-rn='2' data-idtag="7223184" onclick="openRelay(this)">FST2</button>
<button class="tablinks" checked style="border-bottom: 7px solid red;" data-rn='1' data-idtag="7223184" onclick="openRelay(this)">FST1</button>
</div>
<div id="R1d" data-Tag= "Rtab1" class="tabcontent" style="display: none;">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox" id="R1" data-drn='1' data-idtag="7223184" onchange="Butscan2(this)" unchecked="">
<label class="onoffswitch-label" for="R1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label></input>
</div>
</div>
<div id="R2d" data-Tag="Rtab2" class="tabcontent" style="display: none;">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox" id="R2" data-drn='2' data-idtag="7223184" onchange="Butscan2(this)" unchecked="">
<label class="onoffswitch-label" for="R2">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label></input>
</div>
</div>
<div id="R3d" data-Tag="Rtab3" class="tabcontent" style="display: none;">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox" id="R3" data-drn='3' data-idtag="7223184" onchange="Butscan2(this)" unchecked=""></input>
<label class="onoffswitch-label" for="R3">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<table style="width:Auto;float: right;margin-right: 55%; color:white">
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
<table style="width:Auto; color:white">
<tr>
<th>
<div class="led-box" style='display:none;'>
<div class="led-green" id="R1LED" data-Tag="LED"></div>
</div>
</th>
<tr>
<form>
<th style='position:relative;right: 39px; padding-right: 89px;'>
Time disabled:<input type='radio' name='R1Tset' data-Tag='OFFradio' data-idtag="7223184" onclick='showRtimer(this.dataset.idtag,0)' checked>
<br/> Timer: <input type='radio' name='R1Tset' data-Tag='Ctimeradio' data-idtag="7223184" onclick='showRtimer(this.dataset.idtag,1)'> Auto Time: <input type='radio' name='R1Tset' data-Tag='ATimeradio' data-idtag="7223184" onclick='showRtimer(this.dataset.idtag,2)'>
</th>
</form>
</tr>
</table>
<div id='Timer-Setting' data-Tag="countdown" style='position:relative;right:100px;display:none;'>
Time Set :<br/> H :<input type="number" name="hour" value='0' min="0" max="24" style='width=30px;'> M : <input type="number" name="minute" value='0' min="0" max="59" style='width=30px;'> S : <input type="number" name="second" value='30' min="0" max="59"
style='width=30px;'>
</div>
<div id='Time-Setting' data-Tag="ATime" style='position:relative;right:100px;display:none;'>
ON time Setting : <input type='time'>
<br/> OFF time Setting : <input type='time'>
</div>
</label>
</div>
</div>
these two blocks are diffrent ,
first one is made by html
Second one is made with javascript!
everything works fine except that Queryselector
in functions doesn't find elements and because of that code doent work properly :(
for example i have this function that :
first hide every open tabs
second show the tab we want to show!
function openRelay(evt)
{
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++)
{
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++)
{
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
var va = document.querySelector('[data-did="'+evt.dataset.idtag+'"]');
var val = va.querySelector('[data-Tag="Rtab'+evt.dataset.rn+'"]');
val.style.display = "block";
evt.className += " active";
}
what can i do ?
The problem here is what happens when you use a capital letter with data set and how the attributes is created.
var d = document.createElement("div")
d.dataset.Bar = "hello"
document.getElementById("out").appendChild(d)
console.log(document.getElementById("out").innerHTML)
<div id="out"></div>
The attribute for Bar is data--bar not data-Bar

Compare input value with li content in pure Javascript

I have to do some kind of ToDo list, where I have input and button to Add item to ul list. And now I done everything except compare every li item with input value. My question is how to compare every li content with value input to prevent duplicate items. Here is the code https://jsfiddle.net/qoLtxfaw/1/
// Variables
var ul = document.getElementById("taskList");
var task = document.getElementById("task");
var btn = document.querySelector('button');
var listItem = document.getElementsByTagName("LI");
// Append close btn to each list item
for (var i = 0; i < listItem.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "js-close";
span.appendChild(txt);
listItem[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("js-close");
for (var i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.className = 'js-hide';
}
}
// proveravati ima li ul odnosno liste, ukoliko ne proverimo a nema ceo kod ce prestati da se izvrsava
if (ul) {
ul.onmouseover = function(event) {
var target = event.target;
target.style.background = '#efebeb';
};
ul.onmouseout = function(event) {
var target = event.target;
target.style.background = '';
};
}
// Add item to list on btn
btn.addEventListener('click', addItem);
// Add item to list on enter
task.onkeyup = function(e) {
if (e.keyCode == 13) {
addItem();
}
};
// // Add item to list
function addItem() {
var li = document.createElement("li");
var inputValue = document.getElementById('task').value;
li.setAttribute('id', task.value);
li.appendChild(document.createTextNode(task.value));
// ul.appendChild(li);
// compare every li item with inputValue
if (inputValue) { //if input value is true and has some value
//go trough all li items
for (var i = 0; i < listItem.length; i++) {
// compare every li item with inputValue
}
// Duplicate values don't allow in list
if (!inputValue) {
alert("No empty values are allowed!");
li.className = 'js-btn-disable';
} else {
ul.appendChild(li);
}
document.getElementById("task").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "js-close";
span.appendChild(txt);
li.appendChild(span);
for (var i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.className = 'js-hide';
}
}
}
}
#wrapper {
width: 500px;
margin: 0 auto;
background: #00bcd4;
border: 1px solid #f1f0f0;
padding-left: 10px;
font-size: 1.2em;
}
#wrapper #task {
background: transparent;
color: #ffffff;
font-size: 1.2em;
width: 80%;
height: 35px;
border: none;
border-bottom: 2px solid #ffffff;
outline: none;
margin: 15px 0 5px 0;
}
#wrapper #task ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #ffffff;
}
#wrapper #task ::-moz-placeholder {
/* Firefox 19+ */
color: #ffffff;
}
#wrapper #task :-ms-input-placeholder {
/* IE 10+ */
color: #ffffff;
}
#wrapper #task :-moz-placeholder {
/* Firefox 18- */
color: #ffffff;
}
#wrapper button {
font-size: 1.2em;
border: 2px solid #ffffff;
background: transparent;
color: #ffffff;
padding: 5px 10px;
outline: none;
cursor: pointer;
}
#wrapper ul#taskList {
padding: 0;
background: #ffffff;
list-style-type: none;
text-align: left;
margin-bottom: 0;
margin-left: -10px;
}
#wrapper ul#taskList li {
padding: 10px;
position: relative;
cursor: pointer;
}
/* Style the close button */
.js-close {
position: absolute;
right: 0;
top: 0;
padding: 10px;
}
.js-close:hover {
color: #ffffff;
}
.js-hide {
display: none;
}
.js-background {
background: #efebeb;
}
.js-btn-disable {
opacity: 0.65;
cursor: not-allowed;
}
/*# sourceMappingURL=style.css.map */
<div id="wrapper">
<input type="text" id="task" />
<button>Add</button>
<ul id="taskList"></ul>
</div>
Have a look at this. I use firstChild and I moved the validation to the top of the function.
I use the inputValue after validating it but task everywhere else.
DRY - Don't Repeat Yourself
// Variables
var ul = document.getElementById("taskList");
var task = document.getElementById("task");
var btn = document.querySelector('button');
var listItem = document.getElementsByTagName("LI");
task.focus();
// Append close btn to each list item
for (var i = 0; i < listItem.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "js-close";
span.appendChild(txt);
listItem[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("js-close");
for (var i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.className = 'js-hide';
}
}
// proveravati ima li ul odnosno liste, ukoliko ne proverimo a nema ceo kod ce prestati da se izvrsava
if (ul) {
ul.onmouseover = function(event) {
var target = event.target;
target.style.background = '#efebeb';
};
ul.onmouseout = function(event) {
var target = event.target;
target.style.background = '';
};
}
// Add item to list on btn
btn.addEventListener('click', addItem);
// Add item to list on enter
task.onkeyup = function(e) {
if (e.keyCode == 13) {
addItem();
}
};
// // Add item to list
function addItem() {
var inputValue = task.value.trim();
task.value = "";
task.focus();
// Empty or Duplicate values don't allow in list
if (!inputValue) {
alert("No empty values are allowed!");
return
}
var listItem = document.querySelectorAll("#taskList li");
for (var i = 0; i < listItem.length; i++) {
if (inputValue == listItem[i].firstChild.textContent) {
alert("No duplicate values are allowed!");
return
}
}
var li = document.createElement("li");
li.setAttribute('id', inputValue);
li.appendChild(document.createTextNode(inputValue));
ul.appendChild(li);
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "js-close";
span.appendChild(txt);
li.appendChild(span);
for (var i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.className = 'js-hide';
}
}
}
#wrapper {
width: 500px;
margin: 0 auto;
background: #00bcd4;
border: 1px solid #f1f0f0;
padding-left: 10px;
font-size: 1.2em;
}
#wrapper #task {
background: transparent;
color: #ffffff;
font-size: 1.2em;
width: 80%;
height: 35px;
border: none;
border-bottom: 2px solid #ffffff;
outline: none;
margin: 15px 0 5px 0;
}
#wrapper #task ::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
color: #ffffff;
}
#wrapper #task ::-moz-placeholder {
/* Firefox 19+ */
color: #ffffff;
}
#wrapper #task :-ms-input-placeholder {
/* IE 10+ */
color: #ffffff;
}
#wrapper #task :-moz-placeholder {
/* Firefox 18- */
color: #ffffff;
}
#wrapper button {
font-size: 1.2em;
border: 2px solid #ffffff;
background: transparent;
color: #ffffff;
padding: 5px 10px;
outline: none;
cursor: pointer;
}
#wrapper ul#taskList {
padding: 0;
background: #ffffff;
list-style-type: none;
text-align: left;
margin-bottom: 0;
margin-left: -10px;
}
#wrapper ul#taskList li {
padding: 10px;
position: relative;
cursor: pointer;
}
/* Style the close button */
.js-close {
position: absolute;
right: 0;
top: 0;
padding: 10px;
}
.js-close:hover {
color: #ffffff;
}
.js-hide {
display: none;
}
.js-background {
background: #efebeb;
}
.js-btn-disable {
opacity: 0.65;
cursor: not-allowed;
}
/*# sourceMappingURL=style.css.map */
<div id="wrapper">
<input type="text" id="task" />
<button>Add</button>
<ul id="taskList"></ul>
</div>

Edit Text button not working

I'm trying to make an edit "button" that, when clicked, will launch a prompt window where you can enter new text that will replace the old text. The issue, I think, is that there is not an "edit button" in the html, it is created when an item is added to the to-do list. So I am having trouble targeting the text I want to replace.
Right now the "EditItem" function replaces the Edit button with the text I want, not the To-Do item. Any advice would really be appreciated!!
<html>
<head>
<title> To Do List</title>
<style>
body{
font: sans-serif;
color: #00b33c;
background-color: #ffffff;
}
p{
font: sans-serif;
width: auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 500px;
}
li {
border: 2px solid #fff;
background: #e5ffff;
padding: 10px 10px;
color: #000000;
width: 500px;
}
li span{
padding-left: 10px;
padding-right: 200px;
}
.checked{
text-decoration: line-through;
font-weight: bold;
color: #ff0000;
}
li span2{
position: relative;
padding: 0 5px 0 5px;
margin: 10px;
font-size: 12px;
cursor: pointer;
border: 1px solid #000000;
background-color: #ffffff;
}
li span3{
font-size: 12px;
padding: 0 5px 0 5px;
position: relative;
cursor: pointer;
border: 1px solid #000000;
background-color: #ffffff;
}
}
</style>
</head>
<body>
<h1> To Do List</h1>
<p>
<input type="text" id="inItemText">
<button id="btnAdd">Add</button>
</p>
<ul id="todoList"></ul>
<script src="todolist.js"></script>
</body>
</html>
Javascript
//CheckBox Feature
function updateStatus() {
var cbId = this.id.replace("cb_", "");
var itemText = document.getElementById("item_" + cbId);
if (this.checked) {
itemText.className = "checked";
} else {
itemText.className = "";
}
}
//Delete Button
function deleteItem(){
this.parentNode.parentNode.removeChild(this.parentNode);
inItemText.focus();
inItemText.select();
}
//Edit Button
function editItem(e){
var newText = prompt("What would you like to change this to?");
if(newText !== null){
this.textContent = newText;
}
else{
alert("You must add something");
}
}
//Add new item to To-Do List
function addNewItem(list, itemText) {
totalItems++;
var listItem = document.createElement("li");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "cb_" + totalItems;
checkbox.onclick = updateStatus;
var span = document.createElement("span");
span.id = "item_" + totalItems;
span.textContent = itemText;
var spanDelete = document.createElement("span2");
spanDelete.setAttribute("id", listItem.id);
spanDelete.setAttribute("class", "delete");
spanDelete.textContent = "DELETE";
spanDelete.onclick = deleteItem;
var spanEdit = document.createElement("span3")
spanEdit.id = "editId_" + totalItems;
spanEdit.textContent = "EDIT";
spanEdit.onclick = editItem;
listItem.appendChild(checkbox);
listItem.appendChild(span);
listItem.appendChild(spanDelete);
listItem.appendChild(spanEdit);
list.appendChild(listItem);
}
//Add item to list with ENTER KEY
var totalItems = 0;
var inItemText = document.getElementById("inItemText");
inItemText.focus();
inItemText.onkeyup = function(event){
if(event.which === 13){
var itemText = inItemText.value;
if (!itemText || itemText === "" || itemText === " ") {
return false;
}
addNewItem(document.getElementById("todoList"), itemText);
inItemText.focus();
inItemText.select();
}
//Add item to To-Do List with "Add" Button
var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
var itemText = inItemText.value;
if (!itemText || itemText === "" || itemText === " ") {
return false;
}
btnNew.onkeyup = function(event){
if(event.which == 13){
if (!itemText || itemText === "" || itemText === " ") {
return false;
}
}
}
addNewItem(document.getElementById("todoList"), itemText);
inItemText.focus();
inItemText.select();
}
}
Looking at this function in your codes
function editItem(e){
var newText = prompt("What would you like to change this to?");
if(newText !== null){
this.textContent = newText;
}
else{
alert("You must add something");
}
}
change this line this.textContent = newText; to
this.previousElementSibling.previousElementSibling.innerHTML = newText;
here is the snippet
//CheckBox Feature
function updateStatus() {
var cbId = this.id.replace("cb_", "");
var itemText = document.getElementById("item_" + cbId);
if (this.checked) {
itemText.className = "checked";
} else {
itemText.className = "";
}
}
//Delete Button
function deleteItem(){
this.parentNode.parentNode.removeChild(this.parentNode);
inItemText.focus();
inItemText.select();
}
//Edit Button
function editItem(e){
var newText = prompt("What would you like to change this to?");
if(newText !== null){
this.previousElementSibling.previousElementSibling.innerHTML = newText;
}
else{
alert("You must add something");
}
}
//Add new item to To-Do List
function addNewItem(list, itemText) {
totalItems++;
var listItem = document.createElement("li");
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = "cb_" + totalItems;
checkbox.onclick = updateStatus;
var span = document.createElement("span");
span.id = "item_" + totalItems;
span.textContent = itemText;
var spanDelete = document.createElement("span2");
spanDelete.setAttribute("id", listItem.id);
spanDelete.setAttribute("class", "delete");
spanDelete.textContent = "DELETE";
spanDelete.onclick = deleteItem;
var spanEdit = document.createElement("span3")
spanEdit.id = "editId_" + totalItems;
spanEdit.textContent = "EDIT";
spanEdit.onclick = editItem;
listItem.appendChild(checkbox);
listItem.appendChild(span);
listItem.appendChild(spanDelete);
listItem.appendChild(spanEdit);
list.appendChild(listItem);
}
//Add item to list with ENTER KEY
var totalItems = 0;
var inItemText = document.getElementById("inItemText");
inItemText.focus();
inItemText.onkeyup = function(event){
if(event.which === 13){
var itemText = inItemText.value;
if (!itemText || itemText === "" || itemText === " ") {
return false;
}
addNewItem(document.getElementById("todoList"), itemText);
inItemText.focus();
inItemText.select();
}
//Add item to To-Do List with "Add" Button
var btnNew = document.getElementById("btnAdd");
btnNew.onclick = function() {
var itemText = inItemText.value;
if (!itemText || itemText === "" || itemText === " ") {
return false;
}
btnNew.onkeyup = function(event){
if(event.which == 13){
if (!itemText || itemText === "" || itemText === " ") {
return false;
}
}
}
addNewItem(document.getElementById("todoList"), itemText);
inItemText.focus();
inItemText.select();
}
}
body{
font: sans-serif;
color: #00b33c;
background-color: #ffffff;
}
p{
font: sans-serif;
width: auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
width: 500px;
}
li {
border: 2px solid #fff;
background: #e5ffff;
padding: 10px 10px;
color: #000000;
width: 500px;
}
li span{
padding-left: 10px;
padding-right: 200px;
}
.checked{
text-decoration: line-through;
font-weight: bold;
color: #ff0000;
}
li span2{
position: relative;
padding: 0 5px 0 5px;
margin: 10px;
font-size: 12px;
cursor: pointer;
border: 1px solid #000000;
background-color: #ffffff;
}
li span3{
font-size: 12px;
padding: 0 5px 0 5px;
position: relative;
cursor: pointer;
border: 1px solid #000000;
background-color: #ffffff;
}
}
<body>
<h1> To Do List</h1>
<p>
<input type="text" id="inItemText">
<button id="btnAdd">Add</button>
</p>
<ul id="todoList"></ul>
<script src="todolist.js"></script>
</body>

Categories