A random item from a JavaScript array display a different phrase after a new search/refresh of page [duplicate]

I built a weather app and I just wanted to add some phrases every time a new city is searched up or the page is reloaded. I have the phrases in an array (they show up in the console) and just need to figure out what to use to have it actually display in the HTML (innerHTML or document.queryselector ???). I am also stumped on how to call this function with the addEventListener when the "click" happens to submit the city search. So I need to figure out if < p > or a div class is what I need in my HTML. I feel close to figuring it out but I've spent hours on this...

function displayPhrase() {
var phrases = [
  "Always check the weather before going on long drives!",
  "Make sure your tires have tread.",
  "Make sure your wipers work properly.",
  "Always check fuel and oil levels.",
  "Drive safe today!",
  "Dress accordingly!",
  "Check your tire pressure regularly.",
];

var randomPhrase = phrases[Math.floor(Math.random() * phrases.length)];

console.log(randomPhrase);

}