Question

我有一个带有卖家的＆＃39;便条的网站。选项已启用。由于无法编辑此字段，因此我尝试使用javascript向textarea添加自定义消息，并且我遇到了一些麻烦。 textarea没有id，只有name属性。

HTML code：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

在查看结帐页面（字段所在的位置）时，我立即在控制台中看到此错误：未捕获的TypeError：无法设置属性＆＃39; innerHTML＆＃39;未定义的，但如果我再次在控制台中输入代码，它就能完美运行。代码在关闭＆＃39; body之前执行。标记，所以textarea已经在代码启动时创建。我也尝试使用window.onload运行代码，但我仍然得到相同的错误。

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

任何可能导致这种情况的想法？感谢所有帮助！

Answer 1

您的问题是textarea在您点击＆＃34; checkout＆＃34;之前不会生成结帐页面上的按钮。

你的JS在生成元素之前就已经运行了，因此它在运行时无法找到它。

您的页面加载，没有textarea存在
当您尝试选择undefined

textarea

用户点击＆＃34;结帐＆＃34;
textarea已创建。

您应该在创建textarea后运行JS代码。一种方法是在checkout按钮单击时添加一个处理程序，该处理程序应在当前处理程序创建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 site）

1 个答案: