Add element to an Object (not array) in JS-CodePudding

I'm new to JS and I'm just practicing. I have this form that sets data in an object which is later displayed on the DOM. It works but it just shows a "key" at a time. If I add new elements they replace the existing one.

class Items {
  constructor(namee, surnamee) {
    this.namee = namee;
    this.surnamee = surnamee;
  }
}

function Func() {
  event.preventDefault();
  var nameval = document.getElementById('namee').value;
  var surnval = document.getElementById('surnamee').value;
 
  let newIt = new Items(nameval, surnval);
  console.log(newIt)
  document.getElementById('box').innerHTML = newIt.namee   " "   newIt.surnamee
}

 
  <form onsubmit={Func()}> 
    <input id="namee" > </input>
  <input id="surnamee"> </input>
  <button type=submit> send </button>
  </form>
  <p id="box"> </p>

I've tried the push() method but it works with arrays. I've also tried to create an object instead of a class but I get the same grief

Thank you in advance

CodePudding user response：

Maybe you looking for this:

class Items {
  constructor(namee, surnamee) {
    this.namee = namee;
    this.surnamee = surnamee;
  }
}

function Func() {
  event.preventDefault();
  var nameval = document.getElementById('namee').value;
  var surnval = document.getElementById('surnamee').value;
 
  let newIt = new Items(nameval, surnval);
  console.log(newIt)
  document.getElementById('box').innerHTML  = `<p>`   newIt.namee   " "   newIt.surnamee   `</p>`;
}

  <form onsubmit={Func()}> 
    <input id="namee" > </input>
  <input id="surnamee"> </input>
  <button type=submit> send </button>
  </form>
  <p id="box"> </p>

CodePudding user response：

class Items {
  constructor(namee, surnamee) {
    this.namee = namee;
    this.surnamee = surnamee;
  }
}
function Func() {
 event.preventDefault();
var nameval = document.getElementById('namee').value;
var surnval = document.getElementById('surnamee').value;


let newIt = new Items(nameval, surnval);
let html =  `${document.getElementById('box').innerHTML}<p>${newIt.namee} ${newIt.surnamee}</p>`
 document.getElementById('box').innerHTML = html
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
  <form onsubmit={Func()}> 
    <input id="namee" > </input>
  <input id="surnamee"> </input>
  <button type=submit> send </button>
  </form>
  <p id="box"> </p>
</body>
</html>

Hope it help :)

or you can use this https://www.w3schools.com/jsref/met_node_appendchild.asp

CodePudding user response：

any stored value can be wrapped in a div tag

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
  <form onsubmit={Func()}> 
    <input id="namee" > </input>
  <input id="surnamee"> </input>
  <button type=submit> send </button>
  </form>
  <p id="box"> </p>
</body>
</html>

<script>
class Items {
  constructor(namee, surnamee) {
    this.namee = namee;
    this.surnamee = surnamee;
  }
}

function Func() {
  event.preventDefault();
  var nameval = document.getElementById('namee').value;
  var surnval = document.getElementById('surnamee').value;
 
  let newIt = new Items(nameval, surnval);
  console.log(newIt)
  const row = document.createElement('div');
  row.innerText = newIt.namee   " "   newIt.surnamee;
  document.getElementById('box').appendChild(row);
}
</script>