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!

You should use value on a text area not innerhtml. Not sure if that will solve your issue but that's the proper way to set its value is with the value property. — AtheistP3ace, Oct 14 '15 at 22:00
I tried with value first and had the same error, then I switched to innerhtml to see if it made a diffrence but it didn't. Thanks for the clarification anyway. — pzl-kleur, Oct 14 '15 at 22:07
Ok. Sorry. I would continue with value and trying to resolve this undefined issue. Not home right now or I would try to take a closer look. — AtheistP3ace, Oct 14 '15 at 22:08
Any chance that this is executing in a different frame? Does it still do that if you use `document.querySelector('[name=order_notes]')` in place of `getElementsByName`? — arcyqwerty, Oct 14 '15 at 22:12
Please [edit] your question to include a [mcve] reproducing the issue. The code you've included in your question is not complete enough to verify the issue. Make sure the code you include in your question is **Minimal** (only the code necessary to reproduce), **Complete** (all of the code necessary to reproduce) and **Verifiable** (we should be able to reproduce the problem using only the code in your question, nothing less and nothing more). As it is, your question is off-topic for Stack Overflow. — , Oct 14 '15 at 22:16
@arcyqwerty Yes it still shows the undefined error with querySelector — pzl-kleur, Oct 14 '15 at 22:31
@TinyGiant I added the html code where the textarea is located, if you try to recreate the error with these two pieces only it works, it's only when added to weebly that the error happens. — pzl-kleur, Oct 14 '15 at 22:34
@arcyqwerty [https://www.renyacreations.com] you'll need to go to the checkout page and you'll see the error on the console. I updated the code to the querySelector you mentioned earlier so now the error says: TypeError: document.querySelector(...) is null — pzl-kleur, Oct 14 '15 at 23:31
I don't see your HTML with the textarea on the checkout page which would explain why the selector can't find that element. — arcyqwerty, Oct 14 '15 at 23:36
If the issue is the text area not being there you could use event delegation to attach the events. — AtheistP3ace, Oct 15 '15 at 00:21

arcyqwerty · Accepted Answer · 2015-10-15T00:12:32.963

0

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.

Your page loads, without the textarea present
Your JS runs and gets undefined when it tries to select the textarea
User hits "checkout"
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.

edited Oct 15 '15 at 00:12

answered Oct 14 '15 at 23:39

arcyqwerty

10,325
4
47
84

I actually tried doing it this way, with the attached click function on the checkout button and had the same problem. I'm going to give it another try and see if it works, perhaps I missed something. – pzl-kleur Oct 14 '15 at 23:54
No luck, I added this line before the code starts: `document.getElementById("wsite-com-checkout-button").addEventListener("click", function(){` and it works on a jsfiddle test but not on weebly, now it shows "Uncaught TypeError: Cannot read property 'addEventListener' of null". I'm thinking this isn't going to work... – pzl-kleur Oct 15 '15 at 00:07
It may be that the part of the script that creates the `textarea` is executed on another handler. I did not verify. – arcyqwerty Oct 15 '15 at 00:07

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

1 Answers1