摄氏温度和华氏温度转换器-JavaScript

我想做一个网页，有两个文本框，一个摄氏和华氏框。在它们之间，有一个转换按钮，可以将摄氏度转换为华氏度，将华氏度转换为摄氏度。如果其中任何一个框中都有字母，我想取消转换，弹出一个警告，说“请只输入数字！”到目前为止，我还不知道如何获得警告，当我在“摄氏度”框中键入数字时，它总是在同一个框中显示数字-18。华氏温度很好

HTML:

注意：我从W3Schools获得了一些代码，所以我认为onkeyup转换有点有趣。如果可能，请通知我它必须如何更改以及JavaScript。

我个人不喜欢“执行”按钮，因此我会选择更具动态性的解决方案：

//获取输入元素：
var$f=document.getElementById（“f”）；
var$c=document.getElementById（“c”）；
函数FC_CF（）{
var temp；//将保存温度值
var$targ；//用于针对我们未键入的元素：
如果（this.id==“c”）{//如果我们在#c中键入。。。
$targ=$f；//使用#f作为目标元素
temp=（this.value*9/5）+32；//C2F
}否则{
$targ=$c；
温度=（this.value-32）*5/9；//F2C
}
//在另一个（$targ）字段中写入结果“我们键入时”：
$targ.value=！isNaN（temp）？parseFloat（temp.toFixed（1））：“Err”；
//（上图：）temp是一个数值？返回浮点数，否则：“显示一些错误”
}
//分配输入侦听器以触发上述函数：
$f.oninput=FC\u CF；
$c.oninput=FC\u CF
塞尔修斯：
华氏：

不需要使用

onkeyup

属性，因为它们来自原始代码，用于在输入值时立即更新值

我确实修改了功能以清除原始值，这样转换按钮就可以用简单的代码实现两种方式

下面是一个快速的JavaScript来完成这项工作：

function convertTemp() {
 // Set the initial variables for c (Celsius) and f (Fahrenheit)
 var c = document.getElementById('c'), f = document.getElementById('f');
 // Test if there is a value for Celsius
 if(c.value != '') {
  // Set the value for Fahrenheit
  f.value = Math.round(c.value * 9 / 5 + 32);
  // Clear the value for Celsius
  c.value = '';
 // If there isn't a value for Celsius
 } else  {
  // Set the value for Celsius
  c.value = Math.round((f.value - 32) * 5 / 9);
  // Clear the value for Fahrenheit
  f.value = '';
 }
}

及其附带的HTML：

Celcius:<input id="c">&nbsp;&nbsp;&nbsp;
Fahrenheit:<input id="f">&nbsp;&nbsp;&nbsp;
<button type="button" id="convert" onclick="convertTemp()">Convert</button>

塞尔修斯： 华氏温度： 转换 可在以下位置进行测试：

---

关于简单代码，需要记住一些事情，例如，没有任何东西可以验证提供的值是可接受的。一个小正则表达式可以作为验证，但它的实现方式取决于您想如何标记问题。

您可以按如下方式分离进行温度转换的函数我在代码中做了一些更改

       <p>
    <label>Fahrenheit</label>
  <input id="outputFahrenheit" type="number" placeholder="Fahrenheit"
  oninput="temperatureConverterCelsius(this.value)"
  onchange="temperatureConverterCelsius(this.value)" value="">
</p>
<p>Celsius: </p>

<input id="outputCelsius" type="number" placeholder="Celsius" 
   oninput="temperatureConverterFahrenheit(this.value)" 
    onchange="temperatureConverterFahrenheit(this.value)" value="">
    </p>


    <script type=""text/javascript>
    function temperatureConverterCelsius(valNum) {
    valNum = parseFloat(valNum);
    document.getElementById("outputCelsius").value = (valNum-32) / 1.8;
    //document.getElementById("outputFahrenheit").value = (valNum*1.8)+32;

}
    </script>


  </body>
</html>

华氏的

摄氏度：


