How to programmatically hover the item and click button in js

Question

Here is the demo link
Note: This demo is static in reality there will be dynamic list and button functionality.

On hover of item two buttons are showing.

Problem:
I want to programmatically hover each of the items and click on button using JS. This is a third party website UI demo and I want to handle it using my Chrome's console tab, if that's possible.

CSS:

.row .actions {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 44px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px 15px 8px 2px;
}

HTML:

<ul id="list">
   <li>item 1</li>
   <li>item 2</li>
   <li>item 3</li>
</ul>

JQuery:

$("#list li").hover(
    function() {
        $(this).append('<button id="but1" onclick="button1()">Button1</button>' +
            '<button id="but2" onclick="button2()">Button2</button>');
    },
    function() {
        $('#but1').remove();
        $('#but2').remove();
    });
    
    function button1(){ console.log("button1") }
    
     function button2(){ console.log("button2") }

this might answer your question stackoverflow.com/questions/2228376/… — Damzaky
– Damzaky, Commented Sep 23, 2022 at 6:17
@JaromandaX it's worth saying that also in chrome, when you select an element through the dom inspector, you can use it in console as $0 — Diego D
– Diego D, Commented Sep 23, 2022 at 6:25
@diegod did not know that - just realised, not going to help anyway - you can't "programatically" hover an element to get those buttons to show - so, I think the OP is out of luck — Jaromanda X
– Jaromanda X, Commented Sep 23, 2022 at 6:26
you are partly right.. I mean there's not specifically the "hover" event so you can't dispatch it. The css counterpart :hover, as far as I read around, requires you to dispatch the mouseenter event to the element. It isn't that far from a solution after all. The $0 strategy is something I found out not very long ago and was a big surprise to see. It's sad to say that js-wise I still think chrome is another planet. I force myself using firefox as much as I can but sometimes it's really a pain (for me) — Diego D
– Diego D, Commented Sep 23, 2022 at 6:33
If the site embeds jQuery, you should be able to use it on the console as well. $('whatever-selects-the-element').trigger('mouseover') should do the trick. — C3roe
– C3roe, Commented Sep 23, 2022 at 6:41

Alan Omar · Accepted Answer · 2022-09-23 07:22:16Z

I think this is what you are looking for:

$("#list li").hover(
  function() {
    $(this).append('<button id="but1" onclick="button1()">Button1</button>' +
      '<button id="but2" onclick="button2()">Button2</button>');
  },
  function() {
    $('#but1').remove();
    $('#but2').remove();
  });

function button1(item) {
  console.log("button1")
}

function button2(item) {
  console.log("button2")
}

async function autoHoverAndClick() {
  for await (item of Array.from($("#list li"))) {
    await new Promise((res) => {
      item.dispatchEvent(new Event('mouseover'));
      $('#but1').click();
      $('#but2').click();
      console.log("------------------")
      setTimeout(() => {
        item.dispatchEvent(new Event('mouseout'));
        res()
      }, 1500)
    })
  }

}

(async() => await autoHoverAndClick())()

.row .actions {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  height: 44px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 8px 15px 8px 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Collectives™ on Stack Overflow

How to programmatically hover the item and click button in js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related