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

Question

I have a weebly site with the 'note to seller' option enabled. There's no way to edit this field, so I'm trying to add a custom message to the textarea with javascript and I'm running into a bit of trouble. The textarea has no id, only a name attribute.

HTML code:

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>

When viewing the checkout page (where the field is), I immediately see this error in the console: Uncaught TypeError: Cannot set property 'innerHTML' of undefined, but if I type in the code in the console again it works perfectly. The code is executed right before the closing 'body' tag, so the textarea is already created by the time the code kicks in. I also tried running the code with window.onload but I still get the same error.

I tried using jQuery first but for some reason Weebly won't recognize the function, even though the library is loaded and there are other functions using jQuery already.

Any ideas what could be causing this? All help is appreciated!

Answer 1

Your problem is that the textarea isn't generated until you hit the "checkout" button on the checkout page.

Your JS is running before the element is generated so it can't find it when it's running.

1. Your page loads, without the textarea present
2. Your JS runs and gets undefined when it tries to select the textarea
3. User hits "checkout"
4. textarea is created.

You should run the JS code after the textarea is created. One way to do that would be to add a handler to the checkout button click which should run after the current handler creates the textarea.

If you're just using the JS for placeholder text, consider using the placeholder attribute on your textarea.

EDIT:

As a heavy-handed solution, you could use

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

which will execute anytime the DOM is changed until it sees the textarea at which point it removes the listener and executes your code.