Javascript 搜索元素的内容并单击其父元素

我试图创建一个扩展，点击用户给出的价格。以下是相关的popup.html：

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

如果您在表单中键入所需的价格为48，它将返回一个值为$48.00的警报

然后点击该价格的物品，但目前不起作用。以下是我尝试运行扩展的网站相关部分的代码（不是我的网站）：

---

我试图让它搜索包含$48.00的p元素，然后单击a元素，该元素是父元素，但这目前不起作用。我做错了什么谢谢

给你。这会有用的

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
  }
})

---

a

元素和

p

元素是常数吗？这两个元素是否总是用户单击的元素？或者是否有多个

a

元素和其他

p

子元素供用户单击？页面上大约有20个div元素，每个元素都有自己的a元素和p元素供用户搜索。但我注意到a元素的类总是“grid-link text center”，p元素的类总是“grid-link\uu meta”，也许这会有用，我会相应地编辑我的答案。给我一分钟做点什么我更新了我的答案。代码应该可以工作，但由于某种原因，在codepen中它不能工作。我真的要去ebd了。测试代码。我会回来检查这个：抱歉，我想我在我的帖子中不清楚，但我无法控制网页的html，我只是想创建一个扩展，点击某个项目

<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>

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
  }
})

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()