Back to Exercises
1) Inline JavaScript
Attach JavaScript directly to an element using an event attribute.
<button onclick="alert('Hello from inline JS!')">Click Inline Alert</button>
2) Internal JavaScript (<script> tag)
Place JavaScript in a <script> tag within the same HTML file.
<script>
function internalGreet() {
alert('Hello from internal JS!');
}
document.getElementById('internalBtn').addEventListener('click', internalGreet);
</script>
3) External JavaScript (Recommended)
Reference a separate .js file for better organization and caching.
<script src="adding-js-demo.external.js" defer></script>
// adding-js-demo.external.js
function externalGreet() {
alert('Hello from external JS file!');
}
document.getElementById('externalBtn').addEventListener('click', externalGreet);
Full Code Used in This Demo
HTML
<button onclick="alert('Hello from inline JS!')">Click Inline Alert</button>
<button id="internalBtn">Click Internal Alert</button>
<button id="externalBtn">Click External Alert</button>
<script src="adding-js-demo.external.js" defer></script>
CSS
.btn { background: #3b82f6; color: #fff; border-radius: 8px; }
JavaScript (Internal)
function internalGreet() {
alert('Hello from internal JS!');
}
const internalBtn = document.getElementById('internalBtn');
if (internalBtn) {
internalBtn.addEventListener('click', internalGreet);
}
JavaScript (External - adding-js-demo.external.js)
function externalGreet() {
alert('Hello from external JS file!');
}
document.addEventListener('DOMContentLoaded', function() {
const btn = document.getElementById('externalBtn');
if (btn) {
btn.addEventListener('click', externalGreet);
}
});