MixedMessages - Basic Webpage Implimentation

I’ve included a link to my GitHub repository for this project. I decided to build a simple webpage that includes a dropdown for three different types of prompts: inspirational, advice, and ascii.

For anyone that just wants to see the JavaScript, here is the basic logic I am using:

document.getElementById('promptDropdown').onchange = function() {
    const selection = this.value;

    if(selection) {
        let message = '';
        switch(selection) {
            case 'inspirational':
                message += inspirationArrStart[Math.floor(Math.random() * inspirationArrStart.length)];
                message += inspirationArrMiddle[Math.floor(Math.random() * inspirationArrMiddle.length)];
                message += inspirationArrEnd[Math.floor(Math.random() * inspirationArrEnd.length)];
            case 'advice':
                message += adviceArrStart[Math.floor(Math.random() * adviceArrStart.length)];
                message += adviceArrEnd[Math.floor(Math.random() * adviceArrEnd.length)];
            case 'ASCII':
                message += asciiArt[Math.floor(Math.random() * asciiArt.length)];
        let card = document.getElementById('messageCardBody');
        card.innerHTML = `<p>${message}</p>`;

As you can see in my code, I am referencing several different arrays (they are defined above this part of my code) and pulling elements from each one to create a string to hold the message. I am then updating a portion of my HTML to display the string to the user.

Is the way I’m referencing html elements best practice? In the past I feel like I was able to just reference the ID, but for some reason I was not able to this time.