Как исправить логику js

Question

нужно чтобы при нажатии на кнопку Insert появился текст в <p> а при повторном нажатии на кнопку не исчез <p>

document.querySelectorAll(".btnY-th")[0].onclick =  function(){newLng()};
        
function newLng(){
  let inValue = document.querySelector(".inLng").value
  let wrArea = document.querySelector(".lang").innerHTML = inValue
  document.querySelector(".inLng").value = ""
  document.querySelector(".body-th").style.display = "flex"

  if (inValue == ""){
    document.querySelector(".body-th").style.display = "none"
  }
  else if (inValue != ""){
    document.querySelector(".body-th").style.display = "flex"
  }

}

<div class ="body-th">
    <div class = "center-th">
      <div class = "flex-col">
        <p class = "lang"></p>
      </div>
      <div class = "flex-sq" style = "margin-right:22px;">
        <i class="fa fa-times-circle q7" aria-hidden="true"></i>
        <i class="fa fa-pencil" aria-hidden="true"></i>
        <i class="fa fa-bars" aria-hidden="true"></i>
      </div>
    </div>
</div>

<div class = "body" style = "flex-direction: column;">
  <div class = "center-sec">
      <div class = "flex-col">
        <p class = "armenian">Language</p>
      </div>
  </div>
  <div class = "input-lng">
    <input type="text" name="" value = ""class = "inLng" placeholder="e.g. English">
    <div class = "flex-sq" style = "margin-right:0px;width:auto;">
        <div class = "buttons" style = "margin: 10px 0px 0px 0px;" width:0px;>
          <button class = "btnY-th"><i class="fa fa-check-circle" aria-hidden="true" style = "color:#149A00;">Insert</i></button>
        </div>
      </div>
  </div>

Answer 1

const button = document.querySelector("button.btnY-th");

button.addEventListener('click', e => newLng(e));

function newLng() {
  const inValue = document.querySelector("input.inLng").value
  const wrArea = document.querySelector(".lang");

  if (inValue === "") {
    document.querySelector(".body-th").style.display = "none"
  } else if (inValue !== "") {
    document.querySelector(".body-th").style.display = "flex"
  }

  document.querySelector(".inLng").value = ""
  document.querySelector(".body-th").style.display = "flex"

  if (!wrArea.innerText.length) {
    wrArea.innerText = inValue;
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="body-th">
  <div class="center-th">
    <div class="flex-col">
      <p class="lang"></p>
    </div>
    <div class="flex-sq" style="margin-right:22px;">
      <i class="fa fa-times-circle q7" aria-hidden="true"></i>
      <i class="fa fa-pencil" aria-hidden="true"></i>
      <i class="fa fa-bars" aria-hidden="true"></i>
    </div>
  </div>
</div>

<div class="body" style="flex-direction: column;">
  <div class="center-sec">
    <div class="flex-col">
      <p class="armenian">Language</p>
    </div>
  </div>
  <div class="input-lng">
    <input type="text" name="" value="" class="inLng" placeholder="e.g. English">
    <div class="flex-sq" style="margin-right:0px;width:auto;">
      <div class="buttons" style="margin: 10px 0px 0px 0px;" width:0px;>
        <button class="btnY-th"><i class="fa fa-check-circle" aria-hidden="true" style = "color:#149A00;">Insert</i></button>
      </div>
    </div>
  </div>

Укороченный вариант:

const button = document.querySelector("button.btnY-th");

button.addEventListener('click', e => newLng(e));

function newLng() {
  const inputValue = document.querySelector("input.inLng").value;
  const langText = document.querySelector("p.lang");
  
  if (!langText.innerText.length) {
    langText.innerText = inputValue;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="body-th">
  <div class="center-th">
    <div class="flex-col">
      <p class="lang"></p>
    </div>
    <div class="flex-sq" style="margin-right:22px;">
      <i class="fa fa-times-circle q7" aria-hidden="true"></i>
      <i class="fa fa-pencil" aria-hidden="true"></i>
      <i class="fa fa-bars" aria-hidden="true"></i>
    </div>
  </div>
</div>

<div class="body" style="flex-direction: column;">
  <div class="center-sec">
    <div class="flex-col">
      <p class="armenian">Language</p>
    </div>
  </div>
  <div class="input-lng">
    <input type="text" name="" value="" class="inLng" placeholder="e.g. English">
    <div class="flex-sq" style="margin-right:0px;width:auto;">
      <div class="buttons" style="margin: 10px 0px 0px 0px;" width:0px;>
        <button class="btnY-th"><i class="fa fa-check-circle" aria-hidden="true" style = "color:#149A00;">Insert</i></button>
      </div>
    </div>
  </div>

БЛОГ НА HUSL

Как исправить логику js

Ответы (1 шт):