只有在 empty/null 中执行响应函数时才给空输入值赋值 JavaScript

Question

否则，我要它们的原始值。

基本期望结果：对于此示例，键入名称以查看结果。擦除名称，我希望它说“[empty]”而不是名称（在字段下方的文本中）。如果我再次输入名称，它应该会再次显示该名称。

我在一个更大的程序中使用“span”，所以我在这个例子中使用它以防万一，不管结果应该是一样的。

编辑：没关系，这是错误的。结果不一样。当“跨度”在声明的变量中时，我需要它工作。

我遇到了一个大问题。 if/else 语句不起作用，我已经尝试了三元参数的所有变体。

我通过在声明 nameHere 后执行以下操作使它工作到一半，但是，它不会 return 在输入时具有输入的名称值：

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

这是我现在拥有的一些示例代码：

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 class="formclass">
  <label for="name">Input name here</label>
  <input id="name" onchange="getResponse()"></input>
</div>

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

Answer 1

请运行以下代码段。一旦你输入一个名字，它将被打印在结果中 div，一旦你擦除，将显示 EMPTY。

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 class="formclass">
      <label for="name">Input name here</label>
      <input id="name" onInput="getResponse()"></input>
 </div>

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

Answer 2

如果使用Element.addEventListener()方法，可以使用事件目标获取值。

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 class="formclass">
  <label for="name">Input name here</label>
  <input id="name" autoComplete="off">
</div>

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

只有在 empty/null 中执行响应函数时才给空输入值赋值 JavaScript

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

javascript

html

input

null

conditional-operator