Search for contents of element and click its parent

Question

I am trying to create an extention which clicks on an item of the price given by the user. Here is the relevant popup.html:

<input style="display:none" /><input type="text" id="userInput" value='' />
<button id="clickme">Run</button>

When 'clickme' is clicked, it runs this popup.js:

document.getElementById('clickme').addEventListener('click', function() {
 var price = '$'+ document.getElementById("userInput").value+".00";
 alert(price);
 $("p:contains("price")").parentNode.click();
});

If you type the desired price in in the form as 48, it returns an alert with the value $48.00.

It then shuold click on the item of that price, however this currently isn't working. Here is the code of the relevant part of the website which I am trying to run my extention on (not my website):

<div class="grid__item wide--one-fifth large--one-quarter medium-down--one-half">
 <a href="/collections/1seventeenweek7/products/copy-of-supreme-dazzle-warm- up-top-red" class="grid-link text-center">
  <p class="grid-link__title">Supreme Corner  Cap Light Blue</p>
  <p class="grid-link__meta">
   <span class="visually-hidden">Regular price</span>
   $48.00
  </p>
 </a>
</div>

I am trying to get it to search for the p element containing $48.00, and then click on the a element which is the parent element, but this is not currently working. What am I doing wrong? - thanks

is the `a` element and the `p` element constant? will those 2 elements ALWAYS be the elements that the user clicks? or are there multiple `a` elements with other `p` children that users might click? — oldboy, Jun 29 '18 at 22:46
There are about 20 of the div elements on the page, each with its own a element and p element that the user could search for. However I have noticed that the class of the a element is always "grid-link text-center" and the class of the p element is always "grid-link__meta", perhaps that could be useful — Jacob Proctor, Jun 30 '18 at 04:44
k i'll edit my answer accordingly. just gimmie a min. doing something — oldboy, Jun 30 '18 at 04:47
i updated my answer. the code should work but for some reason in codepen it waasn't. i really gotta go to ebd. test the code. ill be back tomo — oldboy, Jun 30 '18 at 08:08
Check this: [How to access the webpage DOM rather than the extension page DOM?](https://stackoverflow.com/questions/4532236/how-to-access-the-webpage-dom-rather-than-the-extension-page-dom) — Ason, Jun 30 '18 at 17:11

oldboy · Answer 1 · 2018-06-30T14:21:57.360

Here you go. This will work!

document.getElementById('clickme').addEventListener('click', function() {
  var price = '$'+document.getElementById('userInput').value+'.00'
  var metas = document.getElementsByClassName('grid-link__meta')
  alert(price)
  for (let i = 0; i < metas.length; i++) {
    if (metas[i].innerHTML.includes(price)) metas[i].parentNode.click()
    break
  }
})

Personally, I'd really like to use something like the following, yet I forgot that getElementsByClassName doesn't return an array, but rather a NodeList object.

var price = '$'+document.getElementById('userInput').value+'.00'
var metas = document.getElementsByClassName('grid-link__meta')
var match = metas.find((curr) => curr.innerHTML.includes(price))
match.parentNode.click()

Apologies, I think I was unclear in my post, but I do not have control over the html of the web page, I am just trying to create an extention that will click on a certain item — Jacob Proctor, Jun 30 '18 at 04:37

Search for contents of element and click its parent

1 Answers1