Question

如何使用JavaScript模拟对此按钮的点击

我尝试了document.querySelector('.button.input-button.blue').click();，但是它不起作用。

document.querySelector('.button.input-button.blue').click();

<div class="page-text" style="position: absolute; top: 200px; left: 310px; right: 10px; text-align: center;">
  <span style="font-size:24px;letter-spacing:1px;">138</span>
  <span style="font-size:20px;letter-spacing:1px;">1</span>
  <span style="font-size:24px;letter-spacing:1px;">&nbsp;/&nbsp;</span>
  <span style="font-size:24px;letter-spacing:1px;">138</span>
  <span style="font-size:20px;letter-spacing:1px;">3</span>
</div>

<button class="input-button blue" style="position: absolute; top: 244px; right: 30px; width: 187px;">Fill</button>

<button class="input-button red" style="position: absolute; top: 244px; left: 330px; width: 187px;">Sell</button>

我希望点击“蓝色按钮”

Answer 1

您的选择器错误，应该是这样的document.querySelector('.input-button.blue')

您可以从MDN here检查querySelector文档，下面列出了快速摘要。

您可以使用.来表示类选择器，即选择具有特定类的元素。
您可以使用#选择具有ID的元素
按标签名称选择元素时，例如button，元素名称后面没有任何

let btn = document.querySelector('.input-button.blue');
btn.addEventListener('click', function(){
  console.log('Button clicked');
})
btn.click();

<div class="page-text" style="position: absolute; top: 200px; left: 310px; right: 10px; text-align: center;"><span style="font-size:24px;letter-spacing:1px;">138</span><span style="font-size:20px;letter-spacing:1px;">1</span><span style="font-size:24px;letter-spacing:1px;">&nbsp;/&nbsp;</span><span style="font-size:24px;letter-spacing:1px;">138</span><span style="font-size:20px;letter-spacing:1px;">3</span></div>
<button class="input-button blue" style="position: absolute; top: 244px; right: 30px; width: 187px;">Fill</button>
<button class="input-button red" style="position: absolute; top: 244px; left: 330px; width: 187px;">Sell</button>

Answer 2

这里有一些问题：

.click()不是有效的事件侦听器，请使用.onclick = function(){};或addEventListener
.button.input-button.blue不存在。我认为您真正的意思是button.input-button.blue

.button.input-button.blue = {class} .button {class} .input-button {class} .blue

button.input-button.blue = {element} button {class} .input-button {class} .blue

https://codepen.io/StudioKonKon/pen/QzdoxY

// Get the element node
var blue_button = document.querySelector('button.input-button.blue');

// Add event listener
blue_button.addEventListener(
   "click",
   function() {  console.log("Hello world"); },
   false
)

// Simulate use click
blue_button.click();

<div class="page-text" style="position: absolute; top: 200px; left: 310px; right: 10px; text-align: center;">
  <span style="font-size:24px;letter-spacing:1px;">138</span>
  <span style="font-size:20px;letter-spacing:1px;">1</span>
  <span style="font-size:24px;letter-spacing:1px;">&nbsp;/&nbsp;</span>
  <span style="font-size:24px;letter-spacing:1px;">138</span>
  <span style="font-size:20px;letter-spacing:1px;">3</span>
</div>

<button class="input-button blue" style="position: absolute; top: 244px; right: 30px; width: 187px;">Fill</button>

<button class="input-button red" style="position: absolute; top: 244px; left: 330px; width: 187px;">Sell</button>

如何模拟没有ID的按钮类“输入按钮蓝色”

2 个答案: