html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple SPA</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="content">
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
<button id="button4">Button 4</button>
<button id="button5">Button 5</button>
<p id="message"></p>
</div>
<script src="script.js"></script>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
button {
margin: 5px;
padding: 10px 20px;
font-size: 16px;
}
#message {
margin-top: 20px;
font-size: 18px;
color: #333;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
// Function to update the message when a button is clicked
function updateMessage(buttonNumber) {
const messageElement = document.getElementById('message');
messageElement.textContent = `Button ${buttonNumber} was clicked`;
}
// Add event listeners to each button
document.getElementById('button1').addEventListener('click', () => updateMessage(1));
document.getElementById('button2').addEventListener('click', () => updateMessage(2));
document.getElementById('button3').addEventListener('click', () => updateMessage(3));
document.getElementById('button4').addEventListener('click', () => updateMessage(4));
document.getElementById('button5').addEventListener('click', () => updateMessage(5));
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run