Obter valor dentro de uma lista

Boa noite, Walace! Como vai?

Vc está utilizando jQuery ou JavaScript puro? Pq dependendo do seu caso o código vai mudar!

Mas, basicamente a lógica é selecionar os seus elementos li e adicionar um callback para o evento de click para cada um desses caras. Sendo que o callback será responsável por capturar o valor do elemento clicado e em seguida escrever no span.

Olá Gabriel, estou usando Javascript puro. Então queria pegar esse valor e jogar neste span.

Olá Walace.

Pra fazer isso você precisa registrar observadores nos <li>s e, quando um deles é clicado, substituir o conteúdo do <span>.

Dê uma olhada nesse fiddle que eu fiz:

Atualizar span

O código é esse:

// para cada "li",
document.querySelectorAll('li').forEach(function (linha) {
    // adicionar um observador do evento de click que
    linha.addEventListener('click', function() {
        // altera o html interno do "span" para o html interno do "li" clicado
        document.querySelector('span').innerHTML = this.innerHTML;
  });
});

Então pra resolver da forma mais intuitiva, basta usar o querySelector() e o querySelectorAll() para resolver o seu problema! Daí vc faria algo desse tipo:

var span = document.querySelector("span");
var lis = document.querySelectorAll("li");

for (var i = 0; i < lis.length; i++) {
     lis[i].addEventListener("click", function() {
          span.textContent = this.textContent;
     });
}

Como vc já fez o curso de JavaScript: Programando na linguagem da web, certamente vc já viu esse tipo de código por lá! Inclusive, durante esse curso, mais especificamente nessa aula, o instrutor mostra que essa solução que eu acabei de apresentar não é boa pq acabamos adicionando vários eventListener() o que pode acabar sobrecarregando o sistema! E que o ideal é utilizar uma característica do JavaScript chamada Event Bubbling e fazer algo assim:

var span = document.querySelector("span");
var ul = document.querySelector("ul");

ul.addEventListener("click", function(evento) {
     span.textContent = evento.target.textContent;
});

Sendo essa última a melhor forma de resolver o seu problema!

Qualquer coisa é só falar!

Grande abraço e bons estudos!

Isso aí. A solução apresentada pelo Gabriel é a melhor mesmo =)