Question

0

142

Views

How to add html class in function javascript

I am trying to create a function that add user in javascript.

Here is my code snippets from js file and html file:

function input() {
  document.getElementById("name").style.visibility = "visible";
  document.getElementById("id").style.visibility = "visible";
  document.getElementById("number").style.visibility = "visible";
  document.getElementById("search").style.visibility = "visible";
}

function addUser(list) {
  var text = "";
  var inputs = document.querySelectorAll("input[type=text]");
  for (var i = 0; i < inputs.length; i++) {
    text += inputs[i].value;
  }
  var list = document.createElement("div");
  var node = document.createTextNode(text);
  list.appendChild(node);
  document.getElementById("usersList").appendChild(list);
}

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

  <head>
    <link rel="stylesheet" href="./style.css">
  </head>

  <body>
    <div class="contact-container">
      <div class="navbar">
        <ul id="menuList">
          <li>
            <img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png"/>
          </li>
          <li>View</li>
          <li onclick="input()">
            Add
          </li>
        </ul>
      </div>
      <div class="users">
        <input type="text" id="name" placeholder="Name"/>
        <input type="text" id="id" placeholder="Id"/>
        <input type="text" id="number" placeholder="Number"/>
        <button type="submit" id="search" onclick="addUser()">
          <svg...> </svg>
        </button>
        <div id="usersList"></div>
      </div>

    </div>
  </body>
</html>

How can I make styling when add user just like the one I had in html file?

Here is my project:

Thank you so much!!!!!!

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-12T07:33:12.664Z

Put newlines between each value from the inputs, and set the style of the DIV to white-space: pre.

function input() {
  document.getElementById("name").style.visibility = "visible";
  document.getElementById("id").style.visibility = "visible";
  document.getElementById("number").style.visibility = "visible";
  document.getElementById("search").style.visibility = "visible";
}

function addUser(list) {
  var text = "";
  var inputs = document.querySelectorAll("input[type=text]");
  for (var i = 0; i < inputs.length; i++) {
    text += inputs[i].value + '\n';
  }
  var list = document.createElement("div");
  var node = document.createTextNode(text);
  list.appendChild(node);
  document.getElementById("usersList").appendChild(list);
}

#usersList div {
  white-space: pre;
}

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

  <head>
    <link rel="stylesheet" href="./style.css">
  </head>

  <body>
    <div class="contact-container">
      <div class="navbar">
        <ul id="menuList">
          <li>
            <img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png"/>
          </li>
          <li>View</li>
          <li onclick="input()">
            Add
          </li>
        </ul>
      </div>
      <div class="users">
        <input type="text" id="name" placeholder="Name"/>
        <input type="text" id="id" placeholder="Id"/>
        <input type="text" id="number" placeholder="Number"/>
        <button type="submit" id="search" onclick="addUser()">
          <svg...> </svg>
        </button>
        <div id="usersList"></div>
      </div>

    </div>
  </body>
</html>

0

142

How to add html class in function javascript

1 answers

0

Find remote jobs

Andres GPT