函数temperatureConverterCelsius（valNum）{
valNum=parseFloat（valNum）；
document.getElementById（“outputCelsius”）.value=（valNum-32）/1.8；
//document.getElementById（“outputFahrenheit”）.value=（valNum*1.8）+32；
}

课堂温度\u对话{
构造函数（摄氏度）{
这.摄氏度=摄氏度；
这个。华氏温度=0；
表_begin=-50.0；
此。表_end=50.0；
表_步骤=10.0；
console.log（'--------------转换--------------------）；
console.log（‘摄氏温度’）；
对于（this.celsius=this.table_begin；this.celsius从HTML输入中获得的值是type
string
，因此您正在使用字符串进行数学运算，这只是一个提示。此外，您应该查看如何从HTML中提取事件处理。使用它是一种不好的做法。@SterlingArcher-因为JavaScript是一种弱类型语言，所以没有问题用字符串进行数学运算（除了
+
）。@Derek朕會功夫 不要吹毛求疵，但鉴于+是一个非常标准的数学运算符，数学和字符串确实可能会有问题？我觉得进行类型转换更安全，这样您就不会有串接数字或
NaN
results的风险。如果您单击
convert
，您可以不带参数地调用函数。它会自动进入
else
部分。如果右框为空，则表示为0，因此
（0-32）*5/9
是
-17.777777
@SterlingArcher-当然，字符串在使用之前应该总是经过解析和防愚处理。但是，由于OP的代码中只有
*
和
-
操作，我认为忽略所有麻烦的解析和防愚部分没有任何问题，至少对于初学者来说是这样从OP提出的问题中，我们可以清楚地看到他正处于学习阶段。解释这段代码将是一个好主意……只是说！@Karl AndréGagnon我同意……我只是需要更多的时间来写这一切……对我要有耐心；）通常，坚持自由（或缺乏自由）可能更好OP使用的是.Native JS，在这里比jQuery答案更好（数学上的开销太大了）。我同意Sterling Archer的观点，jQuery可能太多了。我提供了一个JavaScript解决方案，初学者应该更容易理解。
Celcius:<input id="c">&nbsp;&nbsp;&nbsp;
Fahrenheit:<input id="f">&nbsp;&nbsp;&nbsp;
<button type="button" id="convert" onclick="convertTemp()">Convert</button>

       <p>
    <label>Fahrenheit</label>
  <input id="outputFahrenheit" type="number" placeholder="Fahrenheit"
  oninput="temperatureConverterCelsius(this.value)"
  onchange="temperatureConverterCelsius(this.value)" value="">
</p>
<p>Celsius: </p>

<input id="outputCelsius" type="number" placeholder="Celsius" 
   oninput="temperatureConverterFahrenheit(this.value)" 
    onchange="temperatureConverterFahrenheit(this.value)" value="">
    </p>


    <script type=""text/javascript>
    function temperatureConverterCelsius(valNum) {
    valNum = parseFloat(valNum);
    document.getElementById("outputCelsius").value = (valNum-32) / 1.8;
    //document.getElementById("outputFahrenheit").value = (valNum*1.8)+32;

}
    </script>


  </body>
</html>

class Temperature_conversation {

    constructor(celsius) {

        this.celsius= celsius;
        this.fahrenheit= 0;
        this.table_begin= -50.0;
        this.table_end= 50.0;
        this.table_step= 10.0;
        console.log('---------------------Conversion--------------------------');
        console.log('Celsius fahrenheit');
        for(this.celsius = this.table_begin; this.celsius <= this.table_end; this.celsius += this.table_step){
            this.fahrenheit = this.celsiusToFahrenhit(celsius);
        }


    }
    celsiusToFahrenhit(c){
        const minimun_celsius = -273.15;
        if (c < minimun_celsius) {
            throw 'O argumento es pequeno';

        }
         this.celsius = (9.0 / 5.0) * c+ 32;

        var res = [this.celsius, this.fahrenheit]
        console.table(res);
    }
}