使用javascript設置textarea innerhtml導致未定義的錯誤（weebly站點）

Question

我有一個weebly站點，啓用了'給賣家的備註'選項。沒有辦法編輯這個字段，所以我試圖用javascript添加一個自定義的消息到textarea，我遇到了一些麻煩。 textarea沒有id，只有一個name屬性。

HTML代碼：

document.getElementsByName("order_notes")[0].innerHTML="PUT YOUR PERSONALIZED MESSAGE HERE"; 
 
var standard_message = document.getElementsByName("order_notes")[0].innerHTML; 
 
var x = document.getElementsByName("order_notes")[0]; 
 

 
x.addEventListener("focus", myFocusFunction, true); 
 
x.addEventListener("blur", myBlurFunction, true); 
 

 
function myFocusFunction() { 
 
    if (document.getElementsByName("order_notes")[0].innerHTML == standard_message) 
 
     document.getElementsByName("order_notes")[0].innerHTML=""; 
 
} 
 

 
function myBlurFunction() { 
 
    if (document.getElementsByName("order_notes")[0].innerHTML == "") 
 
     document.getElementsByName("order_notes")[0].innerHTML=standard_message; 
 
}

<div id="wsite-com-checkout-notes"> 
 
    <form> 
 
    <h2 class="wsite-panel-title">Note to Seller (Optional)</h2> 
 
    <div class="wsite-form-field"> 
 
     <div class="wsite-form-input-container"> 
 
     <textarea class="wsite-form-input wsite-input" name="order_notes"></textarea> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

當查看結帳頁面（其中場），我立刻看到這個錯誤在控制檯：遺漏的類型錯誤：無法設置屬性「的innerHTML '的未定義，但如果我再次在控制檯中鍵入代碼，它可以很好地工作。代碼在關閉「body」標籤之前執行，所以textarea已經在代碼開始運行時創建了。我也試着用window.onload運行代碼，但是我仍然得到相同的錯誤。

我嘗試使用jQuery第一，但由於某種原因Weebly不會識別該函數，即使該庫已加載，並且還有其他函數已經使用jQuery。

任何想法可能導致這種情況？所有幫助表示讚賞！

Answer 1

您的問題是，textarea不會生成，直到您點擊結帳頁面上的「結賬」按鈕。

您的JS正在生成元素之前運行，因此它在運行時找不到它。

1. 你的頁面加載，沒有textarea目前
2. 你的JS運行，並得到undefined當它試圖選擇textarea
3. 用戶點擊 「結算」 創建
4. textarea。

在創建textarea之後，您應該運行JS代碼。一種方法是在當前處理程序創建textarea之後，將結果按鈕添加到應該運行的處理程序。

如果您只是使用JS代替佔位符文本，請考慮在textarea上使用placeholder attribute。

編輯：

作爲一個嚴厲的解決方案，你可以使用

document.body.addEventListener("DOMSubtreeModified", function handler(){ 
    var e = document.querySelector('[name=...]'); 
    if (e) { 
    ...removeEventListener("DOMSubtreeModified", handler); 
    e.value = "..."; 
    } 
}, false);` 

將執行隨時隨地的DOM被改變，直到它看到textarea此時它移除偵聽器和執行你的代碼。