How can i make a button clicked when i just click a div

Question

    <div id="mydiv"><div>
    <button style="visibility:hidden; float:left"></button>

I wanna make the hidden button as is clicked when someone click the div "mydiv".

Answer 1

As AndrewL said, you don't need a button for this. But if you want to use a button anyways, simply assign a eventListener to your div that simulates a click on the button:

document.querySelector('#mydiv').addEventListener('click', () => {
    document.querySelector('button').click();
});

Example

(I added some CSS rules and an extra function for visualization.)

 document.querySelector('#mydiv').addEventListener('click', () => { // Listen for clicks on the div document.querySelector('button').click(); // Simulate a click on the button }); function test() { // This function gets called when clicking the button console.log("Click!"); } 

 <div id="mydiv" style="height: 100px; width: 100px; background-color: red;"> <div> <button style=" visibility:hidden; float:left; " onclick="test()"></button> </div> </div> 

Answer 2

You dont need a hidden button for this. Just assign a click listener to the div itself using js like this:

const btn = document.getElementById('mydiv');

function doSomething(){
    //run your script here when div is clicked
}

btn.addEventListener('click', doSomething);

Answer 3

You don't really need the hidden button to catch the click event. But if you really need it:

<div id="mydiv" onclick="document.getElementById('btn').click()">click on me<div>
    <button id="btn" style="display:none;" ></button>

Answer 4

With jQuery, you can do something like this:

$('#div_id').click(function(){$('#btn_id').trigger('click');});

$('#btn_id').click(function(){//Business logic here on btn click
});