Return [Object Htmlinputelement], what means and how to solve?

Asked

Viewed 435 times

-1

Hello, I want to store some data in the localStorage, but when I reload the page the data recovers in a messy way, also showing the information [Object Htmlinputelement]. You understand where I’m going wrong?

Here a fiddle: https://jsfiddle.net/9rjLo73z/

Here the code, if you prefer:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .mydiv {
        background-color: green;
    }
    .mydiv2 {
        background-color: orange;
    }
  </style>
</head>

<body>

  <div class="small-container">
    <h1>Dados</h1>
    <form>
        <input id="item" type="text" placeholder="dado"><br>
        <input id="item2" type="text" placeholder="dado1">
      <input type="button" value="create" onclick="create()">
    </form>

    <h2>Items</h2>
    <section></section>
    <button>Limpar</button>
  </div>


  <script>
const form = document.querySelector('form');
const section = document.querySelector('section');
const button = document.querySelector('button');
const input = document.getElementById('item');
const input2 = document.getElementById('item2');
let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];

localStorage.setItem('items', JSON.stringify(itemsArray));
const data = JSON.parse(localStorage.getItem('items'));

const divMaker = (text) => {
  const div = document.createElement('div');
  div.setAttribute('class', 'mydiv')
  div.textContent = text;
  section.appendChild(div);
}
const divMaker2 = (text) => {
  const div2 = document.createElement('div');
  div2.setAttribute('class', 'mydiv2')
  div2.textContent = text;
  section.appendChild(div2);
}

function create() {
  itemsArray.push(input.value);
  itemsArray.push(input2.value);
  localStorage.setItem('items', JSON.stringify(itemsArray));
  divMaker(input.value);
  divMaker2(input2.value);
  input.value = "";
  input2.value = "";
};

data.forEach(item => {
  divMaker(item);
  divMaker2(item2);
});

button.addEventListener('click', function () {
  localStorage.clear();
  while (section.firstChild) {
    section.removeChild(section.firstChild);
  }
  itemsArray = [];
});
  </script>
</body>

</html>

javascript

1 answer

2


Hi, Thiago, all right?

Your problem was basically this:

data.forEach(item => {
  divMaker(item);
  divMaker2(item2); // este elemento referencia o input de texto, que é renderizado como objeto no HTML
});

Basically, just switching to this, your code should already work, since each function basically adds a class, but the text still needs to be the element item:

data.forEach(item => {
  divMaker(item);
  divMaker2(item);
});

However, I made a simplified version of your code in case you want to take a look and see how I could get it leaner: https://jsfiddle.net/diogocosta/8j9w1qye/15/

As you gain more experience, a good exercise is to try to remove the duplicity from your code.

A hug!

  • 1

    My dear, thank you very much! I will analyze to the maximum your example to understand well the logic. Hug!!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.