Question

我不断收到“未捕获类型错误：无法读取 null 的属性‘值’”的响应，但不知道为什么

2015-08-06

109

javascript null typeerror

我意识到我可能忽略了一些显而易见的东西，但到目前为止我似乎找不到它。我需要第二双眼睛。

<!DOCTYPE html>
<html>
    <head>
    <script type="text/javascript">
        var t;
        t=document.getElementById('temperture');
        var v;
        v=document.getElementById('speed');
        var h;
        h=document.getElementById('hum');
        function dpOnClick(){
          if (h.value < 50){
            alert('There is no dew point below 50% humidity');}
          else{
            document.getElementById('outputBox').innerHTML='The dew point would be '+  t.value - ((100 - (h.value)/100)/2.778);}

    return false;
    }

</script>
    <title> Weather Indexes </title>
</head>
<body>
    <h2>Weather Indexes</h2>
    <p> Enter degees in fahrenheit and select calculation.</p>
    <p> Degrees: <input type="number" id="temperture" size=12 value=''> °F </p>
    <p> Wind Speed: <input type="number" id="speed" size=12 value='' > mph </p>
    <p> Relative Humidity: <input type="number" id="hum" size=12 value='' ></p>

    <input type="button" value="Dew Point" onclick="dpOnClick();">

    <hr> <div id="outputBox"></div> </hr>
  </body>

</html>

Answer 1

将脚本放在 body 标签的末尾..

或者将以下行：

    t=document.getElementById('temperture');
    v=document.getElementById('speed');
    h=document.getElementById('hum');

放入 window.onload 中。

发生这种情况是因为您的 DOM 在被 javascript 获取时尚未创建，这就是它返回 null 或 undefined 的原因。

编辑

它的 window.load 不是 document.window.load，抱歉打错了。

检查这个小提琴以了解我的意思： https://jsfiddle.net/k3moqkkt/1/

同样，如果您的脚本保留在标题标签中会更好。

Answer 2

要修复 Uncaught TypeError ，您可以将脚本标记移到要获取的 html 元素后面，也可以将这些代码放入 body onload 事件中。
要修复数字格式错误，您可以通过 typeof 检查输入数据类型，并使用 parseInt / parseFloat 将输入值更改为数字。

<!DOCTYPE html>
<html>
<head>
<title> 天气指数 </title>
</head>
<body>
<h2>天气指数</h2>
<p> 输入华氏度并选择计算。</p>
<p>度数：<input type="number" id="temperture" size=12 value=''> °F </p>
<p> 风速：<input type="number" id="speed" size=12 value=''> mph </p>
<p> 相对湿度：<input type="number" id="hum" size=12 value=''></p>
<input type="button" value="露点" onclick="dpOnClick();">
<hr>
<div id="outputBox"></div>
</hr>
</body>
<script type="text/javascript">
var t;
t = document.getElementById('temperture');
var v;
v = document.getElementById('speed');
var h;
h = document.getElementById('hum');
function dpOnClick() {
if (h.value < 50) {
alert('没有低于 50% 湿度的露点');
}else {
document.getElementById('outputBox').innerHTML =
'露点将是 ' +
parseInt(t.value) - ((100 - parseInt(h.value) / 100) / 2.778);
}
return false;
}
</script>

</html>

Answer 3

您的问题是，您必须在单击按钮时读取值，而不是在其他时间。因此，请将此部分作为 dpOnClick 函数的一部分：

function dpOnClick(){
  var t = document.getElementById('temperture');
  var v = document.getElementById('speed');
  var h = document.getElementById('hum');

  if (h.value < 50) {
    alert('There is no dew point below 50% humidity');

  } else {
    document.getElementById('outputBox').innerHTML = 'The dew point would be ' + (t.value - (100 - h.value)/100/2.778);
  }
  return false;
}

此外，您必须将整个算术部分包含在括号中，否则字符串连接会在第一个 - 之后将结果变为 NaN。