Почему происходит считывание строковой переменной и не переводит в тип Number?

Question

Есть функция перевода градусов цельсия в градусы Кельвина

function CelsToKelv() { //Получаем значение Цельсия в Кельвины
  var temp  = document.getElementById("Temp").value; //получаем значение переменной из текстового элемента Temp и записываем в Temp
  var numTemp = Number(temp); //Приводим тип строковой переменной в числовую
  let celstoKelv = numTemp + 273.15 + " K";
  document.getElementById("outputTemp").innerHTML = celstoKelv;
}

Я считываю переменную из поля Number, но если я хочу сократить код и написать глобальную переменную для этого (То есть получить значение Temp, то при нажатии на кнопку ничего не происходит). На кнопке событие onClick вызов этой и других функций.

Answer 1

при нажатии на кнопку ничего не происходит

Так как проблема вопроса, какой бы она ни была, может быть вызвана использованием морально устаревших подходов эпохи ~~динозавров~~ Netscape (в частности, DOM-атрибута onclick вместо слушателя события click) - в образовательных целях показываю, как мы работаем с событиями в XXI веке:

const form = document.forms[0],
      focusHandler = evt => void(form.dataset.source = evt.target.name);
for (const inp of form.querySelectorAll('form .field'))
  inp.addEventListener('focus', focusHandler);  // делегировать обработку `focus` форме не получится, т.к. это событие не всплывает, увы

form.addEventListener('submit', evt => {
  evt.preventDefault();
  const source = evt.target.dataset.source,
        srcInp = form[source];
  if (!srcInp) return;
  switch (source) {
    case 'celsius': form.kelvin.value = (+srcInp.value + 273.15).toFixed(2); break;
    case 'kelvin': form.celsius.value = (+srcInp.value - 273.15).toFixed(2);
  }
});

form button { margin: 0 0.5rem; }
form button::before { content: '⏳'; }
form[data-source="celsius"] button::before { content: '►'; }
form[data-source="kelvin"] button::before { content: '◄'; }

<form>
  <input name="celsius" class="field" type="number" placeholder="°C" autocomplete="off">
  <button></button>
  <input name="kelvin" class="field" type="number" placeholder="°K" autocomplete="off">
</form>

// Лучше было бы слушать событие input (считая результат "на лету"), но раз предполагается кнопка с обработкой кликов по ней, в примере эта кнопка реализована. Правда, вместо click, событие используется другое, submit - т.к. использование form значительно упрощает работу с input'ами (возможен доступ к ним как к свойствам объекта формы)... да и вообще логичнее/семантичнее помещать поля ввода в форму ?

Если по коду что-то неясно, то отвечу на уточняющие вопросы в комментариях. Если же после редактирования вопроса выяснится что проблема была в другом, то буду признателен за комментарий об этом (чтобы удалить данный ответ).

БЛОГ НА HUSL

Почему происходит считывание строковой переменной и не переводит в тип Number?

Ответы (1 шт):