Add DOM element existence checks and detailed event listener debugging

- Added checks to verify if DOM elements exist before attaching listeners
- Added detailed logging for each event listener attachment
- Log format shows which elements are found and which listeners are attached
- This will reveal if buttons exist in DOM and if listeners are properly attached
parent c1407bb7
...@@ -309,7 +309,6 @@ ...@@ -309,7 +309,6 @@
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script> <script>
alert('RDP page script is loading!');
console.log('RDP page script starting...'); console.log('RDP page script starting...');
// init kbdlayout_input // init kbdlayout_input
...@@ -769,42 +768,93 @@ const onMouseWheel = (evt) => { ...@@ -769,42 +768,93 @@ const onMouseWheel = (evt) => {
console.log('Attaching event listeners...'); console.log('Attaching event listeners...');
document.getElementById('connectBtn').addEventListener('click', function(e) { // Check if elements exist
console.log('Connect button clicked'); const connectBtn = document.getElementById('connectBtn');
showRdpConfig(); const disconnectBtn = document.getElementById('disconnectBtn');
}); const cancelConnectBtn = document.getElementById('cancelConnectBtn');
document.getElementById('disconnectBtn').addEventListener('click', function(e) { const startRdpBtn = document.getElementById('startRdpBtn');
console.log('Disconnect button clicked'); const closeBtn = document.querySelector('.close-btn');
disconnect(); const maximizeBtn = document.querySelector('.maximize-btn');
}); const minimizeBtn = document.querySelector('.minimize-btn');
document.getElementById('cancelConnectBtn').addEventListener('click', function(e) { const zoomBtn = document.getElementById('zoomBtn');
console.log('Cancel connect button clicked');
cancelConnect(); console.log('DOM elements found:', {
}); connectBtn: !!connectBtn,
document.getElementById('startRdpBtn').addEventListener('click', function(e) { disconnectBtn: !!disconnectBtn,
console.log('Start RDP button clicked'); cancelConnectBtn: !!cancelConnectBtn,
startRdpConnection(); startRdpBtn: !!startRdpBtn,
closeBtn: !!closeBtn,
maximizeBtn: !!maximizeBtn,
minimizeBtn: !!minimizeBtn,
zoomBtn: !!zoomBtn
}); });
if (connectBtn) {
connectBtn.addEventListener('click', function(e) {
console.log('Connect button clicked');
showRdpConfig();
});
console.log('Connect button listener attached');
}
if (disconnectBtn) {
disconnectBtn.addEventListener('click', function(e) {
console.log('Disconnect button clicked');
disconnect();
});
console.log('Disconnect button listener attached');
}
if (cancelConnectBtn) {
cancelConnectBtn.addEventListener('click', function(e) {
console.log('Cancel connect button clicked');
cancelConnect();
});
console.log('Cancel connect button listener attached');
}
if (startRdpBtn) {
startRdpBtn.addEventListener('click', function(e) {
console.log('Start RDP button clicked');
startRdpConnection();
});
console.log('Start RDP button listener attached');
}
// Window control buttons // Window control buttons
document.querySelector('.close-btn').addEventListener('click', function(e) { if (closeBtn) {
console.log('Close button clicked'); closeBtn.addEventListener('click', function(e) {
disconnect(); console.log('Close button clicked');
}); disconnect();
document.querySelector('.maximize-btn').addEventListener('click', function(e) { });
console.log('Maximize button clicked'); console.log('Close button listener attached');
toggleFullscreen(); }
});
document.querySelector('.minimize-btn').addEventListener('click', function(e) { if (maximizeBtn) {
console.log('Minimize button clicked'); maximizeBtn.addEventListener('click', function(e) {
toggleFullscreen(); console.log('Maximize button clicked');
}); toggleFullscreen();
document.getElementById('zoomBtn').addEventListener('click', function(e) { });
console.log('Zoom button clicked'); console.log('Maximize button listener attached');
toggleZoom(); }
});
if (minimizeBtn) {
minimizeBtn.addEventListener('click', function(e) {
console.log('Minimize button clicked');
toggleFullscreen();
});
console.log('Minimize button listener attached');
}
if (zoomBtn) {
zoomBtn.addEventListener('click', function(e) {
console.log('Zoom button clicked');
toggleZoom();
});
console.log('Zoom button listener attached');
}
console.log('Event listeners attached'); console.log('Event listeners attachment completed');
// Input event handlers // Input event handlers
let ecanvas = document.getElementById('canvas'); let ecanvas = document.getElementById('canvas');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment