javascript - 事件处理程序,损坏的页面

标签 javascript jquery css html

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

但是, 当我想测试我的程序时,我一直遇到这个空白页类型错误...... 有人可以读一下这个证明吗,因为我不知道我错过了什么。

"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>

最佳答案

toCelcius != toCelsius ?

是吗?一个愚蠢的错字?其余的看起来不错……还有 watch 外壳。在您的 JS 中,您有 to_Celsius...但是在 html 中...to_celcius...肯定是个坏习惯

关于javascript - 事件处理程序,损坏的页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42127724/

相关文章:

jquery - 使跨域 iframe 与拖动事件交互

javascript - 循环计时器sgv html js css,当变大时,线条与大小不匹配

HTML 图像扩展更远并阻止链接

javascript - 在传单中单击标记时不生成 map 单击事件

javascript - 检查通知是否已被检查

php - 如何在 yii2 中动态加载内容中加载小部件?

html - 在 Shiny R 中,如何在 Logo 前面而不是在其下方显示标题

javascript - 如何使用 jQuery 代码解决此 setCustomValidity 解除绑定(bind)问题

javascript - $setValidity 函数未按预期工作

javascript - 将 UL 拆分为两列,但不要破坏嵌套的 UL