-1

我有一个启用了“给卖家的说明”选项的 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>

查看结帐页面（该字段所在的位置）时，我立即在控制台中看到此错误：Uncaught TypeError: Cannot set property 'innerHTML' of undefined，但如果我再次在控制台中输入代码，它会完美运行。代码在关闭“body”标签之前执行，因此在代码启动时已经创建了 textarea。我也尝试使用 window.onload 运行代码，但我仍然遇到相同的错误。

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

有什么想法可能导致这种情况吗？感谢所有帮助！

4

1 回答 1

0

您的问题是在textarea您点击结帐页面上的“结帐”按钮之前不会生成。

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

  1. 您的页面加载，没有textarea礼物
  2. 您的 JS 在undefined尝试选择textarea
  3. 用户点击“结帐”
  4. textarea被建造。

您应该在创建后运行 JS 代码textarea。一种方法是向结帐按钮单击添加一个处理程序，该处理程序应在当前处理程序创建textarea.

如果您只是将 JS 用于占位符文本，请考虑在textarea.

编辑：

作为一个严厉的解决方案，您可以使用

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

它将在 DOM 更改时执行，直到它看到textarea 它删除侦听器并执行您的代码。

于 2015-10-14T23:39:00.387 回答