Javascript - How to get and edit elements by classname if they're wrapped in a within a string?

Question

This is driving me crazy. For my update function, I am trying to access the classes wrapped in <span> with the class name of label + a userID. When inspecting the element, each box comes up properly with class=label1, or class=label3, etc. But I can't access the whole class at once and set the display style to "none". I also want to access another class wrapped in input and display it at the same time. For testing, I'm using a certain label, label3, and no luck. Any advice would be appreciated, all I need is how to access those classes and edit their display, perhaps my syntax is slightly off.

var data = JSON.parse(data);
var form = document.getElementById("form");
form.style.display = "none";
var tableBody = document.getElementById('tbody');
var x = 0;

function callData() {
  data.forEach(function(object) {
    x++;
    var row = document.createElement('tr');
    row.innerHTML =
      '<td><span>' + object.User + '</span></td>' +
      '<td><span class="label' + object.User + '">' + object.Name + '</span> <input style="display:none" class="txt' + object.User + '" type="text" value="' + object.Name + '" class ="edit"/></td>' +
      '<td><span class="label' + object.User + '">' + object.Gender + '</span> <input style="display:none" class="txt' + object.User + '" type="text" value="' + object.Gender + '" class ="edit"/></td>' +
      '<td><span class="label' + object.User + '">' + object.Age + '</span> <input style="display:none"  class="txt' + object.User + '" type="text" value="' + object.Age + '" class ="edit"/></td>' +
      '<td><span class="label' + object.User + '">' + object.Job + '</span> <input style="display:none"  class="txt' + object.User + '" type="text" value="' + object.Job + '" class ="edit"/></td>' +
      '<td> <button name= "update" class = "label' + object.User + '" onclick ="update()">Update User</button> <button name= "remove" class = "label' + object.User + '" onclick ="remove(' + object.User + ')">Remove User</button> </td>';
    tableBody.appendChild(row);
  });
}
callData();

var tableRowCount = Number(document.getElementById("table").rows.length);

function addUser() {
  document.getElementById("list-user").style.display = "none";
  form.style.display = "block";
}

function update() {
  document.getElementsByClassName("label3").style.display = "none";
  document.getElementsByClassName("txt3").style.display = "initial";
}

function remove(userId) {
  data = data.filter(d => d.User != userId);
  document.getElementById('tbody').innerHTML = "";
  callData();
}

function saveUser() {
  data.push({
    "User": tableRowCount++,
    "Name": document.getElementById("txtName").value,
    "Gender": document.getElementById("txtGender").value,
    "Age": document.getElementById("txtAge").value,
    "Job": document.getElementById("txtJob").value
  });

  document.getElementById("list-user").style.display = "table";
  form.style.display = "none";
  document.getElementById('newData').reset();
  document.getElementById('tbody').innerHTML = "";
  callData();
}

table,
th,
td {
  border: 1px solid black;
}

th,
td {
  padding: 5px;
}

<html>

<head>
  <meta charset="utf-8" />
</head>

<body>
  <div id="list-user">
    <table id="table">
      <thead>
        <tr>
          <th>User</th>
          <th>Name</th>
          <th>Gender</th>
          <th>Age</th>
          <th>Job</th>
          <th>Options</th>
        </tr>
      </thead>
      <tbody id="tbody"></tbody>
    </table>
    <button name="addUser" onclick="addUser()">Add User</button>
  </div>
  <div id="form">
    <form id="newData">
      First name:<br>
      <input type="text" id="txtName" name="firstname"><br> Age:
      <br>
      <input type="number" id="txtAge" name="age"><br> Gender:
      <br>
      <input type="text" id="txtGender" name="gender"> <br> Job:
      <br>
      <input type="text" id="txtJob" name="job"><br>
      <input type="button" onclick="saveUser()" value="Save">
    </form>
  </div>
  <script src="usersData.json"></script>
</body>

</html>

Here is the json file, though it isn't the problem.

data='[{"User": 1,"Name": "Bob","Gender": "Male","Age": "23","Job": "Intern"},{"User": 2,"Name": "Jill","Gender": "Female","Age": "24","Job": "Banker"},{"User": 3,"Name": "John","Gender": "Male","Age": "25","Job": "Teacher"},{"User": 4,"Name": "Lewis","Gender": "Male","Age": "35","Job": "Manager"},{"User": 5,"Name": "Hilary","Gender": "Female","Age": "69","Job": "Senator"},{"User": 6,"Name": "Donald","Gender": "Male","Age": "74","Job": "President"}]';

I would suggest not to create your new dynamically created elements with `.innerHTML` and strings in the first place and instead use the DOM API of` `document.createElement()`. This will allow you to work with an element's `id` or `class` via properties, not strings. — Scott Marcus, Feb 10 '20 at 12:27
`el.getElementsByClassName` return an element collection, not a single element. so you cannot set there .style.display. you need to iterate through all. so instead `document.getElementsByClassName("label3").style.display="none"; document.getElementsByClassName("txt3").style.display="initial");` use `Array.from(document.getElementsByClassName("label3")).forEach(el => el.style.display="none"); Array.from(document.getElementsByClassName("txt3")).forEach(el => el.style.display="initial");` — Yosef Tukachinsky, Feb 10 '20 at 12:38

Javascript - How to get and edit elements by classname if they're wrapped in a within a string?

0 Answers0