Question

我正在为学校做一个家庭作业包，我不知道如何解决这个错误：

未捕获的TypeError：无法读取属性＆＃39; addEventListener＆＃39;为null

这是一个简单的问题，我所要做的就是将celcius转换为华氏度。

HTML

<body>
    <h3>Enter the temperature in celcius</h3>
    <ul>
        <li>Temp in celcius<input type="text" id="celcius" />
    </ul>
    <div>
        <input type="button" value="convert" onclick="converter()"/>
    </div>
    <span id="conversion result"></span>

    <div id="tempConverter"></div>
    <span id="celciusT"></span>
    <script src="../js/JavaScript.js"></script>
</body>

的JavaScript

function converter() {
    var celcius = document.getElementById('celcius');
    var conversionResult = document.getElementById('conversionResult');

    conversionResult.textContent = celcius.value * 9 / 5 + 32;

}

Answer 1

它不起作用，因为您引用了一个不存在的ID。您的HTML元素在ID中包含非法空格：

<span id="conversion result"></span>

，而您的脚本使用camelCase来引用ID：

var conversionResult = document.getElementById('conversionResult');

我建议选择一个约定并坚持下去。我强烈建议不要使用camelCase作为ID（如果你愿意，可以将它用于JS）。连字符分隔的名称是最常见的约定，而以下划线分隔的名称也是一种有效的方法。

结帐：Google HTML/CSS Style Guide和BEM

在ID中使用空格只会导致麻烦。查看HTML 4.0 specification for basic types：

ID和NAME令牌必须以字母（[A-Za-z]）开头，后面可以跟任意数量的字母，数字（[0-9]），连字符（＆＃34; - ＆＃34 ;），下划线（＆＃34; _＆＃34;），冒号（＆＃34;：＆＃34;）和句号（＆＃34;。＆＃34;）。

StackOverflow问题：

摄氏转换

1 个答案: