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;
console.log(selection);
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)];
break;
case 'advice':
message += adviceArrStart[Math.floor(Math.random() * adviceArrStart.length)];
message += adviceArrEnd[Math.floor(Math.random() * adviceArrEnd.length)];
break;
case 'ASCII':
message += asciiArt[Math.floor(Math.random() * asciiArt.length)];
default:
break;
}
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.