De lo contrario, quiero su valor original.
Resultado básico deseado : para este ejemplo, escriba un nombre para ver el resultado. Borre el nombre y quiero que diga "[vacío]" en lugar del nombre (en el texto debajo del campo). Si vuelvo a escribir el nombre, debería volver a mostrar el nombre.
Estoy usando "span" en un programa más grande, así que lo usé en este ejemplo por si acaso, independientemente de que el resultado sea el mismo.
EDITAR: no importa, esto es falso. El resultado no es el mismo. Necesito que funcione cuando "span" está en la variable declarada.
Estoy teniendo un gran problema aquí. Las declaraciones if/else no funcionan y he probado todas las variaciones de argumentos ternarios.
Conseguí que esto funcionara a la mitad haciendo lo siguiente después de declarar nameHere, sin embargo, no volvería a tener el valor de nombre ingresado cuando se ingresó:
var empty = null; var nameHere = empty || "[empty]";Aquí hay un código de muestra de lo que tengo ahora:
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>Ejecute el siguiente fragmento. Una vez que escriba un nombre, se imprimirá en el resultado div, una vez que borre se mostrará VACÍO en su lugar.
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>Si usa el método Element.addEventListener() , puede usar el objetivo del evento para obtener el valor.
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>