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>

That error indicates that document.querySelector('.ant-click-animating-without-extra-node') is returning nothing. When is that line executing? It needs to run after the actual button html so that the code will have been parsed into memory by then. Additionally, the button element won't have a `value` to get. It will attributes and you can change the value of attribute with `setAtttribute()`. — Scott Marcus, Sep 13 '19 at 22:00

score 1 · Accepted Answer · answered Sep 13 '19 at 22:06

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>

Thanks, @Scott Marcus! Ultimately, I figured - thanks to your hint - that I had a timing problem. Using setTimeout(function(){ }, 10000); solved that for me. — MKKirk, Oct 02 '19 at 15:31
You're welcome. Please up vote any/all answers that are helpful and mark any that provide you with the answer you're looking for as "the" answer by clicking the check mark at the top-left of the answer. — Scott Marcus, Oct 02 '19 at 16:52

Setting value of button in a list to "yes"

1 Answers1