Значение переменной jQuery: [объект]

Question

Если поле формы пустое, должно отображаться значение cityName. Значение должно отображаться до того, как пользователь введет свое собственное значение, и если он удалит ввод, значение span должно вернуться к значению по умолчанию (в моем случае «Лондон» в виде строки).

Я былиграть с .prop('outerHTML') и $("#messageOutput")[0].outerHTML, но это не сработало, и результат остается [object Object] после того, как пользователи удалили его ввод. Перед первым вводом в поле формы span пусто.

var cityName = 'London';
console.log(cityName);
var messageVar = $('#messageInput').bind('input keyup', function() {
  if (messageVar.val().length == 0) {
    $('#messageOutput').text(cityName);
    console.log(cityName);
  } else {
    $('#messageOutput').text(this.value);
    cityName = messageVar;
    console.log(cityName);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="messageInput" />
<span id="messageOutput"></span>

Answer 1

[object Object] происходит от cityName = messageVar;

В предыдущих строках вы использовали messageVar.val() для получения значения, но в этой строке вы присваиваете весь объект jQuery, а не его значение, cityName.

Когда вы пытаетесь структурировать объект, вы получаете "[object Object]" в качестве вывода.

Что касается начальной загрузки страницы, вы можете вызвать одно из событий, чтобы обработчик событий установил текст.

Ниже приведена более простая версия, которая также запускает начальное событие. Также обратите внимание, что bind() не рекомендуется использовать on()

var cityName, originalCity = 'London';

$('#messageInput').on('input keyup', function() {
  const val = this.value.trim();
  // use input value if it has length or use the original
  cityName = !!val.length ? val : originalCity;
  
  $('#messageOutput').text(cityName);
  
  console.clear()
  console.log(cityName);

}).trigger('input')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="messageInput" />
<span id="messageOutput"></span>