Javascript - click() does not work on text area-CodePudding

I'm writing a script for comment automation. In step one, code is supposed to stimulate a click on this text area (inside the red box), but nothing happens.
I've used document.getElementsByClassName("_ablz _aaoc")[0].click(); but that doesn't seem to work. Apparently the click() method is working only on some div tag elements in the webpage I'm working on, but that's another problem.

I tried placing the comment using .value, and although that technically adds text to the text area, the "post" button is still disabled. For it to be enabled, I need to click on the text area first and after at least one valid keypress event, the post button is enabled. see image. Here's the code I can see for the text box and post button.

<textarea aria-label="Add a comment…" placeholder="Add a comment…"  autocomplete="off" autocorrect="off" style="height: 18px !important;"></textarea>
<button  type="submit" disabled=""><div >Post</div></button>

EDIT
I've been suggested to use .focus(), and although it does work in code snippets placed here, it doesn't work on the target website. When I tried executing document.getElementsByClassName("_ablz _aaoc")[0].focus();, 'undefined' was returned to console. But the text area wasn't focused.

CodePudding user response：

You need to focus on the textarea, symulate a keypress and only then click on the submit button

CodePudding user response：

If you need to focus on the text area use focus() event instead of click() event

document.getElementsByClassName("_ablz _aaoc")[0].focus();

<textarea aria-label="Add a comment…" placeholder="Add a comment…"  autocomplete="off" autocorrect="off" style="height: 18px !important;"></textarea>
<button  type="submit" disabled=""><div >Post</div></button>

CodePudding user response：

Instead of using click, you can use focus.

To make sure your elements are loaded, you also can add window.onload event.

window.onload = () => {
  document.getElementsByClassName("_ablz _aaoc")[0].focus();
}

<textarea aria-label="Add a comment…" placeholder="Add a comment…"  autocomplete="off" autocorrect="off" style="height: 18px !important;"></textarea>
<button  type="submit" disabled=""><div >Post</div></button>

If you want to enable that button, you can set disabled attribute true/false after textarea's value changed.

window.onload = () => {
  document.getElementsByClassName("_ablz _aaoc")[0].focus();

  //enable/disable button when textarea value changes
  document.getElementsByClassName("_ablz _aaoc")[0].onchange = (event) => {
    if (event.target.value) {
      document.getElementsByClassName("_acan _acao _acas")[0].disabled = false;
    } else {
      document.getElementsByClassName("_acan _acao _acas")[0].disabled = true;
    }
  }

  //trigger onchange manually
  document.getElementsByClassName("_ablz _aaoc")[0].value = "Testing"
  var evt = document.createEvent("HTMLEvents");
  evt.initEvent("change", false, true);
  document.getElementsByClassName("_ablz _aaoc")[0].dispatchEvent(evt);
}

<textarea aria-label="Add a comment…" placeholder="Add a comment…"  autocomplete="off" autocorrect="off" style="height: 18px !important;"></textarea>
<button  type="submit" disabled=""><div >Post</div></button>

CodePudding user response：

I am not sure why in document.getElementsByClassName("_ablz _aaoc")[0].click() you are using two classes for selection as you can not do that with this method getElementsByClassName if you want to use multiple classes use document.querySelectorAll('.class1,.class2') and then you can use the click event on the element. Hope it will help you in resolving the problem.