Javascript Question posted in
A very good W3school tutorial can be found here.

Copying event listener of button in JavaScript

I have this problem.
On simple instagram user page there is a Follow button, Message button and three dots button.
I need to copy listener of some button under the three dots, create new button using JS and use the same listener.

Can you please help me copying the listener? When I inspect the website and try to find what does the button do exacly, it looks like it’s runing few functions. But I can’t simply copy the code into the console.

For example I want to create new button with text "Block" and put it next to the Message button (I can do that on my own), but then make it to do the same thing as if you clicked block in the three dots.

I tried googling but I am probably not good at this enough. I am a begginer, thank you for your help.

Tags:

2

Answers


  1. 0

    To achieve this functionality , you can follow these steps in JavaScript:

    1. Find the listener function that is triggered when the "Block" option is clicked under the three dots menu.
    2. Create a new button dynamically using JavaScript with the text "Block".
    3. Attach the same listener function to this new "Block" button that was used for the "Block" option under the three dots menu.

    Here is a basic example to illustrate this concept:

    // Step 1: Find the listener function for the "Block" option under the three dots menu
function blockListener() {
    // Logic for blocking the user goes here
    console.log("User blocked!");
}

// Step 2: Create a new button with the text "Block"
const blockButton = document.createElement("button");
blockButton.textContent = "Block";

// Step 3:Attach the listener function to the new "Block" buttonn.
blockButton.addEventListener("click", blockListener);

// Insert the new "Block" button next to the Message button
const messageButton = document.getElementById("messageButton"); // Assuming you have an element with id "messageButton"
messageButton.parentNode.insertBefore(blockButton, messageButton.nextSibling);

    In this example:

    blockListener is a placeholder function that should contain the logic for blocking the user. We create a new button dynamically with the text "Block" using document.createElement("button").
    We attach the blockListener function to the click event of the new "Block" button using addEventListener.

    The new "Block" button is inserted next to the Message button in the DOM.
    You can further customize the styling and position of the new "Block" button based on your specific requirements.

    Feel free to adjust the code according to your HTML structure and requirements.

    Login or Signup to reply.
  2. 0

    Now I got what you want!

    open inspect->console then select the three dot button using query (or anything else) then we consider that element as id :button now:

    document.getElementById('button').onclick

    this will return the function you want!

    Hope it helps ^_^

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search