Setting value of button in a list to "yes"

Question

EDIT What I want to do is set the below button to "yes" on page load. The code should run in a Tampermonkey script.

I tried the below, but it doesn't work ("Cannot set property 'value' of null"):

    document.querySelector('.ant-click-animating-without-extra-node').value = "false";

I only found remotely related posts like this that talk about buttons in forms, not lists.

So here's the HTML (which I can't change as such):

  <li class="ant-list-item activeRisk">
    <div class="ant-list-item-main">
      <div class="ant-list-item-meta m-l-mxl">
        <div class="ant-list-item-meta-content">
          <h4 class="ant-list-item-meta-title">
            <span>Does this acquire personal information about the user?</span>
          </h4>
        </div>
      </div>
    </div>
    <div class="ant-list-item-extra">
      <button type="button" class="ant-btn failTest p-l-lg p-r-lg optimus-text-caps answerButton ant- 
      btn-round ant-btn-sm" ant-click-animating-without-extra-node="false">
        <span>Yes</span>
      </button>
      <button type="button" class="ant-btn null p-l-lg p-r-lg optimus-text-caps answerButton ant-btn- 
      round ant-btn-sm">
        <span>No</span>
      </button>
   </div> 
  </li>

Answer 1

The first problem is that you are not querying for the element correctly. You are looking for an element that has a class:

document.querySelector('.ant-click-animating-without-extra-node')...

But, ant-click-animating-without-extra-node is an attribute, so the query finds nothing and then fails when you try to get the value of nothing.

The second issue is that this button won't have a value. As I said, it has an attribute, so you can set the attribute value with .setAttribute().

Lastly, you need to make sure that the script run after the HTML has been parsed into memory. This can be done by placing the script after the last bit of HTML in the body.

  <li class="ant-list-item activeRisk">
    <div class="ant-list-item-main">
      <div class="ant-list-item-meta m-l-mxl">
        <div class="ant-list-item-meta-content">
          <h4 class="ant-list-item-meta-title">
            <span>Does this acquire personal information about the user?</span>
          </h4>
        </div>
      </div>
    </div>
    <div class="ant-list-item-extra">
      <button type="button" class="ant-btn failTest p-l-lg p-r-lg optimus-text-caps answerButton ant- 
      btn-round ant-btn-sm" ant-click-animating-without-extra-node="false">
        <span>Yes</span>
      </button>
      <button type="button" class="ant-btn null p-l-lg p-r-lg optimus-text-caps answerButton ant-btn- 
      round ant-btn-sm">
        <span>No</span>
      </button>
   </div> 
  </li>
  
  <script>
        document.querySelector('.ant-list-item-extra > button.failTest').setAttribute("ant-click-animating-without-extra-node", "Yes");
        console.log(document.querySelector('.ant-list-item-extra > button.failTest'));
  </script>