数学函数返回 NaN 错误 (JavaScript)

Question

我正在尝试修复 NaN 错误。

当运行控制台上的代码给出正确答案时。但是，当我尝试在 HTML H1 标签上打印它时，代码 returns 出现 NaN 错误。

我尝试使用本机函数（即：parseFloat()、.toString();），但它没有按计划工作。

你能帮我点一盏灯吗？

const tempConvert = parseFloat (document.querySelector('input'));

function convertTemp(tempConvert) {
    switch (slt.value) {
        case 'farenheit':
            document.querySelector('h1').innerHTML = `${convertCToF(tempConvert)} Fº`;
            break;
        case 'kelvin':
            document.querySelector('h1').innerHTML = `${convertCToK(tempConvert)} Kº`;
            break;
        default:
            alert('Selec an option.');
            break;
    }
}


function convertCToF(tempC) {
    return tempC * 1.8 + 32;
}

function convertCToK(tempC) {
    return tempC + 273.15;
}

Answer 1

你必须得到 input.value，而不是 input。 document.querySelector('input') 将为您提供 input 的 HTML 元素。如果你 console.log 那，你会看到它有一堆属性，其中有 value，其中包含 input 标签内的文本。

此外，出于安全原因，通常使用 innerText 比使用 innerHTML 更好。

const slt = {
  value: 'farenheit'
}

function convertTemp(tempConvert) {
  console.log("Hello");
  switch (slt.value) {
    case 'farenheit':
      document.querySelector('h1').innerText = `${convertCToF(tempConvert)} Fº`;
      break;
    case 'kelvin':
      document.querySelector('h1').innerText = `${convertCToK(tempConvert)} Kº`;
      break;
    default:
      alert('Selec an option.');
      break;
  }
}

document.querySelector("#myBtn").addEventListener('click', () => convertTemp(document.querySelector('input').value));

function convertCToF(tempC) {
  return tempC * 1.8 + 32;
}

function convertCToK(tempC) {
  return tempC + 273.15;
}

<input type='text' />
<button id="myBtn">Convert</button>

<h1>Result Here</h1>

数学函数返回 NaN 错误 (JavaScript)

Mathematical Function Returning NaN Error (JavaScript)

javascript

nan