Give empty input values a value only when they are empty/null, when a response function is executed-CodePudding

Otherwise, I want their original value.

Basic desired outcome: For this example, type a name to see the result. Erase the name and I want it to say "[empty]" instead of the name (in the text below the field). If I type the name again it should show the name again.

I am using "span" in a larger program so I used it in this example just in case, regardless the result should be the same.

EDIT: nevermind, this is false. The result is not the same. I need it to work when "span" is in the declared variable.

I am having a huge issue here. if/else statements are not working and I have tried all variations of ternary arguments.

I got this working halfway by doing the following after declaring nameHere, however, it would not return to having the inputted name value when it was entered:

var empty = null;
var nameHere = empty || "[empty]";

Here is some sample code of what I have right now:

function getResponse() {
  var resultValue = "Hello my name is "   nameHere   ", nice to meet you.";
  document.getElementById("result").innerHTML = resultValue;

  var nameHere = (nameHere === null) ? `<span>${"[EMPTY]"}</span>` : `<span>${document.getElementById("name").value}</span>`;
}

<div >
  <label for="name">Input name here</label>
  <input id="name" onchange="getResponse()"></input>
</div>

<div id="result"></div>

CodePudding user response：

Please run following snippet. Once you type a name, it will be printed in the result div, once you erase EMPTY will be shown instead.

function getResponse(){
      let val = document.getElementById("name").value
      if (!val.length) val = "[empty]";

      var resultValue = "Hello my name is "   val   ", nice to meet you.";
      document.getElementById("result").innerHTML = resultValue;
      
    }

<div >
      <label for="name">Input name here</label>
      <input id="name" onInput="getResponse()"></input>
 </div>

<div id="result"></div>

CodePudding user response：

If you use the Element.addEventListener() method, you can use the event target to get the value.

document.querySelector(`#name`).addEventListener(`change`, (event) => {
  const val = event.target.value;
  const name = !val.length ? `<span>[EMPTY]</span>` : `<span>${val}</span>`;
  document.querySelector(`#result`).innerHTML = `Hello my name is ${name}, nice to meet you.`;
})

<div >
  <label for="name">Input name here</label>
  <input id="name" autoComplete="off">
</div>

<div id="result"></div>