Como fazer cada <li> de uma <ul> mudar de cor ao clicar nele

Front-end
,
#1

Gostaria de poder mudar a cor de fundo de cada uma das opções ao clicar nelas

image
image1920×1080 137 KB

image
image1920×1080 201 KB

image
image1920×1080 113 KB

#2

No HTML, troque o nome da função, click não pode e precisa passar o objeto do evento obrigatoriamente.

onclick="clicar(event)"

Se quer mudar cada opção para uma cor específica, aí vc precisa ou definir um id para cada e dependendo do id configurar a cor ou usar um dataset. Além disso, a forma que você fez também está errada. querySelectorAll não retorna um array “esperto” igual ao que é feito na jQuery. Vc precisa iterar manualmente pelos elementos e processá-los… Enfim, dê uma olhada, resolvi de cada jeito para vc.

HTML:

Mudando tudo:
<div id="box-options">
  <ul id="options">
    <li class="optionMudarTudo option" onclick="clicarEMudarTudo(event)">1</li>
    <li class="optionMudarTudo option" onclick="clicarEMudarTudo(event)">2</li>
    <li class="optionMudarTudo option" onclick="clicarEMudarTudo(event)">3</li>
    <li class="optionMudarTudo option" onclick="clicarEMudarTudo(event)">4</li>
    <li class="optionMudarTudo option" onclick="clicarEMudarTudo(event)">5</li>
  </ul>
</div>

Mudando por id:
<div id="box-options">
  <ul id="options">
    <li class="option" id="li1" onclick="clicarEMudarPorId(event)">1</li>
    <li class="option" id="li2" onclick="clicarEMudarPorId(event)">2</li>
    <li class="option" id="li3" onclick="clicarEMudarPorId(event)">3</li>
    <li class="option" id="li4" onclick="clicarEMudarPorId(event)">4</li>
    <li class="option" id="li5" onclick="clicarEMudarPorId(event)">5</li>
  </ul>
</div>

Mudando por dataset (data-cor):
<div id="box-options">
  <ul id="options">
    <li class="option" data-cor="#f75488" onclick="clicarEMudarPorDataset(event)">1</li>
    <li class="option" data-cor="#cc54f7" onclick="clicarEMudarPorDataset(event)">2</li>
    <li class="option" data-cor="#5467f7" onclick="clicarEMudarPorDataset(event)">3</li>
    <li class="option" data-cor="#54f7df" onclick="clicarEMudarPorDataset(event)">4</li>
    <li class="option" data-cor="#54f777" onclick="clicarEMudarPorDataset(event)">5</li>
  </ul>
</div>

CSS:

.option {
  cursor: pointer;
}

JavaScript:

function clicarEMudarTudo( event ) {
  
  document.querySelectorAll( ".optionMudarTudo" ).forEach( opt => {
  	opt.style.backgroundColor = "#fb7413";
  });
  
}

function clicarEMudarPorId( event ) {
	
  let cores = {
  	"li1": "#878787",
    "li2": "#9e9e9e",
    "li3": "#b3b3b3",
    "li4": "#d1d1d1",
    "li5": "#ebebeb"
  };
  
  let li = event.target;
  let liId = li.id;
  
  li.style.backgroundColor = cores[liId];
  
}

function clicarEMudarPorDataset( event ) {
	
  let li = event.target;
	let cor = li.dataset.cor;
  li.style.backgroundColor = cor;
  
}

O exemplo rodando pode ser visto aqui: Edit fiddle - JSFiddle - Code Playground

#3

Uma coisa que te recomendo fazer primeiro, é utilizar um component html mais adequado para isto.

Se o usuário pode selecionar várias opções, utilizar um input type=checkbox e se o usuário puder selecionar apenas uma utilizar input type=radio.

Com isso você já ganha a capacidade de fazer o que quer, na base do css, o que simplificaria as coisas.
Veja aqui um exemplo de como fazer usando checkbox.