how to pass a javascript phrase to html

Question

I am learning to work with javascript and I wanted to ask how I can make it appear only one sentence at a time. I want to know how to make one of the javascript phrases appear in the html and that each done a Reload in the page appears another different

var frases = [
  "Os problemas são oportunidades para se mostrar o que sabe.",
  "Nossos fracassos, às vezes, são mais frutíferos do que os êxitos.",
  "Tente de novo. Fracasse de novo. Mas fracasse melhor.",
  "É costume de um tolo, quando erra, queixar-se dos outros. É costume de um sábio queixar-se de si mesmo.",
  "O verdadeiro heroísmo consiste em persistir por mais um momento, quando tudo parece perdido.",
  "Mesmo que já tenhas feito uma longa caminhada, há sempre um novo caminho a fazer.",
  "Na prosperidade, nossos amigos nos conhecem; na adversidade, nós é que conhecemos nossos amigos.",
  "A coisa mais cara é transformar um cliente insatisfeito em satisfeito.",
  "Lembre sempre que a sua vontade de triunfar é mais importante do que qualquer outra coisa.",
  "Vamos ter de cortar em gorduras e de poupar."
];

// console.log (frases[1])

function frases() {
  frases = Math.floor(Math.random() * 10);
}

document.querySelector("h1").innerHTML = frases;

body {
  font-size: 16px;
  margin: 0;
  text-align: center;
}

.box {
  box-sizing: border-box;
  border-radius: 5px;
  margin: 0 auto;
  padding: 32px;
  margin-top: 48px;
  background-color: rgba(255, 255, 255, 0.6);
  width: 60%;
}

hr {
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0));
  border: 0;
}

<div class='box'>
  <img src="https://via.placeholder.com/100" alt="">
  <p>Autor</p>
  <p>José Viera, Portugal</p>
  <hr>
  <h1></h1>
</div>

Answer 1

In Javascript variable names and functions occupy the same space, ie overlap. So you have to give a different name to the variable or function. Besides, to run a function you have to use () to the invoke and that function must have return, a palavra/comando que indica o que ela retorna. Assim tendo uma array phrasescom várias frases podes chamar uma função (chamemos-lhesortearFrase`), it creates a random index and then uses that index to extract the phrase with that index from the array.

It could be so:

var frases = [
  "Os problemas são oportunidades para se mostrar o que sabe.",
  "Nossos fracassos, às vezes, são mais frutíferos do que os êxitos.",
  "Tente de novo. Fracasse de novo. Mas fracasse melhor.",
  "É costume de um tolo, quando erra, queixar-se dos outros. É costume de um sábio queixar-se de si mesmo.",
  "O verdadeiro heroísmo consiste em persistir por mais um momento, quando tudo parece perdido.",
  "Mesmo que já tenhas feito uma longa caminhada, há sempre um novo caminho a fazer.",
  "Na prosperidade, nossos amigos nos conhecem; na adversidade, nós é que conhecemos nossos amigos.",
  "A coisa mais cara é transformar um cliente insatisfeito em satisfeito.",
  "Lembre sempre que a sua vontade de triunfar é mais importante do que qualquer outra coisa.",
  "Vamos ter de cortar em gorduras e de poupar."
];

// console.log (frases[1])

function sortearFrase(arr) {
  const index = Math.floor(Math.random() * arr.length - 1);
  return arr[index];
}

document.querySelector("h1").innerHTML = sortearFrase(frases);

body {
  font-size: 16px;
  margin: 0;
  text-align: center;
}

.box {
  box-sizing: border-box;
  border-radius: 5px;
  margin: 0 auto;
  padding: 32px;
  margin-top: 48px;
  background-color: rgba(255, 255, 255, 0.6);
  width: 60%;
}

hr {
  height: 1px;
  background-image: linear-gradient( to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0));
  border: 0;
}

<div class='box'>
  <img src="https://via.placeholder.com/100" alt="">
  <p>Autor</p>
  <p>José Viera, Portugal</p>
  <hr>
  <h1></h1>
</div>