0

I want to replace the inp element to span element the code is working fine for 1 time only when I click 2nd time on the check btn value goes undefined

let text = document.getElementsByClassName('text');
let items = document.querySelectorAll('.items');
let checkBtn = document.querySelector('.check-icon');

// Creating a SPAN element and appending it to div

for (let i = 0; i < text.length; i++) {
  checkBtn.addEventListener('click', () => {
    let span = document.createElement('span');
    let val = document.createTextNode(text[i].value);
    span.appendChild(val);
    span.setAttribute('class', 'text');
    items[i].appendChild(span);
    text[i].value = '' // setting the input value to empty once clicked onto the check button
    text[i].parentNode.replaceChild(span, text[i]);


  })
}
.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: 800px;
  height: auto;
  border: 2px solid black;
  display: grid;
  grid-template-columns: 230px 230px 230px 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;
}
<!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 class="mainContainer">
    <h1 class="heading">Details Collector</h1>
    <div class="container">


      <div class="items">
        <label class="label" for="Name">Name :</label> &nbsp;&nbsp;&nbsp;
        <input class="text" type="text" />
      </div>
      <div class="items">
        <label class="label" for="State">State :</label> &nbsp;&nbsp;&nbsp;
        <input class="text" type="text" />
      </div>
      <div class="items">
        <label class="label" for="Country">Country :</label> &nbsp;&nbsp;&nbsp;
        <input class="text" type="text" />
      </div>


      <div class="check-icon icons">
        <i class="fa fa-check" aria-hidden="true"></i>
      </div>


      <div class="plus-icon icons ">
        <i class="fa fa-plus" aria-hidden="true"></i>
      </div>


    </div>
  </div>

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

</html>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
Karan Rajput
  • 75
  • 5

1 Answers1

0

Second time around the span does not have a value

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('text');
        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);
      })
    }
  }
})
.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: 800px;
  height: auto;
  border: 2px solid black;
  display: grid;
  grid-template-columns: 230px 230px 230px 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;
}
<!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 class="mainContainer">
    <h1 class="heading">Details Collector</h1>
    <div class="container">


      <div class="items">
        <label class="label" for="Name">Name :</label> &nbsp;&nbsp;&nbsp;
        <input class="text" type="text" />
      </div>
      <div class="items">
        <label class="label" for="State">State :</label> &nbsp;&nbsp;&nbsp;
        <input class="text" type="text" />
      </div>
      <div class="items">
        <label class="label" for="Country">Country :</label> &nbsp;&nbsp;&nbsp;
        <input class="text" type="text" />
      </div>


      <div class="check-icon icons">
        <i class="fa fa-check" aria-hidden="true"></i>
      </div>


      <div class="plus-icon icons ">
        <i class="fa fa-plus" aria-hidden="true"></i>
      </div>


    </div>
  </div>

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

</html>
mplungjan
  • 169,008
  • 28
  • 173
  • 236
  • thanks for the answer, but if you click the check button again it goes blank. – Karan Rajput Jan 04 '22 at 15:23
  • It was not clear what you wanted - you want your input back second click? – mplungjan Jan 04 '22 at 15:23
  • No brother, I want that once you click the check button the input value should become the value of span element and the check button should not do anything when clicked again. – Karan Rajput Jan 04 '22 at 15:28
  • This did not help. You have an input field and you want to convert to span and then what? – mplungjan Jan 04 '22 at 15:53
  • Bro I just want the first step. after putting values in input field and clicking the check button the values will become span elements value. that's it. that's what i want i do not want that when you click onto the check button again it shouldn't do anything. – Karan Rajput Jan 04 '22 at 16:10
  • So nothing happens when you click again or do you want me to remove the check? – mplungjan Jan 04 '22 at 17:07
  • nothing should happen when you click again. and thank you so much brother for understanding my problem :) – Karan Rajput Jan 04 '22 at 17:11
  • Done - see update – mplungjan Jan 04 '22 at 17:12
  • thanks a lot, yes that's what I wanted. could you please tell what actually my code was doing ? and could you please guide me how to go deeper into Javascript as I am a newbie. – Karan Rajput Jan 04 '22 at 17:26
  • The problem with your code is it [needed a closure](https://stackoverflow.com/questions/1451009/javascript-infamous-loop-issue). Mine does not – mplungjan Jan 04 '22 at 19:24