We Keep Coding

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>

Unable to edit the label text

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>

javascript on a webpage displaying text wrongly

I have JS code on a webpage that loads questions in from mysql db and displays the text . What happens is that it cuts off words at the end of the line and continues the word on the next line at the start. So all text across the screen starts/ends at the same point.
This seems to be the code where it displays the text.
For example the text will look like at the end of a line 'cont' and then on next line at the start 'inue'.
How do i fix this?
var questions = <?=$questions;?>;
// Initialize variables
//------------------------------------------------------------------
var tags;
var tagsClass = '';
var liTagsid = [];
var correctAns = 0;
var isscorrect = 0;
var quizPage = 1;
var currentIndex = 0;
var currentQuestion = questions[currentIndex];
var prevousQuestion;
var previousIndex = 0;
var ulTag = document.getElementsByClassName('ulclass')[0];
var button = document.getElementById('submit');
var questionTitle = document.getElementById('question');
//save class name so it can be reused easily
//if I want to change it, I have to change it one place
var classHighlight = 'selected';
// Display Answers and hightlight selected item
//------------------------------------------------------------------
function showQuestions (){
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
if (currentIndex != 0) {
// create again submit button only for next pages
ulTag.innerHTML ='';
button.innerHTML = 'Submit';
button.className = 'submit';
button.id = 'submit';
if(quizPage<=questions.length){
//update the number of questions displayed
document.getElementById('quizNumber').innerHTML = quizPage;
}
}
//Display Results in the final page
if (currentIndex == (questions.length)) {
ulTag.innerHTML = '';
document.getElementById('question').innerHTML = '';
if(button.id == 'submit'){
button.className = 'buttonload';
button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>Loading';
}
showResults();
return
}
questionTitle.innerHTML = "Question No:" + quizPage + " "+currentQuestion.question.category_name +"<br/>"+ currentQuestion.question.text;
if(currentQuestion.question.filename !== ''){
var br = document.createElement('br');
questionTitle .appendChild(br);
var img = document.createElement('img');
img.src = currentQuestion.question.filename;
img.className = 'imagecenter';
img.width = 750;
img.height = 350;
questionTitle .appendChild(img);
}
// create a for loop to generate the options and display them in the page
for (var i = 0; i < currentQuestion.options.length; i++) {
// creating options
var newAns = document.createElement('li');
newAns.id = 'ans'+ (i+1);
newAns.className = "notSelected listyle";
var textAns = document.createTextNode(currentQuestion.options[i].optiontext);
newAns.appendChild(textAns);
if(currentQuestion.options[i].file !== ''){
var br = document.createElement('br');
newAns .appendChild(br);
var img1 = document.createElement('img');
img1.src = currentQuestion.options[i].file;
img1.className = 'optionimg';
img1.width = 250;
img1.height = 250;
newAns .appendChild(img1);
newAns .appendChild(br);
}
var addNewAnsHere = document.getElementById('options');
addNewAnsHere.appendChild(newAns);
}
//.click() will return the result of $('.notSelected')
var $liTags = $('.notSelected').click(function(list) {
list.preventDefault();
//run removeClass on every element
//if the elements are not static, you might want to rerun $('.notSelected')
//instead of the saved $litTags
$liTags.removeClass(classHighlight);
//add the class to the currently clicked element (this)
$(this).addClass(classHighlight);
//get id name of clicked answer
for (var i = 0; i < currentQuestion.options.length ; i++) {
// console.log(liTagsid[i]);
if($liTags[i].className == "notSelected listyle selected"){
//store information to check answer
tags = $liTags[i].id;
// tagsClass = $LiTags.className;
tagsClassName = $liTags[i];
}
}
});
//check answer once it has been submitted
button.onclick = function (){
if(button.id == 'submit'){
button.className = 'buttonload';
button.innerHTML = '<i class="fa fa-spinner fa-spin"></i>Loading';
}
setTimeout(function() { checkAnswer(); }, 100);
};
}
//self calling function
showQuestions();
The website is on my local now but i can upload a screenimage if need be and the whole code of the webpage. Or is the issue in html?
edit: here is html/css code
<style>
/*========================================================
Quiz Section
========================================================*/
/*styling quiz area*/
.main {
background-color: white;
margin: 0 auto;
margin-top: 30px;
padding: 30px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
/*white-space: nowrap;*/
}
/*Editing the number of questions*/
.spanclass {
font-size: x-large;
}
#pages{
border: 3px solid;
display: inline-flex;
border-radius: 0.5em;
float: right;
}
#question{
word-break: break-all;
}
/*format text*/
p {
text-align: left;
font-size: x-large;
padding: 10px 10px 0;
}
.optionimg{
border: 2px solid black;
border-radius: 1.5em;
}
/*Form area width*/
/*formatting answers*/
.listyle {
list-style-type: none;
text-align: left;
background-color: transparent;
margin: 10px 5px;
padding: 5px 10px;
border: 1px solid lightgray;
border-radius: 0.5em;
font-weight: normal;
font-size: x-large;
display: inline-grid;
width: 48%;
height: 300px;
overflow: auto;
}
.listyle:hover {
background: #ECEEF0;
cursor: pointer;
}
/*Change effect of question when the questions is selected*/
.selected, .selected:hover {
background: #FFDEAD;
}
/*change correct answer background*/
.correct, .correct:hover {
background: #9ACD32;
color: white;
}
/*change wrong answer background*/
.wrong, .wrong:hover {
background: #db3c3c;
color: white;
}
/*========================================================
Submit Button
========================================================*/
.main button {
text-transform: uppercase;
width: 20%;
border: none;
padding: 15px;
color: #FFFFFF;
}
.submit:hover, .submit:active, .submit:focus {
background: #43A047;
}
.submit {
background: #4CAF50;
min-width: 120px;
}
/*next question button*/
.next {
background: #fa994a;
min-width: 120px;
}
.next:hover, .next:active, .next:focus {
background: #e38a42;
}
.restart {
background-color:
}
/*========================================================
Results
========================================================*/
.circle{
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background: #bdc3c7;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
}
.fill{
position: absolute;
bottom: 0;
width: 100%;
height: 80%;
background: #31a2ac;
}
.score {
position: absolute;
width: 100%;
top: 1.7em;
text-align: center;
font-family: Arial, sans-serif;
color: #fff;
font-size: 40pt;
line-height: 0;
font-weight: normal;
}
.circle p {
margin: 400px;
}
/*========================================================
Confeeti Effect
========================================================*/
canvas{
position:absolute;
left:0;
top:11em;
z-index:0;
border:0px solid #000;
}
.imagecenter{
display: block;
margin: 0 auto;
}
.buttonload {
background-color: #04AA6D; /* Green background */
border: none; /* Remove borders */
color: white; /* White text */
padding: 12px 24px; /* Some padding */
font-size: 16px; /* Set a font-size */
}
/* Add a right margin to each icon */
.fa {
margin-left: -12px;
margin-right: 8px;
}
#media only screen and (max-width: 900px){
.listyle {
width: 100% !important;
height: auto !important;
}
.imagecenter {
width: 100% !important;
}
.listyle img{
width: inherit !important;
height: unset !important;
}
.ulclass
{
padding:0px !important;
}
}
</style>
<!-- Main page -->
<div class="main">
<!-- Number of Question -->
<div class="wrapper" id="pages">
<span class="spanclass" id="quizNumber">1</span><span class="spanclass">/<?=$count?></span>
</div>
<!-- Quiz Question -->
<div class="quiz-questions" id="display-area">
<p id="question"></p>
<ul class="ulclass" id="options">
</ul>
<div id="quiz-results" class="text-center">
<button type="button" name="button" class="submit" id="submit">Submit</button>
</div>
</div>
</div>
<canvas id="canvas"></canvas>
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>

