Click event firing on clicking onto div's border-CodePudding

I want that after putting input values and clicking onto the check icon , check icon should get replaced with the edit icon but It only works when you click the check icon's border but not the whole icon.

<div >
      <h1 >Details Collector</h1>
      <div >
        <div >
          <label  for="Name">Name :</label> &nbsp;&nbsp;&nbsp;
          <input  type="text"/>
        </div>
        <div >
          <label  for="State">State :</label> &nbsp;&nbsp;&nbsp;
          <input  type="text"/>
        </div>
        <div >
          <label  for="Country">Country :</label> &nbsp;&nbsp;&nbsp;
          <input  type="text"/>
        </div>

    
        <div >
          <i  aria-hidden="true"></i>
        </div>
      
      <div >
        <i  aria-hidden="true"></i> 
      </div>


        <div >
          <i  aria-hidden="true"></i>
        </div>
    </div>
      </div>
    </div>
 
js fiddle - https://jsfiddle.net/p6bgf5kx/1/

CodePudding user response：

No need to bind two click events. you can achieve using single click event.

const container = document.querySelector(".container");

// Creating a SPAN element and appending it to div
container.addEventListener("click", (e) => {
  const tgt = e.target.closest(".icons");
  if (tgt) {
    if (tgt.classList.contains("swapped")) return; // stop
    if (tgt.classList.contains("check-icon")) {
      tgt.classList.add("swapped");
      let texts = document.querySelectorAll(".text");
      let items = document.querySelectorAll(".items");
      texts.forEach((text, i) => {
        let span = document.createElement("span");
        let val = document.createTextNode(text.value ? text.value : "");
        span.appendChild(val);
        span.classList.add("text2");
        items[i].appendChild(span);
        if (text.value) text.value = ""; // setting the input value to empty once clicked onto the check button
        text.parentNode.replaceChild(span, text);
        
        let btns = document.querySelectorAll(".mainicon");
  if (tgt.classList.contains("check-icon")) {
    Array.from(btns).forEach((ele) => {
      ele.classList.toggle("hidden");
    });
  }
      });
    }
  }
});

.mainContainer {
  height: 400px;
  width: 900px;
  background-color: white;
  margin: 200px auto;
  border: 5px solid black;
  border-radius: 8px;
}
.heading {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  text-align: center;
  position: relative;
  top: 15px;
}

.container {
  width: 840px;
  height: auto;
  border: 2px solid black;
  display: grid;
  grid-template-columns: 230px 230px 230px 50px 50px 50px;
  align-items: center;
  margin: auto;
  position: relative;
  top: 30px;
  padding: 10px;
  background-color: #007bff;
}

.items {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #fff;
}

.text {
  width: 130px;
}

.icons {
  font-size: 18px;
  border: 2px solid #fff;
  margin-left: 12px;
  color: #007bff;
  cursor: pointer;
  background-color: #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icons:hover {
  color: #fff;
  background-color: #007bff;
}

.hidden {
  display: none;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
      integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  <body style="background-color: #007bff">
    <div >
      <h1 >Details Collector</h1>
      <div >
        <div >
          <label  for="Name">Name :</label> &nbsp;&nbsp;&nbsp;
          <input  type="text"/>
        </div>
        <div >
          <label  for="State">State :</label> &nbsp;&nbsp;&nbsp;
          <input  type="text"/>
        </div>
        <div >
          <label  for="Country">Country :</label> &nbsp;&nbsp;&nbsp;
          <input  type="text"/>
        </div>

    
        <div >
          <i  aria-hidden="true"></i>
        </div>
      
      <div >
        <i  aria-hidden="true"></i> 
      </div>


        <div >
          <i  aria-hidden="true"></i>
        </div>
    </div>
      </div>
    </div>

    <script src="app.js"></script>
  </body>
</html>