Question

页面应输出并执行温度转换器......

然而，虽然我想测试我的程序，但我仍然遇到这个空白页面类型错误... 有人可以读这个，因为我不知道我错过了什么。

"use strict";
var $ = function(id) { return document.getElementById(id); };


var convertTemp = function(){
    var f;
    var c;
    if($("to_Celsius").checked){
        f = parseFloat($("degrees_entered").value);
        if(isNaN(f)){
            alert("please type in a value ");
        }
        else{
            c = (f-32) * 5/9;
            $("degrees_computed").value = c.toFixed(0);
        }
    }
    else{
        c = parseFloat($("degrees_entered").value);
        if(isNaN(c)){
            alert("you must enter a valid number for degrees.");
        }
        else{
            f = c * 9/5 + 32;
            $("degrees_computed").value = f.toFixed(0);
        }
    }
};

var toFahrenheit = function(){
    $("degree_label_1").firstChild.nodeValue = "Enter C degrees:";
    $("degree_label_2").firstChild.nodeValue = "Degrees F";
    clearTextBoxes();
    $("degrees_entered").focus();
};

var toCelsius = function(){
    $("degree_label_1").firstChild.nodeValue = "Enter F degrees: ";
    $("degree_label_2").firstChild.nodeValue = "Degrees C: ";
    clearTextBoxes();
    $("degrees_entered").focus();
};

var clearTextBoxes = function(){
    $("degrees_entered").value = "";
    $("degrees_computed").value = "";
};

window.onload = function(){
    $("convert").onclick = convertTemp;
    $("to_Celsius").onclick != toCelsius;
    $("to_Fahrenheit").onclick = toFahrenheit;
    $("degrees_entered").focus();
};

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 450px;
    border: 3px solid blue;
}
h1 {
	color: blue;
	margin: 0 0 .5em;
}
main {
    padding: 1em 2em;
}
label {
	float: left;
    width: 10em;
	margin-right: 1em;
    
}
input {
    margin-bottom: .5em;
}
#convert {
	width: 10em;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Convert Temperatures</title>
   	<link rel="stylesheet" href="styles.css">
    <script src="convert_temp.js"></script>
</head>
    <body>
        <main>
            <h1>Convert temperatures</h1>    
            <input type="radio" name="conversion_type" id="to_celsius" checked>Fahrenheit to Celsius<br>
            <input type="radio" name="conversion_type" id="to_fahrenheit">Celsius to Fahrenheit<br><br>
            <label id="degree_label_1">Enter F degrees:</label>
            <input type="text" id="degrees_entered" ><br>
            <label id="degree_label_2">Degrees Celsius:</label>
            <input type="text" id="degrees_computed" disabled><br>
            <label>&nbsp;</label>
            <input type="button" id="convert" value="Convert" /><br>   
        </main>
    </body>
    
</html>

Answer 1

toCelcius！= toCelsius？

是吗？一个愚蠢的错字？其余的看起来很好......还看着外壳。在你的JS中你有to_Celsius ...但是在html ... to_celcius ...确定的坏习惯

Answer 2

我验证了一些问题：

if($("to_Celsius").checked){

引用了to_Celsius id，但它应该是to_celsius（小写）;

：

$("to_Celsius").onclick = toCelsius;
$("to_Fahrenheit").onclick = toFahrenheit;

同样的事情。将id替换为to_celsius和to_fahrenheit。

在此行var toCelcius = function(){中，该函数名为toCelcius。只需将其重命名为toCelsius（使用 s ）。

事件处理程序，破页

2 个答案:

工作代码：https://jsfiddle.net/mrlew/p8w111ms/