Js queryselector dando elemento null

Bom fiz o front-end, resolvi me desafiar a criar uma funçao que trocasse os textos de acordo com o tema que fosse clicado no menu da ul, mas nao consigo chamar um elemento para o js, ja tentei o get elemnt for id, por tag, e o queryselector mas o sempre retorna o elemnto como null segue o codigo abaixo:

<ul class="nav2  botoes">
            <li> <i class="fa-brands fa-html5"></i> Html </li> 
            <li onclick="mudar()"> <i class="fa-brands fa-css3-alt"></i> Css</li> // aqui leva 
            <li> <i class="fa-brands fa-js"></i> Javascript </li>                pra a funçao 
            <li> <i class="fa-brands fa-node"></i> NodeJs </li>                 de trocar os 
            <li> <i class="fa-brands fa-react"></i> React </li>                  textos
        </ul>
    </nav>

    <div class="textos">

       <span id="texto1"> textoteste textoteste textoteste textoteste textoteste </span>

    </div>

// Javascript

var test = document.querySelector(“#texto1”);
console.log (test)

function mudar () { // vai ser uma funçao de trocar o texto exibido quando clicar num caractere

console chrome – null