的innerHTML不接受取回的變量

Question

我想要的例子從ipify獲取客戶端IP：

<script type="application/javascript"> 
    function getIP(json) { 
    document.write("My public IP address is: ", json.ip); 
    } 
</script> 

<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script> 

這工作得很好。

當我嘗試添加到我的文檔這一點，似乎沒什麼：

JS

<script type="application/javascript"> 
var s$ = function(e) {return document.getElementById(e);}; 

function getIP(json) { 
    s$('clientIP').innerHTML = json.ip; 
} 
</script> 

<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script> 

HTML

<div> 
    <p><label for="clientIP">clientIP</label><span id="clientIP"></span></p> 
</div> 

望着Chrome的控制檯，出現此錯誤：

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT 

不知道我理解爲什麼第一個方法工作，第二個沒有。

<div> 
 
    <p><label for="clientIP">clientIP</label><span id="clientIP"></span></p> 
 
</div> 
 
<script type="application/javascript"> 
 
    var s$ = function(e) { 
 
    return document.getElementById(e); 
 
    }; 
 

 
    function getIP(json) { 
 
    s$('clientIP').innerHTML = json.ip; 
 
    } 
 
</script> 
 

 
<script type="application/javascript" src="https://api.ipify.org?format=jsonp&callback=getIP"></script>

隱姓埋名運行，我得到了以下錯誤：

Uncaught TypeError: Cannot set property 'innerHTML' of null 
    at getIP (VM26:10) 
    at api.ipify.org/:1 

Full HTML

Answer 1

這是最喜歡的，因爲廣告攔截插件的發生（如廣告攔截加）。要測試此功能，請嘗試以隱身模式運行，或嘗試在其他瀏覽器中運行。

要永久解決它，你可以刪除廣告阻擋延伸。

我不能肯定的是，廣告攔截器是使用精確的算法，但一些在你的第二個片段觸發了廣告攔截「思考」，它需要阻止的內容。

關於第二個問題（cannot set property of null），這很可能是因爲您嘗試引用的元素（'clientIP'）尚未呈現。這就像jQuery這樣的東西非常方便，因爲你可以利用document.ready事件。這可確保您的代碼在 DOM已完成呈現後觸發。你現在的方式（在你的第二小節中），當你的代碼執行時，DOM不保證被渲染。沒有jQuery，你可以利用超時，但是，做這樣的事情：

<script type="application/javascript"> 
var s$ = function(e) {return document.getElementById(e);}; 

function getIP(json) { 
    setTimeout(function() { 
     s$('clientIP').innerHTML = json.ip; 
    }, 1000); 
} 
</script>