Question

我需要使用表格制作温度转换器，它必须具有确定按钮以显示信息，并具有清除按钮以清除所有信息。

这是我尝试做的，但是给了我NaN

function temperatureConverter(valNum) {
    
  valNum = parseFloat(valNum);
    
  document.getElementById("outputCelcius").innerHTML=(valNum-32)/1.8;
    
}

<h2>Temperature Converter</h2>

Ok now my issue is that I need everything cleared even the Celsius data but I can't find a way for it to work        
<p>Type a value in the Fahrenheit field to convert te value to Celsius:</p>
    
<p>
    
  <label>Fahrenheit</label>

  <input id="inputFahrenheit" type="text" placeholder="Fahrenheit">

  <input id= "button1" type= "button" value= "OK"  onclick="temperatureConverter(this.value)">

  <input id= "reset1" type= "reset" value= "Clear" onclick="temperatureConverter">
    
</p>
    
<p>Celcius: <span id="outputCelcius"></span></p>

Answer 1

您的代码无法正常工作，因为您在#button1中写道：

onclick="temperatureConverter(this.value)"

其中this不是#inputFahrenheit而是#button1。因此this.value实际上等于"OK"。

要解决您的问题，您需要更改temperatureConverter函数以获取#inputFahrenheit的值，而不要使用onclick="temperatureConverter(this.value)"。

#reset1中发生类似的情况，因此您的重置输入将无法正常工作。您需要在重置函数中应用相同的概念，我建议创建一个专门用于该函数的新函数。

通常，不建议使用相同的功能来执行完全不同的操作。

function temperatureConverter(){
  var input = document.getElementById('inputFahrenheit');
  var value = input.value;
  value = parseFloat(value);
  
  var output = document.getElementById('outputCelcius');
  output.innerHTML = (value - 32)/1.8;
}

function resetTemperature(){

  /* clear the temperature */
  console.log('clear');

}

<h2>Temperature Converter</h2>
    
<p>Type a value in the Fahrenheit field to convert te value to Celsius:</p>
    
<p>
    
  <label>Fahrenheit</label>

  <input id="inputFahrenheit" type="text" placeholder="Fahrenheit">

  <input id= "button1" type= "button" value= "OK"  onclick="temperatureConverter()">

  <input id= "reset1" type= "reset" value= "Clear" onclick="resetTemperature()">

</p>
    
<p>Celcius: <span id="outputCelcius"></span></p>

Answer 2

这是使代码正常工作所需的基本知识。基本上，只是更改传递给temperatureConverter函数的值。在传递它之前，单击的按钮的值，而不是您尝试读取的输入元素的值。另外，我不确定这是因为我没有查找它，但是在我将您的项目放在<form>元素内之前，reset元素对我来说没有用。

function temperatureConverter(valNum) {
    
  valNum = parseFloat(valNum);
    
  document.getElementById("outputCelcius").innerHTML=(valNum-32)/1.8;
    
}

<h2>Temperature Converter</h2>
    
<p>Type a value in the Fahrenheit field to convert te value to Celsius:</p>
<form>    
<p>
    
  <label>Fahrenheit</label>

  <input id="inputFahrenheit" type="text" placeholder="Fahrenheit">

  <input id= "button1" type= "button" value= "OK"  onclick="temperatureConverter(document.querySelector('#inputFahrenheit').value)">

  <input id= "reset1" type= "reset" value= "Clear">
    
</p>
</form>
    
<p>Celcius: <span id="outputCelcius"></span></p>

请注意，大多数情况下，人们不喜欢将事件监听器放在on[event]属性中，许多开发人员更喜欢您执行以下操作：

// () => {} is something called Arrow function notation, if you didn't know it already.
document.addEventListener('DOMContentLoaded', () => {
  function updateOutput(value) {
    // make sure you do some checking to avoid XSS attacks.
    document.querySelector('#output').innerHTML = value;
  }
  // keeps the form from submitting since we don't have an actual form handler and this is all front-end
  document.querySelector('#converterForm').addEventListener('submit',(e)=>{
    e.preventDefault();
  });
  document.querySelector('#convert').addEventListener('click', () => {
    updateOutput(convertToCelsius(document.querySelector('#fahrenheit').value));
  });
});

function convertToCelsius(f) {
  if(typeof f == 'string') f = parseFloat(f, 10);
  if(isNaN(f)) {
    throw new Error('Invalid parameter passed to function convertToCelsius');
  }
  return (f-32) * 5 / 9; 
}

<form id="converterForm" action="/">
  <input type="number" id="fahrenheit" placeholder="Fahrenheit value">
  <input type="button" id="convert" value="Convert to Celsius">
  <input type="reset" value="Clear">
  <div id="output">
  </div>
</form>

除此之外，检查功能为何不起作用的一种好方法是在代码中使用console.log，然后检查Javascript浏览器（在Chrome中，您可以通过点击{{1}来访问它） }，在Firefox中，我相信它是ctrl+shift+j）。

Answer 3

看不到您使用任何形式。

您的功能

if (dateDay === today.getDate() && currentYear === today.getFullYear() && currentMonth === today.getMonth()) {
  children.push(<Table.Cell key={j} id={dateDay} className="box green">{dateDay}</Table.Cell>)
  } else{
  children.push(<Table.Cell key={j} id={dateDay} className="box">{dateDay}</Table.Cell>)

然后

function temperatureConverter(valNum) {        
  valNum = parseFloat(valNum);

  document.getElementById("outputCelcius").innerHTML=(valNum-32)/1.8;

}

显然，如果您控制该值，则显然是将“ OK”作为参数发送给NAN函数（而不是输入字段的值）。

温度转换器给我NaN

3 个答案: