JavaScript .innerHTML僅在手動調用時纔可以工作

我有一個非常簡單的函數，用於替換元素的innerHTML。我一直試圖調試這個小時，但根本不能，而且真的很令人生氣。JavaScript .innerHTML僅在手動調用時纔可以工作

當從一個按鈕調用按下JavaScript（如下）時效果很好，但從另一個函數調用時不起作用。我完全失去了，爲什麼這可能是和它的我的應用程序

// This loaded function in my actual code is a document listener 
    // checking for when Cordova is loaded which then calls the loaded function 
    loaded(); 

    function loaded() { 
alert("loaded"); 
changeText(); 
    } 

    function changeText() { 
    alert("started"); 
    document.getElementById('boldStuff').innerHTML = 'Fred Flinstone'; 
    }

按下按鈕和HTML的一個相當核心部分，以取代

<div id="main"> 
    <input type='button' onclick='changeText()' value='Change Text'/> 
    <p>Change this text >> <b id='boldStuff'> THIS TEXT</b> </p> 
</div>

也正是在這裏完全上JSFiddle

來源

2013-01-10 tim.baker

'未捕獲的TypeError：無法設置屬性'innerHTML'爲null。看起來好像你的代碼在加載的時候被執行，你馬上執行它。請閱讀[爲什麼jQuery或像getElementByID這樣的DOM方法找不到元素？]（http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such- AS-的getElementById而不是找到的最元素）。 –

我看到在Chrome控制檯中，但我無法理解它爲什麼這樣做。它正在執行警報？儘管謝謝，但我會詳細閱讀。 –

因爲在JS執行之前，您不等待DOM準備就緒，並且您的JS所引用的HTML節點在ony運行之後呈現ony，因此第一次，DOM中尚不存在元素。這就是爲什麼參考錯誤。您可以將您的腳本放在希望從腳本引用的HTML之後，或者您可以使用window.onload或jQuery等腳本來等待，直到DOM解析所有HTML元素。 – marekful

前

您已通過調用onLoad上的功能loaded();更改了innerHTML。把它放在一個空文件中，與.html相同，然後用瀏覽器打開並嘗試。我已評論功能loaded();。現在它會在onclick中更改。

<div id="main"> 
    <input type='button' onclick='changeText();' value='Change Text'/> 
    <p>Change this text >> <b id='boldStuff'> THIS TEXT</b> </p> 
</div> 

<script> 

    //loaded(); 

    function loaded() { 
    alert("loaded"); 
    changeText(); 
    } 

    function changeText() { 
    alert("started"); 
    document.getElementById('boldStuff').innerHTML = 'Fred Flinstone'; 
    } 

</script>

來源

2013-01-10 11:19:08 Sahal

這裏的問題是，當您調用changeText()函數時，您嘗試操作的元素尚不存在。

爲了確保頁面加載完成後的代碼只執行（和所有的元素都在的地方），你可以使用onload處理body元素這樣的：

<body onload="loaded();">

另外，你應該知道，通過使用innerHTML屬性來操縱值是非常糟糕的做法。正確的方法是使用DOM操作，也許this可以幫助你。

來源

2013-01-10 11:13:23 s1lence

我會說設置純文本內容是'.innerHTML'完全有效的用例（至少直到每個瀏覽器支持'。textContent'）。 –

我的確同意，這不是我想要做的方式，但它是針對一個跨平臺的移動應用程序，具有非常特定的假設，因此僅限於我的選擇。我曾試過onload =「」選項，但無濟於事，會再試一次 –

您腳本加載之前的元素（boldStuff）加載，

Test Link - 1 - 將js在一個單獨的文件

Test Link - 2 - 把js在最後，關閉<body>

來源

2013-01-10 11:14:24

JavaScript .innerHTML僅在手動調用時纔可以工作

回答

相關問題