# Connecting JavaScript and Selecting Elements

JavaScript can add interaction to an HTML interface. Keep the page usable when supporting scripts fail.

## Connect a script

Place this before the closing `body` tag:

~~~html
<script src="js/app.js"></script>
~~~

Or use `defer` in the page head:

~~~html
<script src="js/app.js" defer></script>
~~~

## Select an element

~~~html
<p id="status">Waiting for an action.</p>
~~~

~~~js
const statusMessage = document.querySelector("#status");

if (statusMessage) {
  statusMessage.textContent = "JavaScript loaded.";
}
~~~

Use meaningful identifiers and check that an element exists before using it.

## Check

- [ ] Script path is correct.
- [ ] Browser console has no error.
- [ ] Text is inserted with `textContent` when HTML is unnecessary.
- [ ] Core information remains available without the script.