<!--<section>
  <p></p>
  <cite></cite>
  <br />
  <button onclick="change()">change</button>
</section>*/-->
<section>
  <button>change Color</button>
  <p></p>
</section>

section {
  height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  background: none;
  border: 1px solid black;
  padding: 10px;
}

function change() {
  let qoutes = [
    { qoute: "iman", sayer: "aliasghar" },
    { qoute: "ali", sayer: "omid" },
    { qoute: "hasan", sayer: "reza" },
    { qoute: "mahdi", sayer: "tina" },
    { qoute: "rey", sayer: "mas" },
    { qoute: "baba", sayer: "nazi" },
    { qoute: "dadash", sayer: "salbi" },
    { qoute: "masma", sayer: "somaye" },
  ]
  let btn = document.querySelector("button")

  
  btn.addEventListener("click", () => {
    let par = document.querySelector("p")
    let cite = document.querySelector("cite")
    let rand = Math.floor(Math.random() * qoutes.length)
    par.innerHTML = qoutes[rand].qoute
    cite.innerHTML = qoutes[rand].sayer
  })
}