How can I write in the text area through js

How can I write in the text area through js - javascript

// Add an external book
let inupt = document.getElementById("external-book");
let ptn = document.getElementById("add-external-book");
let settings = document.getElementById("add-settings");
// _____________________start add_____________________________________
let myAddText = [];
function textAddSettings() {
settings.innerHTML = "";
let index = 0;
for (task of myAddText) {
let content = `
<div class="settings">
<h4 class="book-name">${task.name}</h4>
<button id ="asx" onclick="missionCompleted(${index})" class="button-css">ending</button>
</div>
`;
settings.innerHTML += content;
index++;
}
};
ptn.addEventListener("click", function () {
let textBk = inupt.value;
let myAddTextObjkt = {
name: textBk,
removeLeFather: ""
};
myAddText.push(myAddTextObjkt);
//innerHTML
textAddSettings();
inupt.value = '';
});
// ___________________Department of Executed Tasks____________________
let executedTasks = document.getElementById("executed-tasks");
let execute = [];
function textAddExecute() {
executedTasks.innerHTML = "";
let index = 0;
for (task of execute) {
let content =
`
<div class="all-tasks-box">
<div class="my-list">
<h4 class="book-name">${task.name}</h4>
<div class="all-star">
<button onclick="changeColorPnt(${index})" id = "nx" class="button-css">Notes</button>
</div>
</div>
<div class="text-box-m xxxxx ${task.showAndNoneBox ? "show-none" : ""}">
<textarea id = "taw" class="${task.colorArea ? "color-green" : "color-white"}" type ="text" ${task.textAreaReadonly ? "readonly" : ""} > ${task.textareaValue}</textarea>
<button onclick="editAndSave(${index})" >${task.editTextArea ? "Edit" : "save"}</button>
</div>
</div>
`;
executedTasks.innerHTML += content;
index++;
}
};
// Adds the element to the new array while deleting the element from the old array
function missionCompleted(index) {
// task name
let element = myAddText[index].name;
let myexecute = {
name: element,
showAndNoneBox: "false",
textAreaReadonly: "true",
colorArea: "true",
textareaValue: "false",
editTextArea: "false"
};
execute.push(myexecute);
textAddExecute();
// delete the element from the old array
// We will get the index of the item and delete it
myAddText.splice(index, 1);
//innerHTML Updates the old text data
textAddSettings();
};
// ________________Notes button__________________________
function changeColorPnt(index) {
let element = execute[index];
if (element.showAndNoneBox) {
// text area
element.showAndNoneBox = false;
element.textAreaReadonly = false;
} else {
// text area
element.showAndNoneBox = true;
}
textAddExecute();
};
//_____________________________
function editAndSave(index) {
let btn = execute[index];
if (btn.editTextArea) {
// edit or save button
btn.editTextArea = false;
// The text area is allowed to write in
btn.textAreaReadonly = false;
// Change the color of the text area
btn.colorArea = false;
btn.textareaValue = document
.querySelector(`.text-box-m textarea`)
.value.trim();
} else {
btn.textareaValue = document
.querySelector(`.text-box-m textarea`)
.value.trim();
// Modify button
btn.editTextArea = true;
// The text area is not allowed to be written in
btn.textAreaReadonly = true;
// Change the color of the text area
btn.colorArea = true;
}
textAddExecute();
};
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
direction:rtl;
}
.contnire {
margin: 0 auto;
min-height: 100vh;
width: 900px;
background-color: #176a63;
}
/* Start title */
.contnire .title {
width: 100%;
height: 70px;
background-color: #176a63;
display: flex;
align-items: center;
justify-content: space-around;
}
.contnire .title .add-book {
display: flex;
width: 200px;
height: 25px;
}
.contnire .title .add-book input:focus {
background-color: aquamarine;
outline: none;
}
.contnire .title h1 {
text-align: center;
margin-right: 200px;
color: white;
padding: 20px;
font-size: 40px;
}
/* End title */
/* Start box-body */
.box-body {
display: flex;
flex-direction: column;
padding: 20px;
background-color: #3F51B5;
width: 100%;
}
/* Start content */
.content {
padding: 20px;
background-color: white;
border-bottom: 2px solid #7044b2;
box-shadow: 0px -1px 13px 4px #b9b3b3;
}
/* Start box */
.content .box {
text-align: center;
background-color: #009688;
width: 100%;
}
.box .mybox {
display: flex;
align-items: center;
justify-content: center;
background-color: #3F51B5;
}
.box .mybox h3 {
padding: 20px;
}
.content .control-book .settings {
display: flex;
align-items: center;
height: 50px;
border-bottom: 2px solid #ccc;
padding: 5px;
}
/* End box */
/* End content */
/* Start box-down */
.box-down .add-list {
display: flex;
padding-top: 20px;
justify-content: space-around;
}
.add-list .Waiting-list-two {
width: calc(100% - 10px);
}
.add-list .my-list-one {
background-color: #7044b2;
}
.add-list .my-list-one h2 {
padding: 20px;
}
.add-list .my-list {
padding: 5px;
background-color: #009688;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #ccc;
}
/* End box-down */
/* all */
.button-css {
padding: 4px 10px;
margin-right: 4px;
}
.book-name {
padding: 10px;
width: 220px;
background-color: #f9f3f3fa;
}
textarea {
padding: 5px;
line-height: 1.6;
word-spacing: -6px;
overflow: auto;
width: 100%;
height: 100px;
font-size: 18px;
}
textarea:disabled {
color: #000000e6;
background-color: #8bc34a57;
}
.show-none {
display: none;
}
textarea.color-green {
background-color: #4caf505e;
}
textarea.color-white {
background-color: white;
}
<div class="contnire">
<!-- Start title -->
<div class="title">
<div class="add-book">
<input id="external-book" class="book-name" type="text">
<button id="add-external-book" class="button-css">add</button>
</div>
<h1>My tasks</h1>
</div>
<!-- End title -->
<!-- Start box-body -->
<div class="box-body">
<!-- Start content -->
<div class="content">
<!-- Start box -->
<div class="box">
<div class="mybox">
<h3>required tasks</h3>
</div>
<div id="add-settings" class="control-book"></div>
</div>
<!-- End box -->
</div>
<!-- End content -->
<!-- Start box-down -->
<div class="box-down">
<div class="add-list">
<div class="Waiting-list-two">
<div class="my-list-one">
<h2>The tasks that were performed</h2>
</div>
<div id="executed-tasks" class="all-list">
</div>
</div>
</div>
<!-- End box-down -->
</div>
</div>
</div>
I write the name of the task, then press the "Add" button, the item appears, and next to it the "Finish" button. When I press Finish, the item appears in the To Do section, and next to the item, the Notes button. When I press the notes button, the text area appears and disappears, and in the text area there is an edit button. When I click on it I can type a comment inside the text area, and by pressing the save button the edit is locked into the problematic text area? When I add more than one element the entire text area takes the same as the first comment and I want each element to be stable writing the text area so I can modify the comment in any element without affecting the rest

