仅当空输入值为空/null 时，在 JavaScript 中执行响应函数时才为空输入值赋值答案

【问题标题】：Give empty input values a value only when they are empty/null, when a response function is executed in JavaScript仅当空输入值为空/null 时，在 JavaScript 中执行响应函数时才为空输入值赋值
【发布时间】：2022-01-10 20:12:22
【问题描述】：

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

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

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

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

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

在声明 nameHere 后，我通过执行以下操作来完成这项工作，但是，当输入名称值时，它不会返回到具有输入的名称值：

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>

【问题讨论】：

nameHere 在定义之前被使用。

标签： javascript html input null conditional-operator

【解决方案1】：

请按照 sn-p 运行。一旦你输入了一个名字，它就会被打印在结果 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>

【讨论】：

您可以将onInput 保留为onchange。虽然onInput 更直接。
好的，所以，当我声明变量时不包含“<span>”值时，这有效。我想这就是我扯掉头发的原因。当在我声明的变量中时，有什么办法可以工作吗？
我猜你的意思是这样的var resultValue = "Hello my name is <span>" + val + "</span>, nice to meet you.";
所以我发现这两个答案都有帮助，但是当我将值分配给空跨度时，我刚刚所做的是设置!val.length == 13。这是让我到达那里最有帮助的。
@Eduard 是的，我认为这也可以。但是我以这种方式在另一个程序中声明了变量，并且由于复杂性而只是做了"Hello I'm" + name + "..." 以便于使用/查看

【解决方案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>

【讨论】：