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 funct

Solution 1:

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;

constsafeInt = (key) => {
  let value = parseInt(getValue(key));
  return (isNaN(value) || value < 0) ? 0 : value;
}

// This loads our clicks from the LocalStorageconstloadClicks = () => {
  clicks = safeInt('clicks');
  clicksdos = safeInt('clicksdos');
}

constloadHTML = () => {
  returngetValue('html', '');
}

constloadFromStorage = () => {
  let html = loadHTML();
  if (html !== '') {
    loadClicks();
  }
  displayClicks();
  document.querySelector(".derecha").innerHTML = html;
}

// Display the clicks on the screenconstdisplayClicks = () => {
  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;
}

constadjustClicks = (value) => {
  clicks += value;
  clicksdos += value;
  storeValue('clicks', clicks);
  storeValue('clicksdos', clicksdos);
  displayClicks();
}
constaddClick = () => adjustClicks(1);
constremoveClick = () => adjustClicks(-1);


// Manage localStorageconststoreValue = (key, value) => (localStorage) ? localStorage.setItem(key, value) : '';
constgetValue = (key, defaultValue) => (localStorage) ? localStorage.getItem(key) : defaultValue;
conststoreHTML = () => storeValue("html", document.getElementsByClassName("derecha")[0].innerHTML);

// Add a node to the DerechaconstaddToDerecha = (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;
  // Addif (target.matches('.comp-clone')) {
    addClick();
    addToDerecha(event.target.dataset.clone);
  }
  // Removeif (target.matches('.bbp')) {
    removeClick();
    getParent('.derecha', target).removeChild(target.parentNode);
    storeHTML();
    displaySuma();
  }
});

// This is just a helper function.constgetParent = (match, node) => (node.matches(match)) ? node : getParent(match, node.parentNode);

// New Script for sum inputsconstdisplaySuma = () => document.getElementById("total").value = suma();

const suma = function() {
  returnArray.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
}

#containerp {
  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-prodimg {
  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: 10px05px;
  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: 10px0;
  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: 20px5px018px;
  padding: 4px3px3px;
  background: red;
  text-align: center;
  font-size: 16px;
  font-family: Arial, sans-serif;
  color: #fff
}

#mostrar {
  display: none
}

#mostrar {
  width: 100px;
  margin: 70px00;
  padding: 10px;
  text-align: center;
  background: grey;
  color: #fff;
  cursor: pointer
}


/* ==== Style of Sume ==== */.derechainput {
  width: 40px;
  display: block;
  margin: 0 auto 10px0;
  padding: 2px0;
  background: #f2f2f2;
  border: none;
  border: 1px solid #000;
  text-align: center
}

#cont-resultado {
  text-align: center;
  width: 110px;
  margin-top: 70px;
  background: grey;
  padding: 5px10px10px;
  color: #fff
}

#cont-resultadoinput {
  display: inline-block;
  margin: 10px auto;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  padding: 8px0
}

#cont-resultadop {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  background: grey;
  padding: 8px10px;
  cursor: pointer
}

#total {
  display: block;
  width: 80px;
  text-align: center
}

<!DOCTYPE html><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>repl.it</title><linkhref="style.css"type="text/css" /></head><body><divid="container"><divid="productos"><!-- =============== --><divid="cont-p1"class="cont-p"><divid="producto-1"><divclass="img-prod"><imgsrc="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>cont-p1 cloned!<br><br>Input Value = 1</div><inputclass="add-prod"type="num"value="1"><divclass="bbp">X</div></div><!-- =============== --><divid="cont-p2"class="cont-p"><divid="producto-2"><divclass="img-prod"><imgsrc="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>
          cont-p2 cloned!<br><br>Input Value = 1</div><inputclass="add-prod"type="num"value="1"><divclass="bbp">X</div></div><!-- =============== --><divid="cont-p3"class="cont-p"><divid="producto-3"><divclass="img-prod"><imgsrc="https://upload.wikimedia.org/wikipedia/commons/3/39/Lichtenstein_img_processing_test.png"></div>
          cont-p3 cloned!<br><br>Input Value = 198</div><inputclass="add-prod"type="num"value="198"><divclass="bbp">X</div></div><!-- =============== --></div><!-- // productos --><divclass="derecha"></div><divid="comp-p1"data-clone="cont-p1"class="comp-clone">Clone 1</div><divid="comp-p2"data-clone="cont-p2"class="comp-clone">Clone 2</div><divid="comp-p3"data-clone="cont-p3"class="comp-clone">Clone 3</div><divclass="cont-num"id="clicks">0</div><divclass="cont-num"id="clicksdos">0</div><divid="cont-resultado"><span>RESULT:</span><br><inputname="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 --><scriptsrc="script.js"></script></body></html>