为什么我收到一个错误 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null at renderHTML答案

【问题标题】：Why am i getting an error Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null at renderHTML为什么我收到一个错误 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null at renderHTML
【发布时间】：2018-03-27 00:06:15
【问题描述】：

如何让我的信息呈现而不显示错误？我正在关注一个视频，并且我还遇到了一些其他控制台错误，这些错误可能会也可能不会影响它。

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

$( document ).ready(function() {

    var bitcoin = new XMLHttpRequest();
    bitcoin.open('GET', "https://api.coindesk.com/v1/bpi/currentprice.json");
    bitcoin.onload = function() {
        // console.log(bitcoin.responseText);
        var bitdata = JSON.parse(bitcoin.responseText);
        // console.log(bitdata.bpi.USD.rate);
        renderHTML(bitdata.bpi.USD.rate);
    };
    bitcoin.send();

});

function renderHTML(data) {
    bitprice.insertAdjacentHTML('beforeend',"test")
}

<!DOCTYPE html>
<html>
<head>
  <title>Bitview</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %> (Inside the yield is as follows <div id="bitprice"></div>)
 <script type="text/javascript" src="app/assets/javascripts/js.js"></script>
</body>

</html>

【问题讨论】：

为什么var bitprice 在使用它的函数之外？尝试在函数内部定义它，它应该可以工作。注意：这不是 rails 错误，而是 javascript :) （注意：如果这解决了您的问题，我会将其转换为接受的答案，但让我们先试试看）
你太棒了它的工作原理。我正在学习谢谢！！！

标签： ruby-on-rails json ajax rendering

【解决方案1】：

为什么var bitprice 在使用它的函数之外？尝试在函数中定义它，它应该可以工作。

有一个东西叫做“范围”。 javascript 的工作方式 - 由于作用域的工作方式，函数外部的某些内容可能在函数内部不可见。值得在谷歌上搜索一两篇好文章。

【讨论】：

您确定这是范围问题而不是时间问题吗？当getElementById 执行时可能没有#bitprice，但在加载所有内容时会有（例如jsfiddle.net/ambiguous/bbbL9xnh/3）。将bitprice 定义移动到renderHTML 在任何一种情况下都是正确的。