单击事件适用于Chrome和Edge，但不适用于Firefox

Question

In the project I am working, I am clicking some buttons with a given id for each and I collect those id to display data in some tables. It works fine in chrome and edge but every time I used firefox the id comes back as undefined.

The code is as follow:

 function reply_clickGF(e) { // collect the id of the button clicked e = e || window.event; console.log(e); e = e.target || e.srcElement; var clickId = e.id; } 

 <div id="groundFloor" class="tab active"> <br> <h2>Ground Floor</h2> <div id="buttonDispGF" style=" background-image: url('img/ground floor.jpg')" onclick="reply_clickGF()"> <div id="maxTableGF"> <p> Maximum values over the last week:</p> <table style="width: 100%" class="maxTable"> <tbody> <tr> <th class="border">Sensor Type</th> <th class="border">Max Reading</th> <th class="border">Mote Id</th> </tr> <tr> <td class="border">Pir (Presence) </td> <td class="border" id="data">1</td> <td class="border" id="data">106</td> </tr> <tr> <td class="border">Magnetic (Door) </td> <td class="border" id="data">1</td> <td class="border" id="data">106</td> </tr> <tr> <td class="border">Acoustic (dB) </td> <td class="border" id="data">38.69</td> <td class="border" id="data">106</td> </tr> </tbody> </table> <div id="table"> <table id="colourCode"> <tbody> <tr> <td height="70"><svg width="50" height="40"> <circle cx="20" cy="20" r="13.5" stroke="black" stroke-width="2" fill="green"></circle> </svg></td> <td height="70">Last Reading Within 12 Hours</td> </tr> <tr> <td height="70"><svg width="50" height="40"> <circle cx="20" cy="20" r="13.5" stroke="black" stroke-width="2" fill="yellow"></circle> </svg></td> <td height="70">Last Reading Between the Last 12 to 24 Hours </td> </tr> <tr> <td height="70"><svg width="50" height="40"> <circle cx="20" cy="20" r="13.5" stroke="black" stroke-width="2" fill="red"></circle> </svg></td> <td height="70">Last Reading Over 24 Hours or no Data for This Mote</td> </tr> </tbody> </table> </div> </div> <a href="#GFDisplay" class="tooltip" style="left: 600px; top: 140px;"><input type="button" value="104" name="104" id="104" class="button" onmouseover="handler(this)" style="position: absolute; border: 2px solid black; background-color: red;"></a> <a href="#GFDisplay" class="tooltip" style="left: 530px; top: 210px;"><input type="button" value="105" name="105" id="105" class="button" onmouseover="handler(this)" style="position: absolute; border: 2px solid black; background-color: red;"></a> <a href="#GFDisplay" class="tooltip" style="left: 400px; top: 80px;"><input type="button" value="106" name="106" id="106" class="button" onmouseover="handler(this)" style="position: absolute; border: 2px solid black; background-color: green;"></a> <a href="#GFDisplay" class="tooltip" style="left: 440px; top: 120px;"><input type="button" value="205" name="205" id="205" class="button" onmouseover="handler(this)" style="position: absolute; border: 2px solid black; background-color: red;"></a> </div><br><br> <div class="buttonDisplay"> <a href="#GFDisplay"><button type="button" class="dataButton" id="displayTables" onclick="displayAllTablesGF()"> Display All Motes Data</button></a> <button type="button" class="dataButton" id="clearAll" onclick="resetGF()">Clear All</button> </div> <div id="GFDisplay"></div> </div> 

Can someone help me by giving pointers to be able to run it in all 3 browsers?

Answer 1

Solved it myself, simply added event to reply_clickGF() in my html, now it works in all 3 browser.

  <div id="buttonDispGF" style=" background-image: url('img/ground floor.jpg')" onclick="reply_clickGF(event)"> 

: