Add element to an Object (not array) in JS

Question

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

What are you expecting your code to do? Where do you want to add the new element? — painotpi
– painotpi, Commented Dec 22, 2022 at 17:44

Nikola Lukic · Accepted Answer · 2022-12-22 17:45:28Z

1

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>

answered Dec 22, 2022 at 17:45

Nikola Lukic

4,2746 gold badges51 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Midhun · Accepted Answer · 2022-12-22 17:49:07Z

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

KhafitBZ · Accepted Answer · 2022-12-22 18:05:18Z

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>

Collectives™ on Stack Overflow

Add element to an Object (not array) in JS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related