I'm guessing that #question{ word-break: break-all; } is probably the culprit then? –
CB..yes that fixed it:)

when adding a new item the functionality of the previous item changes

const addBtn = document.querySelector(".add");
const modal = document.querySelector(".modal__container");
const library = document.querySelector(".library__container");
const submitBook = document.querySelector(".add__book");
const deleteBtn = document.querySelector(".fas fa-trash-alt");
//Modal inputs
const modalTitle = document.querySelector("#title");
const modalAuthor = document.querySelector("#author");
const modalPages = document.querySelector("#pages");
const isRead = document.querySelector("#read-status");
//Toggle Modal
const hideModal = () => {
modal.style.display = "none";
};
const showModal = () => {
modal.style.display = "block";
const cancel = document.querySelector(".cancel");
cancel.addEventListener("click", (e) => {
e.preventDefault();
hideModal();
});
};
addBtn.addEventListener("click", showModal);
let myLibrary = [];
let index = 0;
function Book(title, author, pages, read) {
this.title = title,
this.author = author,
this.pages = pages,
this.read = read
}
submitBook.addEventListener("click", addBookToLibrary);
function addBookToLibrary(e) {
e.preventDefault();
let bookTitle = modalTitle.value;
let bookAuthor = modalAuthor.value;
let bookPages = modalPages.value;
let bookStatus = isRead.checked;
//Display error message if inputs are empty
if (bookTitle === "" || bookAuthor === "" || bookPages === "") {
const errorMessage = document.querySelector(".error__message--container");
hideModal();
errorMessage.style.display = "block";
const errorBtn = document.querySelector(".error-btn");
errorBtn.addEventListener("click", () => {
errorMessage.style.display = "none";
showModal();
})
} else {
let book = new Book(bookTitle, bookAuthor, bookPages, bookStatus);
myLibrary.push(book);
hideModal();
render();
}
}
function render() {
library.innerHTML = "";
for (let i = 0; i < myLibrary.length; i++) {
library.innerHTML +=
'<div class="book__container">' +
'<div class="book">' +
'<div class="title__content">' +
'<span class="main">Title : </span><span class="book__title">' +` ${myLibrary[i].title}`+'</span>' +
'</div>' +
'<div class="author__content">' +
'<span class="main">Author : </span><span class="book__author">'+` ${myLibrary[i].author}`+'</span>' +
'</div>' +
'<div class="pages__content">' +
'<span class="main">Pages : </span><span class="book__pages">'+` ${myLibrary[i].pages}`+'</span>' +
'</div>' +
'<div class="book__read-elements">' +
'<span class="book__read">I read it</span>' +
'<i class="fas fa-check"></i>' +
'<a href="#"><i class="fas fa-times"></i>' +
'<i class="fas fa-trash-alt"></i>' +
'</div>' +
'</div>' +
'</div>'
readStatus(myLibrary[i].checked)
}
modalTitle.value = "";
modalAuthor.value = "";
modalPages.value = "";
isRead.checked = false;
}
function readStatus(bookStatus) {
const bookStatusContainer = document.querySelector(".book__read");
if (bookStatus) {
bookStatusContainer.classList.add("yes");
bookStatusContainer.textContent = "I read it";
bookStatusContainer.style.color = "rgb(110, 176, 120)";
} else {
bookStatusContainer.classList.add("no");
bookStatusContainer.textContent = "I have not read it";
bookStatusContainer.style.color = "rgb(194, 89, 89)";
}
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;600&display=swap');
:root {
--light-gray: #dededef3;
--title-color: #333756;
--main-color: #c6c6c6f3;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background-color: var(--light-gray);
}
header {
text-align: center;
padding-top: 4rem;
color: var(--title-color);
text-transform: uppercase;
letter-spacing: 4px;
}
button {
margin: 1rem;
padding: 0.8rem 2rem;
font-size: 14px;
border-radius: 25px;
background: white;
color: #333756;
font-weight: 600;
border: none;
cursor: pointer;
transition: 0.6s all ease;
}
:focus {
/*outline: 1px solid white;*/
}
button:hover {
background: var(--title-color);
color: white;
}
.add__book:hover,
.cancel:hover {
background: var(--main-color);
color: var(--title-color)
}
.all,
.books__read,
.books__not-read {
border-radius: 0;
text-transform: uppercase;
letter-spacing: 0.1rem;
background: var(--light-gray);
border-bottom: 4px solid var(--title-color)
}
.library__container {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.book__container {
display: flex;
margin: 2rem 2rem;
}
.modal__container {
display: none;
position: fixed;
z-index: 4;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
padding-top: 0px;
}
.book,
.modal {
padding: 2rem 2rem;
border-radius: 15px;
background: #333756;
line-height: 3rem;
}
.modal {
position: relative;
width: 50%;
margin: 0 auto;
margin-top: 8rem;
}
.modal__content {
display: flex;
flex-direction: column;
}
label {
color: white;
margin-right: 1rem;
}
input {
padding: 0.5rem;
font-size: 14px;
}
.book__read-elements {
display: flex;
justify-content: space-between;
}
.main,
i {
color: white;
pointer-events: none;
margin: 0.5rem;
}
.book__title,
.book__author,
.book__pages,
.book__read {
color: var(--main-color)
}
.error__message--container {
display: none;
position: fixed;
z-index: 4;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.4);
}
.error__message--modal {
position: relative;
margin: 0 auto;
margin-top: 10rem;
width:40%;
}
.error {
display: flex;
flex-direction: column;
align-items: center;
color: rgb(101, 3, 3);
font-size: 20px;
font-weight: bold;
background: rgb(189, 96, 96);
padding: 3rem 5rem;
border-radius: 10px;
}
.error-btn {
color: rgb(101, 3, 3);
font-weight: bold;
}
.error-btn:hover {
color: white;
background: rgb(101, 3, 3);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" integrity="sha256-2XFplPlrFClt0bIdPgpz8H7ojnk10H69xRqd9+uTShA=" crossorigin="anonymous" />
<link rel="stylesheet" href="styles.css">
<title>Library</title>
</head>
<body>
<header>
<h1>My Library</h1>
<button class="add">Add New Book</button>
<div class="buttons">
<button class="all">View All</button>
<button class="books__read">Read</button>
<button class="books__not-read">Not Read</button>
</div>
</header>
<div class="error__message--container">
<div class="error__message--modal">
<div class="error">
<p>Complete the form!</p>
<button class ="error-btn">Ok</button>
</div>
</div>
</div>
<!--Modal-->
<form class="modal__container">
<div class="modal">
<div class="modal__content">
<label for="">Title:</label>
<input type="text" id="title">
</div>
<div class="modal__content">
<label for="">Author:</label>
<input type="text" id="author">
</div>
<div class="modal__content">
<label for="">Pages:</label>
<input type="number" id="pages">
</div>
<div>
<label for="read-status">Check the box if you've read this book</label>
<input type="checkbox" id="read-status" value ="check">
</div>
<button class="add__book">Add</button>
<button class="cancel">Cancel</button>
</div>
</form>
<!--End of Modal-->
<div class="library__container"></div>
<script src="script.js"></script>
</body>
</html>
I'm new to OOP and I'm struggling.
I'm building a library where you can add a book with the title, author nr of pages and if you've read it or not. When I add the first book if I check the box it displays that to book is not read(which is false). When I add a new book the read functionality is not applied to that book at all. I have no idea how to fix it

In this function you are checking the status if isRead which is incorrect.
Do this
Call the readStatus function inside the for loop
Pass the current parameter readStatus(myLibrary[i].checked)
Modify readStatus as shown below
function readStatus(status) {
const bookReadStatus = document.querySelector(".book__read");
if (status) {
bookReadStatus.classList.add("yes");
bookReadStatus.textContent = "I read it";
bookReadStatus.style.color = "rgb(110, 176, 120)";
} else {
bookReadStatus.classList.add("no");
bookReadStatus.textContent = "I have not read it";
bookReadStatus.style.color = "rgb(194, 89, 89)";
}
}

Child div element managing

var arrlength;//////////////////////////////////////////////////////////////////
function opentextarea(borderColor) {
var arr = document.getElementsByClassName("myCustomTextarea");
arrlength=arr.length;
var goOut= 1;
Array.prototype.forEach.call(arr, function(el) {
if (el.style.backgroundColor!=='lightblue'){
goOut=0;
alert("Enter or delete the previus commnet!");
}
});
if (goOut===1){
//////////////
var comentwindow = document.getElementById("StatusID"); //StatusID
var d1 = new Date();
var d2= d1.toDateString();
var d3= d1.toLocaleTimeString();
var dateTimeUser = document.createTextNode(d2+" "+d3+" username");
//dateTimeUser.style.fontSize = "8px";
dateTimeUser.className = 'dateTimeUserClasN';
dateTimeUser.id = arrlength+"dateTimeUserID";
comentwindow.appendChild(dateTimeUser); /////////////////////////////////////////1
var input = document.createElement('textarea');
input.maxLength = 5000;
input.cols = 28;
input.rows = 5;
input.style.borderColor = borderColor;
input.className = 'myCustomTextarea';
var arr = document.getElementsByClassName("myCustomTextarea");
input.id = arrlength+"textarea";
//var comentwindow = document.getElementById("StatusID"); //StatusID
comentwindow.appendChild(input);//////////////////////////////////////////////////2
var ele = document.getElementById(arrlength+"buttonSE");
if(ele === null){
var buttonSE = document.createElement('button');
buttonSE.className = 'enterCommentBut';
buttonSE.id=arrlength+"buttonSE";
buttonSE.onclick = function() {
if(document.getElementById(arrlength+"textarea").value != ''){
document.getElementById(arrlength+"textarea").style.backgroundColor= "lightblue";
var e1 = document.getElementById('StatusID');
var e2 =(e1.children.length);
e1.removeChild(e1.children[e2-1]);
e1.removeChild(e1.children[e2-2]);
}else{
alert("It is not posible to enter empty comment.");
}
}
var SE = document.createTextNode("Enter");
buttonSE.appendChild(SE);
comentwindow.appendChild(buttonSE);/////////////////////////////////////////////3
}
var ele2 = document.getElementById(arrlength+"buttonSC");
if(ele2 === null){
var buttonSC = document.createElement('button');
buttonSC.className = 'clearCommentBut';
buttonSC.id=arrlength+"buttonSC";
buttonSC.onclick = function() {
var e1 = document.getElementById('StatusID');
var e2 =(e1.children.length);
var myNode = document.getElementById("StatusID");
while (myNode.lastChild) {
myNode.removeChild(myNode.lastChild);
}
};
var SC = document.createTextNode("Clear");
buttonSC.appendChild(SC);
comentwindow.appendChild(buttonSC);//////////////////////////////////////4
}
}
}
function createObject2(){
var e3 = document.getElementById("StatusID");
var e4 = document.getElementById("Status0ID");
var e5 = document.getElementById("Status2ID");
e3.style.display = 'block';
e4.style.display = 'block';
e5.style.display = 'block';
}
document.getElementById("clickMe2").onclick = createObject2;
function updateScroll(){
var element = document.getElementById("StatusID");
element.scrollTop = element.scrollHeight;
}
function ObjectRed(){
var borderColor= "red";
opentextarea(borderColor);
updateScroll();
}
document.getElementById("ObjectRed").onclick = ObjectRed;
function ObjectGreen(){
var borderColor= "green";
opentextarea(borderColor);
updateScroll();
}
document.getElementById("ObjectGreen").onclick = ObjectGreen;
*,
*::before,
*::after {
box-sizing: border-box;
}
div.Status0 {
position: absolute;
top: 15px;
width: 250px;
height:40px;
margin: 0;
padding: 1em;
font-size: 12px;
border: solid 1px #dfdfdf;
overflow-x: hidden;
overflow-y: visible;
background-color: white;
}
div.Status1 {
position: absolute;
top: 70px;
width: 250px;
height:700px;
margin: 0;
padding: 1em;
font-size: 12px;
border: solid 1px #dfdfdf;
overflow-x: hidden;
overflow-y: visible;
background-color: white;
}
div.Coment1{
float: left;
width: 130px;
height:100px;
margin: 0;
padding: 1em;
font-size: 12px;
/* height: 100%;
overflow: auto;*/
border: solid 1px #dfdfdf;
overflow-x: hidden;
overflow-y: visible;
background-color: yellow;
}
.content {
padding: 18px 0;
border-bottom: solid 2px #cfcfcf;
}
.myCustomTextarea {
border:0;
padding:1px;
font-size:1.0em;
font-family:"Times New Roman";
color:black;
border:solid 2px #ccc;
margin:0 0 4px;
width:215px;
height:50px;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.myCustomTextarea:focus {
resize: none;
border-radius: 5px;
outline: none !important;
}
.dateTimeUserClasN{
}
.startbutton{
position: absolute;
left: 270px;
top:20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Custom </title>
</head>
<body>
<div class="Status0" id="Status0ID" style="display: none">
<input type="button" id="ObjectRed" value="Problem" />
<input type="button" id="ObjectGreen" value="Okay" />
</div>
<div class="Status2" id="Status2ID" style="display: none">
<div class="Status1" id="StatusID" style="display: none"></div>
</div>
<input class =" startbutton" type="button" id="clickMe2" value="New object2" />
<script src="js/createObject.js"></script>
<link rel="stylesheet" href="css/styleIvan.css">
</body>
</html>
I have a "div" inside main "div". Status1 inside Status2. Status1 has a time date text, textarea and two buttons (enter and cancel).
When I call opentextarea function I get this 4 elements.
Below is this code for comments managing. The problem is that when i press on "cancel" button. It deletes all. But i would like to delete only last packet of
4 elements (last Status1 div). I need Status1 to be child of Status2. So when i press on cancel to delete only last child.
I can not make this work for me, so I am asking here for help.
How to do it?