如何在没有id的情况下模拟点击按钮类"input-button blue“

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文档，其快速摘要如下所示。

1. 您可以使用.来表示类选择器，即选择具有某个类的元素。
2. 您可以使用#来选择ID为
3. 的元素在按标记名选择元素时，例如button，元素名称前面没有任何<代码>H211<代码>G212

​

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

这里有几个问题：

1. .click()不是有效的事件侦听器，请使用addEventListener
2. .button.input-button.blue或.onclick = function(){};不存在。我想你真正想说的是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>

​