Related

Open an element under a button when the button is clicked in React

Having this design:
There is a table with some rows, when a row is clicked, that kebab button (3 vertical dots) is visible.
When the button is clicked it should open an element which has some data in it - in this case a list of actions.
The part with showing the kebab button is working:
{
id: 'my-button',
Cell: ({ cell }: CellProps<MyCell>) => {
if (cell.row.index === selectedIndex) {
return (
<div>
<Button
icon={<ThreeDots />}
onClick={toggleModal}
/>
</div>
);
}
return <div></div>;
}
}
when the row is clicked, the 3-dots button is visible. There is also a boolean which is initially set to false but toggles its value when the button is clicked (toggleModal).
But how can that element with the list added under the button?
Done something like:
{isModalOpened ? <div className='absolute'>test</div> : null}
Or maybe is there any online solution to fix this?

To fix this issue, you just need to use:
event.stopPropagation();
Please check my demo below:
function rowClick() {
const status = document.getElementById("actions").style.display;
document.getElementById("actions").style.display =
status === "block" ? "none" : "block";
}
function btnClick(event) {
event.stopPropagation();
const status = document.getElementById("nav").style.display;
document.getElementById("nav").style.display =
status === "block" ? "none" : "block";
}
.row {
width: 80%;
display: flex;
align-items: center;
justify-content: space-between;
background: lightblue;
padding: 10px 20px;
}
.actions {
display: none;
position: relative;
z-index: 1;
}
nav {
display: none;
position: absolute;
top: 50px;
right: 0;
z-index: 10;
background: white;
border: 1px solid grey;
min-width: 170px;
}
nav p {
padding: 10px;
border-bottom: 1px solid grey;
margin: 0;
}
nav p:last-child {
border-bottom: 0;
}
.btn {
display: inline-block;
width: 50px;
height: 50px;
line-height: 50px;
background: green;
text-align: center;
cursor: pointer;
color: white;
}
<div class='row' onclick="rowClick()">
This is a row <div class="actions" id="actions"><span class="btn" onclick="btnClick(event)">⁝</span><nav id="nav"><p>Do this</p><p>Do that</p></nav></div></div>

API images not displayed within modal

I am a beginner and I am using several tutorials to learn and create a project. I am using the NASA APOD API to display images. However, I want to display the image when clicked within a modal. For some reason the image when clicked is displaying the modal, but without the image. How do I click on the image and display it within the modal.
const resultsNav = document.getElementById("resultsNav");
const favoritesNav = document.getElementById("favoritesNav");
const imagesContainer = document.querySelector(".images-container");
const saveConfirmed = document.querySelector(".save-confirmed");
const loader = document.querySelector(".loader");
// NASA API
const count = 3;
const apiKey = 'DEMO_KEY';
const apiUrl = `https://api.nasa.gov/planetary/apod?api_key=${apiKey}&count=${count}`;
let resultsArray = [];
let favorites = {};
// Show Content
function showContent(page) {
window.scrollTo({ top: 0, behavior: "instant" });
if (page === "results") {
resultsNav.classList.remove("hidden");
favoritesNav.classList.add("hidden");
} else {
resultsNav.classList.add("hidden");
favoritesNav.classList.remove("hidden");
}
loader.classList.add("hidden");
}
// Create DOM Nodes
function createDOMNodes(page) {
const currentArray =
page === "results" ? resultsArray : Object.values(favorites);
currentArray.forEach((result) => {
// Card Container
const card = document.createElement("div");
card.classList.add("card");
// Link that wraps the image
const link = document.createElement("a");
// link.href = result.hdurl; -- full size image display when clicked
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// Image
const image = document.createElement("img");
image.src = result.url;
image.alt = "NASA Picture of the Day";
image.loading = "lazy";
image.classList.add("card-img-top");
// Card Body
const cardBody = document.createElement("div");
cardBody.classList.add("card-body");
// Card Title
const cardTitle = document.createElement("h5");
cardTitle.classList.add("card-title");
cardTitle.textContent = result.title;
// Save Text
const saveText = document.createElement("p");
saveText.classList.add("clickable");
if (page === "results") {
saveText.textContent = "Add To Favorites";
saveText.setAttribute("onclick", `saveFavorite('${result.url}')`);
} else {
saveText.textContent = "Remove Favorite";
saveText.setAttribute("onclick", `removeFavorite('${result.url}')`);
}
// Card Text
const cardText = document.createElement("p");
cardText.textContent = result.explanation;
// Footer Conatiner
const footer = document.createElement("small");
footer.classList.add("text-muted");
// Date
const date = document.createElement("strong");
date.textContent = result.date;
// Copyright
const copyrightResult =
result.copyright === undefined ? "" : result.copyright;
const copyright = document.createElement("span");
copyright.textContent = ` ${copyrightResult}`;
// Append everything together
footer.append(date, copyright);
cardBody.append(cardTitle, saveText, cardText, footer); //hide to make image display
link.appendChild(image);
card.append(link); // hide cardBody
// Append to image container
imagesContainer.appendChild(card);
});
}
// Update the DOM
function updateDOM(page) {
// Get favorites from local storage
if (localStorage.getItem("nasaFavorites")) {
favorites = JSON.parse(localStorage.getItem("nasaFavorites"));
}
imagesContainer.textContent = "";
createDOMNodes(page);
showContent(page);
}
// Get 10 images from NASA API
async function getNasaPictures() {
// Show Loader
loader.classList.remove("hidden");
try {
const response = await fetch(apiUrl);
resultsArray = await response.json();
updateDOM("results");
} catch (error) {
// Catch Error Here
}
}
// Add result to favorites
function saveFavorite(itemUrl) {
// Loop through the results array to select favorite
resultsArray.forEach((item) => {
if (item.url.includes(itemUrl) && !favorites[itemUrl]) {
favorites[itemUrl] = item;
// Show save confirmation for 2 seconds
saveConfirmed.hidden = false;
setTimeout(() => {
saveConfirmed.hidden = true;
}, 2000);
// Set Favorites in Local Storage
localStorage.setItem("nasaFavorites", JSON.stringify(favorites));
}
});
}
// Remove item from favorites
function removeFavorite(itemUrl) {
if (favorites[itemUrl]) {
delete favorites[itemUrl];
localStorage.setItem("nasaFavorites", JSON.stringify(favorites));
updateDOM("favorites");
}
}
// On Load
getNasaPictures();
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 3% 1fr 0.1fr;
gap: 0px 0px;
grid-auto-flow: row;
grid-template-areas:
"header"
"content"
}
.hero {
grid-area: hero;
background-color: blue;
}
.content {
grid-area: content;
background-color: orange;
align-self: center;
justify-self: center;
}
html {
box-sizing: border-box;
}
body {
margin: 0;
background: whitesmoke;
overflow-x: hidden;
font-family: Verdana, sans-serif;
font-size: 1rem;
line-height: 1.8rem;
}
.loader {
position: fixed;
z-index: 40;
background: whitesmoke;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
/* Navigation */
.navigation-container {
position: fixed;
top: 0;
}
.navigation-items {
display: flex;
justify-content: center;
}
.background {
background: whitesmoke;
position: fixed;
right: 0;
width: 100%;
height: 60px;
z-index: -1;
}
.clickable {
color: #0b3d91;
cursor: pointer;
user-select: none;
}
.clickable:hover {
color: #fc3d21;
}
/* Images Container */
.images-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card {
margin: 10px 10px 10px;
width: 300px;
height: 300px;
}
.card-img-top {
width: 300px;
height: 300px;
}
.card-body {
padding: 20px;
}
.card-title {
margin: 10px auto;
font-size: 24px;
}
/* Save Confirmation */
.save-confirmed {
background: white;
padding: 8px 16px;
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
position: fixed;
bottom: 25px;
right: 50px;
z-index: 500;
}
/* Hidden */
.hidden {
display: none;
}
.brand {
float: right;
}
.fave {
margin-right: 50%;
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
/* #myImg:hover {opacity: 0.7;} */
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
<!-- Loader -->
<div class="loader hidden">
<img src="rocket.svg" alt="Rocket Icon" />
</div>
<!-- Container -->
<div class="container">
<div class="header">
<div class="navigation-container">
<span class="background"></span>
<!-- Results Nav -->
<span class="navigation-items" id="resultsNav">
</span>
<!-- Favorites Nav -->
<span class="navigation-items hidden" id="favoritesNav">
</span>
</div>
</div>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="column">
<div id="myImg" alt="Snow" class="images-container"></div>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>

In your img.onclick function/event listener (at line 51 of your JS), your this points to the parent instead of the image itself.
For a quick fix, try replacing your this with event.target (Basically, event.target.src in place of this.src and event.target.alt in place of this.alt at lines 56 and 57 of your current JS Fiddle)

How can I optimize a popup Javascript code?

I'm just starting with Javascript and I made this popup code, and I was wondering if there's another code with the same result or a way of optimizing the Javascript.
The code must make the popup appear when one of the options is clicked and disappear when the click is somewhere else.
Popup code
var activePopup;
document.querySelectorAll('[hasPopup]').forEach((popupParent) => {
popupParent.addEventListener('click', e => {
if (popupParent != activePopup && activePopup != null) {
activePopup.querySelector('[popupContent]').style.display = 'none';
}
window.addEventListener('click', hasClicked => {
let isOnPopup = false;
hasClicked.path.forEach((event) => {
if (event == popupParent) {
isOnPopup = true;
}
})
if (isOnPopup == false){
popupParent.querySelector('[popupContent]').style.display = 'none';
}
})
popupParent.querySelector('[popupContent]').style.display = 'block';
activePopup = popupParent;
})
});

This will do all that you require, but in a much shorter form
puc=document.querySelectorAll("[popupContent]"); // popup divs ...
document.querySelector(".nav-bar__element").onclick=ev=>{
// in case the user clicked on the inner span and not the div:
const pel=[...ev.path].find(e=>e.hasAttribute&&e.hasAttribute("hasPopup"))
if (pel) {
const el=pel.querySelector("[popupContent]");
puc.forEach(d=>d.style.display=d===el?"block":"none")
}
}
body {
margin: 0;
font-family: sans-serif;
height: 100vh;
display: grid;
grid-template-columns: 25fr 75fr;
}
.small-icon {
width: 30px;
height: 30px;
}
[hasPopup] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 30px;
padding: 20px;
border-radius: 10px;
border: 1px solid hsl(0, 0%, 40%);
}
[hasPopup]:hover {
cursor: pointer;
}
[popupContent] {
position: absolute;
cursor: auto;
padding: 20px;
border-radius: 10px;
border: 1px solid hsl(0, 0%, 40%);
left: 110%;
display: none;
}
<div class='nav-bar__element nav-bar__element--utils'>
<div class='utils__notifications' id='utilsNotifications' hasPopup>
<span>Notifications</span>
<div class="notifications-popup" popupContent>
<div>
notifications
</div>
</div>
</div>
<div class='utils__messages' id='utilsMessages' hasPopup>
<span>Messages</span>
<div class="messages-popup" popupContent>
<div>
messages
</div>
</div>
</div>
<div class='utils__settings' id='utilsMessages' hasPopup>
<span>Settings</span>
<div class="settings-popup" popupContent>
<div>
settings
</div>
</div>
</div>
<script type='text/javascript' src='script.js'></script>
</div>

If you are looking for a JS popup than check this:- https://www.gitto.tech/posts/simple-popup-box-using-html-css-and-javascript/
It worked for me this way:
HTML code
<div class="invalid-chars-alert-close-btn" onclick="document.getElementById('invalidChars-1').classList.toggle('active');">x</div>
JS: code inside if invalid characters written in my form then:
document.getElementById("invalidChars-1").classList.toggle("active");

How to hide DIV scrollbar while being able to view the whole div

I am dynamically adding new div's to a div container, the problem i'm facing is that the div is probably just a few pixels too big and therefore spawns a scrollbar that is pretty much useless, but with overflow: hidden; a little bit of the div gets cut off. I'm looking to make the div little bit larger in height, applying height: 100%; didn't work. This is how I'm creating the divs
function layerCreatorX(submission) { // creator for normal layers
let unique_id = uuidv4() // created unique IDs
let wrapDiv = document.createElement("div")
wrapDiv.id = "wrapDiv" + unique_id
let activeLayerIcon = document.createElement("IMG")
activeLayerIcon.setAttribute("class", "activeLayerOff")
activeLayerIcon.setAttribute("name", "activeLayerIcon")
let invisibilityIcon = document.createElement("IMG")
invisibilityIcon.setAttribute("class", "visibilityButtonPos invisibilityButton") // filter for grey
invisibilityIcon.setAttribute("name", "invisibilityIcon")
let visibilityIcon = document.createElement("IMG")
visibilityIcon.setAttribute("class", "visibilityButtonPos visibilityButtonOff")
visibilityIcon.setAttribute("name", "visibilityIcon")
let line = document.createElement("hr")
line.setAttribute("style", "margin-top: 0px;")
line.className = "greyLine" //grey line will go underneath the div
let x = document.createElement("span")
let t = document.createTextNode(submission)
layerArray.push(unique_id)
layerNamesForComparison.push(submission) //new name comparator
x.className = "item item-layer"
x.id = unique_id
t.className = "noselect"
x.appendChild(activeLayerIcon)
x.appendChild(t)
x.appendChild(invisibilityIcon)
x.appendChild(visibilityIcon)
wrapDiv.appendChild(x)
wrapDiv.className = "LayerListDiv"
document.querySelector('.LayerList').appendChild(wrapDiv)
document.querySelector('.LayerList').appendChild(line)
}
and this is how they look when I create them:
I want to get rid of the vertical scrollbar on the right but still be able to view the whole div, if I use overflow hidden, the <hr> line from the bottom gets cut off and I can't see it anymore.
.LayerList CSS:
.LayerList {
user-select: none;
overflow: auto;
right: -15px;
width: 100%;
max-height: calc(93% - 60px); /*This height has to stay*/
}
Edit: added snippet
//modals
let modal = document.getElementById("myModal")
let btn = document.getElementById("btnCreate")
let span = document.getElementsByClassName("close")[0]
const div = document.getElementById('layerList')
//layer variables
let layerName
let layerId
let layerVisible
let layerLock
let layerNote
let layerActive
let layerJSObject = []
//other vars
let files //stores json file
let data //stores json file data
let layerArray = [] //stores all layer id's in array for comparison purposes
let layerNamesForComparison = [] //stores names of layers, so that duplicates are not created
//miro vars
let widgetName
let selectedWidgets = []// listener var to store all widget info in
let selectedWidgetIDs = []
// will store id's of widgets currently selected until they are saved into a layer
let superObjectID
//DB vras
let globalToken
let responseToken
let boardId
let availableBoards
let recordId
//timestamp
let timeStamp
let account
let availableResults
let onlineMode
let activeLayer = 0
let activeLayerState
//widgetDisplayer()
//CSS vars
let xDiv
let DeleteLayerButton = document.getElementById("btnDelete").disabled = true
let AddObjectsButton = document.getElementById("btnMove").disabled = true
let RemoveObjectsButton = document.getElementById("btnRemove").disabled = true
//------------------------------------------------------ Modal handling ---------------------------------------------------------
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block"
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none"
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none"
}
}
function success() {
if(document.getElementById("newLayerName").value === "") {
document.getElementById('submitNewLayer').disabled = true;
}
else {
document.getElementById('submitNewLayer').disabled = false;
}
}
//--------------------------------------------------Layer naming/validating/creating/deleting/etc... functions--------------------
function validateNewLayerName() { // validates for empty input from input field
let input = document.forms["newLayerForm"]["newLayerName"].value
let lengthLayers = layerArray.length
for(i = 0; i < lengthLayers; i++){ //checks if input is already used as layer name
if(input == layerNamesForComparison[i]){ //fixed?
alert("This layer name is already used, please either delete it or use a different name")
return false
}
else{
continue
}
}
if (input == "" || input == null || input == 0 || input == "0") { // check if submitted input is empty or 0
alert("Cannot submit empty field, please try again!")
return false
}
else {
//if everything adds up appends layer list with new layer
layerCreatorX(input)
modal.style.display = "none"
}
return false
}
function uuidv4() { //random uuidv4 generator for layer id
return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
(c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
)
}
function layerCreatorX(submission) { // creator for normal layers
let unique_id = uuidv4() // created unique IDs
let wrapDiv = document.createElement("div")
wrapDiv.id = "wrapDiv" + unique_id
let activeLayerIcon = document.createElement("IMG")
activeLayerIcon.setAttribute("class", "activeLayerOff")
activeLayerIcon.setAttribute("name", "activeLayerIcon")
let invisibilityIcon = document.createElement("IMG")
invisibilityIcon.setAttribute("class", "visibilityButtonPos invisibilityButton") // filter for grey
invisibilityIcon.setAttribute("name", "invisibilityIcon")
let visibilityIcon = document.createElement("IMG")
visibilityIcon.setAttribute("class", "visibilityButtonPos visibilityButtonOff")
visibilityIcon.setAttribute("name", "visibilityIcon")
let line = document.createElement("hr")
line.setAttribute("style", "margin-top: 0px;")
line.className = "greyLine" //grey line will go underneath the div
let x = document.createElement("span")
let t = document.createTextNode(submission)
layerArray.push(unique_id)
layerNamesForComparison.push(submission) //new name comparator
x.className = "item item-layer"
x.id = unique_id
t.className = "noselect"
x.appendChild(activeLayerIcon)
x.appendChild(t)
x.appendChild(invisibilityIcon)
x.appendChild(visibilityIcon)
wrapDiv.appendChild(x)
wrapDiv.className = "LayerListDiv"
document.querySelector('.LayerList').appendChild(wrapDiv)
document.querySelector('.LayerList').appendChild(line)
}
html, body {
height: 91.5%;
margin: 0;
padding: 0;
overflow: hidden;
}
.scrollable-container {
height: 100%;
overflow-y: auto;
}
.scrollable-content {
height: 100%;
overflow-y: auto;
background-color: #2a79ff;
}
.rtb-sidebar-caption {
font-size: 14px;
font-weight: bold;
color: rgba(0, 0, 0, 0.8);
padding: 24px 0 0 24px;
margin-bottom: 20px;
}
.miro-btn, button {
width: 120px;
margin: 3px 0 0 14px;
padding: 5px;
}
.delete-btn {
width: 120px;
margin: 3px 0 0 14px;
padding: 5px;
background-color: rgb(216, 24, 24);
}
.item {
align-items: center;
height: 48px;
line-height: 48px;
cursor: pointer;
padding-left: 24px;
padding-top: 1px;
padding-bottom: 1px;
font-size: 20px;
}
/* css for modal popup */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
text-align: center;
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 15px;
border: 1px solid #888;
width: auto;
display: inline-block;
border-radius: 8px;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: rgb(23, 9, 75);
text-decoration: none;
cursor: pointer;
}
input[type=text] {
width: 230px;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-radius: 4px;
}
.LayerList {
user-select: none;
overflow: auto;
right: -15px;
width: 100%;
max-height: calc(93% - 60px); /*Has to be 95 so that the last element of span is visible unlike at 100%*/
}
.LayerListDiv {
height: 100%;
}
.LayerList > .items-container {
border-top: 1px solid #e7e7e7;
}
span:last-child {
height: 100%;
}
.LayerList span {
user-select: inherit;
}
.labelWrap {
margin: 0px;
display: flex;
padding: 0;
}
.btn {
background-color: white;
border: none; /* Remove borders */
padding: 12px 16px;
cursor: pointer;
}
.btn:hover {
background-color: grey;
}
.wrapLabel {
padding: 0;
}
hr.greyLine {
border-top: 1px solid #C3C2CF;
opacity: 1;
margin: 20px;
padding: 0;
margin-bottom: -3px;
}
.activeLayerOn {
float: left;
margin-left: 20px;
margin-top: 12px;
position: relative;
margin-right: 15px;
background: url(icons/edit-2-on-2.svg);
height: 0;
width: 0;
padding: 12px 12px 12px 12px;
border-style: 0;
}
.activeLayerOff {
float: left;
margin-left: 20px;
margin-top: 12px;
position: relative;
margin-right: 15px;
background: url(icons/edit-2.svg);
height: 0;
width: 0;
padding: 12px 12px 12px 12px;
}
.visibilityButtonPos {
float: right;
margin-left: 15px;
margin-top: 12px;
position: relative;
margin-right: 15px;
height: 0;
width: 0;
padding: 12px 12px 12px 12px;
}
.visibilityButton {
background: url(icons/eye-off.svg);
}
.invisibilityButton {
background: url(icons/eye.svg);
}
.visibilityButtonOff {
display: none;
}
.activeDiv {
background: #EBEAEF;
color: #4568FB;
}
.noselect {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
.whiteIcon {
filter: invert(98%) sepia(5%) saturate(8%) hue-rotate(101deg) brightness(102%) contrast(101%);
}
.lefticon {
user-select: none;
width: 150px;
height: 75px;
position: absolute;
position: absolute;
bottom: 20px;
left: 0;
}
.rightIcon {
user-select: none;
width: 150px;
height: 75px;
position: absolute;
position: absolute;
bottom: 20px;
left: 160px;
}
.topIcons {
display: inline-block;
vertical-align: middle;
height: 24px;
width: 24px;
}
.addButton {
user-select: none;
width: 150px;
vertical-align: middle;
padding: 0;
}
.deleteButton {
user-select: none;
width: 150px;
padding: 0;
}
<link rel="stylesheet" href="https://miro.com/app/static/styles.1.0.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://miro.com/app/static/sdk.1.1.js"></script>
<div class="miro-h1" style= "padding-left: 20px; padding-top: 15px; user-select: none;">Layers</div>
<form>
<button id="btnCreate" type="button" title="Create Layer" class="miro-btn miro-btn--secondary miro-btn--medium addButton">
<img src="icons/plus.svg" class="topIcons">
Add new Layer
</button>
<button onclick="deleteLayerById(activeLayer)" id="btnDelete" type="button" title="delete a layer" class="miro-btn miro-btn--secondary miro-btn--medium deleteButton">
<img src="icons/trash-2.svg" class="topIcons">
Delete Layer</button>
<hr class="greyLine">
</form>
<div class="container"></div>
<!------------------------------------------------------------- Modal Create------------------------------------------------------------------->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<form name="newLayerForm" onsubmit="return validateNewLayerName()" method="post" required>
<span class="close">×</span>
<p class="miro-h3" style="text-align: left;">Create Layer </p>
<input placeholder="Layer Name" type="text" name="newLayerName" id="newLayerName" onkeyup="success()" class="miro-input" style="width: 300px;">
<br>
<button type="submit" value="submit" id="submitNewLayer" class="miro-btn miro-btn--primary miro-btn--medium" style="float: right;" disabled>Create Layer</button>
</form>
</div>
</div>
<!----------------------------------------------------------------End of modal ------------------------------------------------------------------>
<div id="layerList" class="LayerList" style="font-size: 0px;">
</div>
<form>
<button onclick="getSelectedWidgets()" id="btnMove" type="button" class="miro-btn miro-btn--primary miro-btn--medium lefticon" >
<img src="icons/arrow-left.svg" class="whiteIcon" alt="arrow-left"> <br> Add selected <br>objects to layer</button>
<button onclick="removeSelectedWidgetsFromLayer()" id="btnRemove" type="button" class="miro-btn miro-btn--secondary miro-btn--medium rightIcon" >
<img src="icons/arrow-right.svg" alt="arrow-right"> <br> Remove selected <br>objects from layer</button>
</form>

From W3Schools (https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp):
/* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.example {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Where .example is the class of the div's with no scrollbar.

Javascript - Some errors in my LocalStorage script

I am a newbie in JS (level 0), and although I try to store all the variables of my practice in Local Storage, I am doing something wrong, because when reloading the page many functions (previously visible), now disappear in the reload.
SEE LIVE DEMO
Where is my errors...?
What am I doing wrong...?
Thanks in advance!
CSS
html{top:0;left:0;margin:0}body{top:0;margin:0;padding:0;color:#323232;width:100%;height:100%;line-height:1.5;font-family:'Roboto',serif}#container{width:500px;margin:0 auto}#container p{display:inline-block;margin-top:20px}#productos{display:none}.img-prod{display:inline-block;float:left;margin-right:10px}.img-prod img{width:100%;height:auto;max-width:70px;display:block;border:0}#comp-p1,#comp-p2,#comp-p3{width:120px;height:30px;margin-top:15px;background:green;padding:10px 0 5px;text-align:center;vertical-align:middle;color:#fff;cursor:pointer}.derecha{border:solid 1px #999;max-height:400px;width:350px;margin:0 auto;text-align:center;padding:10px 0;overflow-y:auto;float:right}#producto-1,#producto-2,#producto-3{display:inline-block;width:220px;padding:10px;float:left;text-align:left;font-size:.9em;margin-right:5px}#producto-1{background:green;color:#fff}#producto-2{background:#add8e6;color:#000}#producto-3{background:#666;color:#fff}.cont-p{display:inline-block;margin:7px auto;line-height:1}.bbp{display:inline-block;vertical-align:top;width:24px;height:24px;text-align:center;background:red;color:#fff;margin-left:5px;line-height:1.5;cursor:pointer}.cont-num{float:left;width:24px;height:24px;margin:20px 5px 0 20px;padding:4px 3px 3px;background:red;text-align:center;font-size:16px;font-family:Arial,sans-serif;color:#fff}#mostrar{display:none;width:100px;margin:70px 0 0;padding:10px;text-align:center;background:grey;color:#fff;cursor:pointer}.derecha input{width:0;height:0;border:none;visibility:hidden}#cont-resultado{text-align:center;width:110px;margin-top:70px;background:grey;padding:5px 10px 10px;color:#fff}#cont-resultado input{display:inline-block;margin:10px auto;background:#fff;color:#000;border:1px solid #000;padding:8px 0}#cont-resultado p{display:inline-block;text-decoration:none;color:#fff;background:grey;padding:8px 10px;cursor:pointer}#total{display:block;width:80px;text-align:center}
HTML
<div id="container">
<div id="productos">
<!-- ============================================== -->
<div id="cont-p1" class="cont-p">
<div id="producto-1">
<div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"> </div>cont-p1 cloned!<br><br>Input Value = 1</div>
<input class="add-prod" type="num" value="1">
<div class="bbp">X</div>
</div>
<!-- ============================================== -->
<div id="cont-p2" class="cont-p">
<div id="producto-2">
<div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>
cont-p2 cloned!<br><br>Input Value = 1</div>
<input class="add-prod" type="num" value="1">
<div class="bbp">X</div>
</div>
<!-- ============================================== -->
<div id="cont-p3" class="cont-p">
<div id="producto-3">
<div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>
cont-p3 cloned!<br><br>Input Value = 198</div>
<input class="add-prod" type="num" value="198">
<div class="bbp">X</div>
</div>
<!-- ============================================== -->
</div><!-- // productos -->
<div class="derecha"></div>
<div id="comp-p1" onClick="clickME();clickME2();">Clone 1</div>
<div id="comp-p2" onClick="clickME();clickME2();">Clone 2</div>
<div id="comp-p3" onClick="clickME();clickME2();">Clone 3</div>
<div class="cont-num" id="clicks">0</div>
<div class="cont-num" id="clicksdos">0</div>
<div id="cont-resultado">
<input name="total" id="total">
Total of sum
</div>
</div>
<!-- // container -->
<script>
// Script que suma y resta los clicks
var clicks = 0;
function clickME() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks
}
var clicksdos = 0;
function clickME2() {
clicksdos += 1;
document.getElementById("clicksdos").innerHTML = clicksdos;
if (clicksdos === 1) {
document.getElementById("cont-resultado").style.display = "block";
}
}
if (clicksdos === 0) {
document.getElementById("cont-resultado").style.display = "none";
}
function restar() {
if (clicks > 0) clicks -= 1;
document.getElementById("clicks").innerHTML = clicks;
}
function restardos() {
if (clicksdos > 0) clicksdos -= 1;
document.getElementById("clicksdos").innerHTML = clicksdos;
if (clicksdos === 0) {
document.getElementById("cont-resultado").style.display = "none";
}
}
</script>
SCRIPT
// Script for clone the div´s
$(document).ready(function() {
$("#comp-p1").click(function() {
$("#cont-p1").clone().appendTo(".derecha");
localStorage.setItem("html",document.getElementsByClassName("derecha")[0].innerHTML); // New
displaySuma();
});
// =============
$("#comp-p2").click(function() {
$("#cont-p2").clone().appendTo(".derecha");
localStorage.setItem("html",document.getElementsByClassName("derecha")[0].innerHTML); // New
displaySuma();
});
// =============
$("#comp-p3").click(function() {
$("#cont-p3").clone().appendTo(".derecha");
localStorage.setItem("html",document.getElementsByClassName("derecha")[0].innerHTML); // New
displaySuma();
});
});
const getParent = (match, node) => (node.matches(match)) ? node : getParent(match, node.parentNode);
// Deal with remove
document.addEventListener('click', (event) => {
let target = event.target;
if (target.matches('.bbp')) {
restar();
restardos();
getParent('.derecha', target).removeChild(target.parentNode);
localStorage.setItem("html",document.getElementsByClassName("derecha")[0].innerHTML); // New
displaySuma();
}
})
// New Script for sum inputs
const displaySuma = () => document.getElementById("total").value = suma();
const suma = function() {
let x = Array.from(document.querySelectorAll(".derecha div .add-prod"));
let sum = 0;
for (var i = 0; i < x.length; i++) {
sum += parseFloat(x[i].value);
}
console.log(sum);
return sum;
localStorage.setItem("html",document.getElementsByClassName("derecha")[0].innerHTML); // New
}
//console.log(suma());
document.getElementById("total").value = suma();
// New
if ((localStorage.getItem("clicks")!=null) && (localStorage.getItem("clicksdos")!=null))
{
clicks=parseInt(localStorage.getItem("clicks"));
clicksdos=parseInt(localStorage.getItem("clicksdos"));
document.getElementById("clicks").innerHTML=clicks;
document.getElementById("clicksdos").innerHTML=clicksdos;
}
if (localStorage.getItem("html")!=null)
{
document.getElementsByClassName("derecha")[0].innerHTML=localStorage.getItem("html")
}
//});

Here is a version using localStorage unfortunately snippets does not allow use of localStorage.
Because of this, here is a version of the code running in jsFiddle
let clicks = 0;
let clicksdos = 0;
const safeInt = (key) => {
let value = parseInt(getValue(key));
return (isNaN(value) || value < 0) ? 0 : value;
}
// This loads our clicks from the LocalStorage
const loadClicks = () => {
clicks = safeInt('clicks');
clicksdos = safeInt('clicksdos');
}
const loadHTML = () => {
return getValue('html', '');
}
const loadFromStorage = () => {
let html = loadHTML();
if (html !== '') {
loadClicks();
}
displayClicks();
document.querySelector(".derecha").innerHTML = html;
}
// Display the clicks on the screen
const displayClicks = () => {
clicks = (clicks === NaN) ? 0 : clicks;
clicksdos = (clicksdos === NaN) ? 0 : clicksdos;
document.querySelector('#clicks').innerHTML = clicks;
document.querySelector('#clicksdos').innerHTML = clicksdos;
// Hide / Show Result
let display = (clicks > 0) ? 'block' : 'none';
document.querySelector('#cont-resultado').style.display = display;
}
const adjustClicks = (value) => {
clicks += value;
clicksdos += value;
storeValue('clicks', clicks);
storeValue('clicksdos', clicksdos);
displayClicks();
}
const addClick = () => adjustClicks(1);
const removeClick = () => adjustClicks(-1);
// Manage localStorage
const storeValue = (key, value) => (localStorage) ? localStorage.setItem(key, value) : '';
const getValue = (key, defaultValue) => (localStorage) ? localStorage.getItem(key) : defaultValue;
const storeHTML = () => storeValue("html", document.getElementsByClassName("derecha")[0].innerHTML);
// Add a node to the Derecha
const addToDerecha = (nodeId) => {
let node = document.querySelector(`#${nodeId}`);
document.querySelector('.derecha').appendChild(node.cloneNode(true));
storeHTML();
displaySuma();
};
// Monitor ALL click events
document.addEventListener('click', (event) => {
let target = event.target;
// Add
if (target.matches('.comp-clone')) {
addClick();
addToDerecha(event.target.dataset.clone);
}
// Remove
if (target.matches('.bbp')) {
removeClick();
getParent('.derecha', target).removeChild(target.parentNode);
storeHTML();
displaySuma();
}
});
// This is just a helper function.
const getParent = (match, node) => (node.matches(match)) ? node : getParent(match, node.parentNode);
// New Script for sum inputs
const displaySuma = () => document.getElementById("total").value = suma();
const suma = function() {
return Array.from(document.querySelectorAll(".derecha div .add-prod"))
.reduce((a, v) => a + parseFloat(v.value), 0);
}
// Code to run when the document loads.
document.addEventListener('DOMContentLoaded', () => {
if (localStorage) {
loadFromStorage();
}
displaySuma();
});
body {
margin: 0 auto;
color: #323232;
width: 100%;
height: 100%;
line-height: 1.5;
font-family: 'Roboto', serif
}
#container {
width: 500px;
margin: 0 auto
}
#container p {
display: inline-block;
margin-top: 20px
}
span {
font-weight: bold;
text-decoration: underline
}
#productos {
display: none
}
.img-prod {
display: inline-block;
float: left;
background: #000;
margin-right: 10px
}
.img-prod img {
width: 100%;
height: auto;
max-width: 70px;
display: block;
border: 0
}
#comp-p1,
#comp-p2,
#comp-p3 {
width: 120px;
height: 30px;
margin-top: 15px;
background: green;
padding: 10px 0 5px;
text-align: center;
vertical-align: middle;
color: #fff;
cursor: pointer
}
.derecha {
border: solid 1px #999;
max-height: 400px;
width: 350px;
margin: 0 auto;
text-align: center;
padding: 10px 0;
overflow-y: auto;
float: right
}
#producto-1,
#producto-2,
#producto-3 {
display: inline-block;
width: 220px;
padding: 10px;
float: left;
text-align: left;
font-size: .9em;
margin-right: 5px
}
#producto-1 {
background: green;
color: #fff
}
#producto-2 {
background: #add8e6;
color: #000
}
#producto-3 {
background: #666;
color: #fff
}
.cont-p {
display: inline-block;
margin: 7px auto;
line-height: 1
}
.bbp {
display: inline-block;
float: right;
width: 24px;
height: 24px;
text-align: center;
background: red;
color: #fff;
margin-left: 5px;
line-height: 1.5;
cursor: pointer
}
.cont-num {
float: left;
width: 24px;
height: 24px;
margin: 20px 5px 0 18px;
padding: 4px 3px 3px;
background: red;
text-align: center;
font-size: 16px;
font-family: Arial, sans-serif;
color: #fff
}
#mostrar {
display: none
}
#mostrar {
width: 100px;
margin: 70px 0 0;
padding: 10px;
text-align: center;
background: grey;
color: #fff;
cursor: pointer
}
/* ==== Style of Sume ==== */
.derecha input {
width: 40px;
display: block;
margin: 0 auto 10px 0;
padding: 2px 0;
background: #f2f2f2;
border: none;
border: 1px solid #000;
text-align: center
}
#cont-resultado {
text-align: center;
width: 110px;
margin-top: 70px;
background: grey;
padding: 5px 10px 10px;
color: #fff
}
#cont-resultado input {
display: inline-block;
margin: 10px auto;
background: #fff;
color: #000;
border: 1px solid #000;
padding: 8px 0
}
#cont-resultado p {
display: inline-block;
text-decoration: none;
color: #fff;
background: grey;
padding: 8px 10px;
cursor: pointer
}
#total {
display: block;
width: 80px;
text-align: center
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="productos">
<!-- =============== -->
<div id="cont-p1" class="cont-p">
<div id="producto-1">
<div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"> </div>cont-p1 cloned!<br><br>Input Value = 1</div>
<input class="add-prod" type="num" value="1">
<div class="bbp">X</div>
</div>
<!-- =============== -->
<div id="cont-p2" class="cont-p">
<div id="producto-2">
<div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>
cont-p2 cloned!<br><br>Input Value = 1</div>
<input class="add-prod" type="num" value="1">
<div class="bbp">X</div>
</div>
<!-- =============== -->
<div id="cont-p3" class="cont-p">
<div id="producto-3">
<div class="img-prod"><img src="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>
cont-p3 cloned!<br><br>Input Value = 198</div>
<input class="add-prod" type="num" value="198">
<div class="bbp">X</div>
</div>
<!-- =============== -->
</div>
<!-- // productos -->
<div class="derecha"></div>
<div id="comp-p1" data-clone="cont-p1" class="comp-clone">Clone 1</div>
<div id="comp-p2" data-clone="cont-p2" class="comp-clone">Clone 2</div>
<div id="comp-p3" data-clone="cont-p3" class="comp-clone">Clone 3</div>
<div class="cont-num" id="clicks">0</div>
<div class="cont-num" id="clicksdos">0</div>
<div id="cont-resultado">
<span>RESULT:</span><br>
<input name="total" id="total">
<br>Is the sum of the cloned divs
<!--<p id='sumup'>Ver total</p>-->
</div>
<p><span>NOTE:</span><br>Here we are looking for only the cloned inputs can be sumed (and see the result in the box color gray).<br><br>The problem is that the current script does not apply a sume of the cloned inputs only... it adds ALL the inputs presents
in the html...<br><br>So (1), how do you sum only the cloned inputs, ignoring those that are outside...?<br><br>And (2) also, how to subtract from the total result all the cloned divs that are deleted...?</p>
</div>
<!-- // container -->
<script src="script.js"></script>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

How can I write in the text area through js - javascript

Related

Open an element under a button when the button is clicked in React

API images not displayed within modal

How can I optimize a popup Javascript code?

How to hide DIV scrollbar while being able to view the whole div

Javascript - Some errors in my LocalStorage script

Categories

Resources