Question

0

117

Views

How to display a new screen value when button is clicked in javascript

I am trying to create a page to add a new user when click into a value on menu bar like an Add option that allows users to input a name, an office number, and a phone number

Here is my code:

let menu = ["View", "Add", "Verify", "Update", "Delete"];

let list = document.getElementById("menuList");

menu.forEach((item) => {
  let li = document.createElement("li");
  li.innerText = item;
  list.appendChild(li);
});

let users = [
  { name: "Jan", id: "1", number: "111-111-111" },
  { name: "Juan", id: "2", number: "222-222-222" },
  { name: "Margie", id: "3", number: "333-333-333" },
  { name: "Sara", id: "4", number: "444-444-444" },
  { name: "Tyrell", id: "5", number: "555-555-555" },
];

var div = "<div class='infor'>";
for (var i = 0; i < users.length; i++) {
  div += "<div class='user-informations'>";
  div += "<p>" + users[i].name + "</p>";
  div += "<p>" + users[i].id + "</p>";
  div += "<p>" + users[i].number + "</p>";
  div += "</div>";
}
div += "</div>";
document.getElementById("usersList").innerHTML = div;

<div class="contact-container">
  <div class="navbar">
    <ul id="menuList">
      <img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png"/> 
    </ul>
  </div>
  <div class="users" id="usersList">
  </div>
</div>

my project:

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-12T07:38:23.522Z

Paying no attention to style or good software engineering practices:

let usersList = document.getElementById("usersList"),
    addPage = document.getElementById("addPage");

const users = [
  { name: "Jan", id: "1", number: "111-111-111" },
  { name: "Juan", id: "2", number: "222-222-222" },
  { name: "Margie", id: "3", number: "333-333-333" },
  { name: "Sara", id: "4", number: "444-444-444" },
  { name: "Tyrell", id: "5", number: "555-555-555" },
];

function showUsers() {
  usersList.innerHTML = "";
  usersList.style.display = "inline";
  addPage.style.display = "none";
  users.forEach(u => {
    const newUser = document.createElement("p");
    newUser.innerHTML = `${u.id} ${u.name}<br/>${u.number}`;
    usersList.appendChild(newUser);
  })
}

function addOn() {
  usersList.style.display = "none";
  addPage.style.display = "inline";
}

function addUser() {
  const id = document.getElementById("id").value;
  const name = document.getElementById("name").value;
  const number = document.getElementById("number").value;
  users.unshift({ name: name, id: id, number: number});
  showUsers();
}

showUsers();

.navbar { vertical-align: top; padding-right: 1rem; border-right:solid 1px red }

<div class="contact-container">
  <table>
    <tr>
      <td class="navbar">
        <ul id="menuList" style="cursor:pointer">
          <img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png" />
          <li onclick="showUsers()">View</li>
          <li onclick="addOn()">Add</li>
          <li>...</li>
        </ul>
      </td>
      <td>
        <div class="users" id="usersList"></div>
        <div id="addPage" style="display:none">
          Id: <input id="id" size="1"/> Name: <input id="name" /><br/>
          Number: <input id="number" /><br/>
          <button onclick="addUser()">Add</button>
        </div>
      </td>
    </tr>
  </table>

</div>

It is not necessary to generate the menu list dynamically unless the menu is really dynamic.

Ask if you need explanation on any of the stuff above.

0

117

How to display a new screen value when button is clicked in javascript

1 answers

0

Find remote jobs

Andres GPT