使用 javascript 设置 textarea innerhtml 会导致未定义的错误（weebly 站点）

Question

我有一个启用了 'note to seller' 选项的 weebly 站点。无法编辑此字段，因此我尝试使用 javascript 将自定义消息添加到文本区域，但我运行遇到了一些麻烦。 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>

查看结帐页面（字段所在的位置）时，我立即在控制台中看到此错误：Uncaught TypeError: Cannot set 属性 'innerHTML' of undefined，但如果我再次在控制台中输入代码，它就可以正常工作。代码在结束 'body' 标记之前执行，因此在代码启动时文本区域已经创建。我也尝试运行代码 window.onload 但我仍然得到同样的错误。

我首先尝试使用 jQuery 但出于某种原因 Weebly 无法识别该函数，即使库已加载并且已经有其他函数使用 jQuery。

知道是什么原因造成的吗？感谢所有帮助！

Answer 1

您的问题是 textarea 在您点击结帐页面上的 "checkout" 按钮后才会生成。

你的 JS 在元素生成之前是运行ning，所以它在运行ning 时找不到它。

您的页面已加载，但没有 textarea
你的 JS 运行s 并在它尝试 select textarea

undefined

用户点击"checkout"
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，此时它会删除侦听器并执行您的代码。

使用 javascript 设置 textarea innerhtml 会导致未定义的错误（weebly 站点）

Setting textarea innerhtml with javascript results in undefined error (weebly site)

javascript

weebly