![]() Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/.cursor-server/data/User/History/f2ac79a/ |
<!DOCTYPE html>
<html>
<head>
<title>Simple Button Test</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; background: #0a0a0a; color: white; }
.test-section { margin: 20px 0; padding: 20px; border: 1px solid #333; border-radius: 8px; }
button { padding: 10px 20px; margin: 5px; background: #667eea; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:hover { background: #5a67d8; }
.log { background: #1a1a1a; padding: 10px; border-radius: 4px; font-family: monospace; font-size: 12px; max-height: 300px; overflow-y: auto; }
</style>
</head>
<body>
<h1>Simple Button Test</h1>
<div class="test-section">
<h3>Test Buttons</h3>
<button id="testBtn1">Test Button 1</button>
<button id="testBtn2">Test Button 2</button>
<button id="testBtn3">Test Button 3</button>
</div>
<div class="test-section">
<h3>Debug Log</h3>
<div id="debugLog" class="log"></div>
<button onclick="clearLog()">Clear Log</button>
</div>
<script>
// Override console.log to capture debug output
const originalLog = console.log;
const originalError = console.error;
function log(message) {
const logDiv = document.getElementById('debugLog');
const timestamp = new Date().toLocaleTimeString();
logDiv.innerHTML += `[${timestamp}] ${message}<br>`;
logDiv.scrollTop = logDiv.scrollHeight;
originalLog(message);
}
function logError(message) {
const logDiv = document.getElementById('debugLog');
const timestamp = new Date().toLocaleTimeString();
logDiv.innerHTML += `[${timestamp}] ERROR: ${message}<br>`;
logDiv.scrollTop = logDiv.scrollHeight;
originalError(message);
}
console.log = log;
console.error = logError;
// Test object
const testObject = {
name: 'TestObject',
testFunction() {
log('🎵 Test function called from: ' + this.name);
}
};
// Test different ways of adding event listeners
document.addEventListener('DOMContentLoaded', () => {
log('🎵 DOM loaded, setting up test buttons...');
const btn1 = document.getElementById('testBtn1');
const btn2 = document.getElementById('testBtn2');
const btn3 = document.getElementById('testBtn3');
// Method 1: Direct function
btn1.addEventListener('click', () => {
log('🎵 Button 1 clicked - direct function');
testObject.testFunction();
});
// Method 2: Bound function
btn2.addEventListener('click', testObject.testFunction.bind(testObject));
// Method 3: Arrow function with this
btn3.addEventListener('click', (e) => {
log('🎵 Button 3 clicked - arrow function');
testObject.testFunction();
});
log('🎵 All test buttons set up');
});
function clearLog() {
document.getElementById('debugLog').innerHTML = '';
}
</script>
</body>
</html>