-1

Traditionally, to respond an button click event, we could use some code like this

<button onclick="myFunction()">Click me</button>

Nowadays button click processing seems to use some kind of link/observer. This is "Add Question" button from Quora.

enter image description here

Here is part of its HTML

<div class="q-click-wrapper qu-active--textDecoration--none qu-focus--textDecoration--none base___StyledClickWrapper-lx6eke-1 lokDfm puppeteer_test_add_question_button  qu-ml--small qu-borderRadius--pill qu-alignItems--center qu-justifyContent--center qu-whiteSpace--nowrap qu-userSelect--none qu-display--inline-flex qu-bg--red qu-tapHighlight--white qu-textAlign--center qu-cursor--pointer qu-hover--textDecoration--none" type="button" tabindex="0" role="button" style="box-sizing: border-box; direction: ltr; font: inherit; outline: none; padding: 5px 15px; max-width: 100%; border-width: 0px; color: inherit;">

I guess the key is puppeteer_test_add_question_button, how do I get the real button click processing html/javascript code?

PutBere
  • 131
  • 1
  • 12
  • 1
    setonclicklistener on that button would help – Sandrin Joy Sep 06 '20 at 07:43
  • What do you mean by "real button click processing"? Are you asking how to add an onclick event to the button without using the `onclick` attribute? If so, you can use `addEvenetListener()`, with a method such as `getElementsByClassName` or `querySelector` – Nick Parsons Sep 06 '20 at 07:43
  • @NickParsons Thank you. I don't know how quora implement that button-click-processing and I'm trying to figure it out. I searched "onclick" in its HTML but get nothing. I don't know what else I could try. – PutBere Sep 06 '20 at 07:46
  • The previous comments are pointing towards setting up new event listeners. I understand OP's question in the sense of "sniffing out already attached handlers". Unfortunately, there doesn't seem to be a script way if doing it. But maybe the following answer is helpful to you: https://stackoverflow.com/questions/2623118/inspect-attached-event-handlers-for-any-dom-element ? – Carsten Massmann Sep 06 '20 at 08:35

1 Answers1

0

Write a querySelector to get that Element. For example:

var button = document.querySelector("button.bla.bla")

Then add click event listener on the Element like,

button.addEventListener("click", function(){
  console.log('clicked')
}

And if you want to click it from javascript, just do this,

button.click()

Now your question is, it already does something, and you want to find the code and figure out which javascript function is being called. For that, look for sources in chrome debugger tools, and you will see javascript files, observe them. You will find the code somewhere. You can set breakpoints to test when event is fired.

Saurav Pathak
  • 796
  • 11
  • 32