how do I create a new element using input?-CodePudding

I'm making a phone book now I want to make a button on java script that would take the value of the input field (name) and create a new contact experience in java script is not much, I ran into a problem in the console nothing happens there are no errors but the code does not work there should be 2 total inputs (name and phone number) but for example, I want to make at least one to begin with

the function I wanted to write:

addBtn.onclick = function (event) {
  if (event.target.classList == "btn") {
    InputName.oninput = function () {
      const word = InputName.value;
      console.log(word);
      const newItem = document.createTextNode(`${word}`);
      const newDivItem = document.createElement('div');
      const newH1 = document.createElement('h1');
      div.appendChild(newDivItem);
      newDivItem.appendChild(newH1);
      newH1.appendChild(newItem);
      console.log(word)
    };
  }
};

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap" rel="stylesheet">
</head>

<body>
    <div >
        <div ><input type="search" placeholder="поиск"  id='search'></div>
        <div >
            <div id='div' ></div>
        </div>
        <input type="button"  value="Click" id="addBtn">
        <div >
            <input  type="text" placeholder="Name" id="InputName" value="">
        </div>  
    </div>
    <script src="./scripts.js"></script>
</body>

</html>

js:

let users = [
  { name: "user1 :", number: 791123434, id: "item1" },
  { name: "user2 :", number: 7449234345, id: "item2" },
  { name: "user3 :", number: 7932234345, id: "item3" },
  { name: "user4 :", number: 7911134345, id: "item4" },
  { name: "user5 :", number: 7917884345, id: "item5" },
  { name: "user6 :", number: 7999734345, id: "item6" },
  { name: "user7 :", number: 7945634345, id: "item7" },
  { name: "user8 :", number: 7945634345, id: "item9" },
  { name: "user9 :", number: 7123134345, id: "item11" },
  { name: "user10 :", number: 79498734345, id: "item12" },
];

users.map((item) => {
  const btn = document.querySelectorAll(".wrapper__blockIcon");
  const newDiv = document.createElement("div");
  const IconBlock = document.createElement("span");
  const IconText = document.createElement("h1");
  const IconTextContent = document.createTextNode("избранное!");
  const newDiv2 = document.createElement("div");
  const H1 = document.createElement("h1");
  const H2 = document.createElement("h1");
  const Item = document.createTextNode(`${item.name}`);
  const Item2 = document.createTextNode(`${item.number}`);
  const DeleteBoxContent = document.createTextNode("x");
  const DeleteBoxItem = document.createElement("h3");
  H2.classList.add("wrapper__profilesItem");
  H1.classList.add("wrapper__profilesItem1");
  newDiv.classList.add("wrapper__profiles");
  newDiv2.classList.add("wrapper__profilesBox");
  IconBlock.classList.add("wrapper__blockIcon");
  IconText.classList.add("wrapper__blockText");
  DeleteBoxItem.classList.add("wrapper__deleteButtonn");
  IconBlock.appendChild(IconText);
  IconText.appendChild(IconTextContent);
  div.appendChild(newDiv);
  newDiv.appendChild(H1);
  newDiv.appendChild(H2);
  newDiv.appendChild(IconBlock);
  H1.appendChild(Item);
  H2.appendChild(Item2);
  DeleteBoxItem.appendChild(DeleteBoxContent);
  newDiv.appendChild(DeleteBoxItem);

  


});

document.onclick = function (event) {
  const Parent = event.target.parentNode;
  if (event.target.classList == "wrapper__blockIcon") {
    event.target.classList.add("--active");
    console.log(parent);
    Parent.classList.add("-active");
  } else if (event.target.classList == "wrapper__deleteButtonn") {
    event.target.classList.add("hidden");
    console.log(parent);
    Parent.classList.add("hidden");
  } else {
    event.target.classList.remove("--active");
    Parent.classList.remove("-active");
    event.target.classList.remove("hidden");
    Parent.classList.remove("hidden");
  }
};




const Input = document.querySelector("#search");
console.log(Input);

Input.oninput = function () {
  let val = this.value.trim();
  let userItems = document.querySelectorAll(".wrapper__items div");
  console.log(userItems);
  if (val != "") {
    userItems.forEach(function (elem) {
      if (elem.innerText.search(val) == -1) {
        elem.classList.add("hide");
        console.log(elem.innerText);
      } else {
        elem.classList.remove("hide");
      }
    });
  } else {
    userItems.forEach(function (elem) {
      elem.classList.toggle("hide");
    });
  }
};

CodePudding user response：

You are checking for oninput event within the onclick handler for the button, which might be causing problems because at any given time a user can either input text or click. A simple solution would be the following modification:

// Make a 
const addBtn = document.getElementById('addBtn');

addBtn.onclick = function (event) {
// The classList check is not really required, if required, use:
// if (event.target.classList.constains('btn'))
// since classList is a DOMTokenList and not a string value
    const InputName = document.getElementById('InputName');
    const word = InputName.value;

    const newItem = document.createTextNode(`${word}`);
    const newDivItem = document.createElement('div');
    const newH1 = document.createElement('h1');
    div.appendChild(newDivItem); // replace div here with the element where 
    // you'd like to append newDivItem
    newDivItem.appendChild(newH1);
    newH1.appendChild(newItem);
};

Here's a small and slightly similar demo for adding items to an object array based on input values: https://jsfiddle.net/ubcte56n/1/

Hope this helps.