0

I am writing a Chrome extension so it will automatically do things when I enter a website, everything is working good so far except 1 problem.

There is an text input so I can put in the value and enter another button, it is working well when I do manually by hand and mouse. But when it comes to coding, it is not working as I wanted. The code is as below:


  var   content = document.getElementsByClassName("groupButton")[0];
  var kbButtons = content.getElementsByTagName("button");

 // add mouse event for input 
  document.querySelector('input#InputNumber')
  .dispatchEvent(new MouseEvent('click', {bubbles: true}));
  
  document.querySelector('input#InputNumber')
  .dispatchEvent(new MouseEvent('mousedown', {bubbles: true}));
    
  document.querySelector('input#InputNumber')
  .dispatchEvent(new MouseEvent('mouseup', {bubbles: true}));
  
  document.querySelector('input#InputNumber')
  .dispatchEvent(new MouseEvent('orientationchange', {bubbles: true}));
    document.querySelector('input#InputNumber')
  .dispatchEvent(new MouseEvent('mousemove', {bubbles: true}));

 
  // add keyboard button for input  
  setTimeout(() => {
  const el = document.querySelector('input#InputNumber');
  el.focus();
  for (const type of ['blur','focusin','focusout','keydown', 'keypress', 'keyup'])
    el.dispatchEvent(new KeyboardEvent(type, {bubbles: true}));
  document.execCommand('insertHTML', false, '70');
},4000);


  // click on button
    setTimeout(function(){ 
    
    kbButtons[0].dispatchEvent(new MouseEvent('click', {bubbles: true}));
  }, 5000);

the function click() is working well but it doesnt catch value from the input that I set as 50. It is just always 10 as it is from the beginning. I dont know why this is happening? If somebody can help me can we do a teamviewer session? Since the website needs login credential and I can do this so you can help me soon.

Thanks a lot and look forward to hearing from everybody who has this experience.

user3051274
  • 45
  • 8
  • See [Enter data into a custom-handled input field](https://stackoverflow.com/a/57900849) – wOxxOm Oct 04 '20 at 09:07
  • Hi, I tried this already before but it is still not working. I think it is related to mouse event, because when I just use that to input the field automatically and then click on the button manually, it would be working. I think it would be related to mouse out and then go to click button. Do you have any idea about this? – user3051274 Oct 04 '20 at 09:17
  • I also think we need to have different way of doing click() function. Do you know how to move mouse from current place to that button and then do the click? – user3051274 Oct 04 '20 at 09:19
  • Use devtools to find which event listeners are attached, see [another example](https://stackoverflow.com/a/64096646). As you can see, dispatchEvent should be used instead of click(). – wOxxOm Oct 04 '20 at 09:20
  • I tried but it is still not working. Do you have some time to take a look at my site now? Just few minutes if you can help me. I am really thankful if you can take some time on it. – user3051274 Oct 04 '20 at 09:55
  • StackOverflow doesn't work like that. You need to show [MCVE](/help/mcve) of the new attempt and a screenshot of devtools event listeners panel. – wOxxOm Oct 04 '20 at 10:00
  • yes this is the image of those events. https://imgur.com/a/lWAO1mj and I also just updated the code which were from the orginal question. – user3051274 Oct 04 '20 at 10:10
  • Not all of those events are for keyboard so you should dispatch `new Event`. Also try dispatching some of the events that appear with `[x] ancestors` enabled and `{bubbles: true}` added. – wOxxOm Oct 04 '20 at 10:47
  • hi. I just updated the code in orginial post, which I updated some mouse and keyboard events but it is still not working. Do you have any idea? Thanks. – user3051274 Oct 04 '20 at 12:19
  • When I tried to print out things in the console tag to see if those events are attached to the input, and I see those are attached but the problem I see is all Event are {isTrusted: false}. But when I detect with clicking and input manually it would be {isTrusted: true}. Do you think this would the factor that caused the issue? I attached the image as this url: https://imgur.com/eJ9s3Kd – user3051274 Oct 04 '20 at 18:44
  • Sites rarely check isTrusted but try [How to trigger an ‘isTrusted=true’ click event using JavaScript?](https://stackoverflow.com/a/53488689) – wOxxOm Oct 04 '20 at 18:47
  • If it rarely check isTrust, then do you have any idea why it is still not working. You see the image url in which many events have been attached to input right? I am really in need of solving this. Can you help me? Thanks – user3051274 Oct 05 '20 at 04:53
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/222507/discussion-between-user3051274-and-woxxom). – user3051274 Oct 05 '20 at 04:55

0 Answers0