Usando classList de maneira

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

por Wilton Ribeiro

| 127.9k xp | 57 posts

Olá eu tentei executar esse código mas deu errado, alguém me explica porquê não funciona?

<!DOCTYPE html>
<html>
    <head>
        <title>Stars</title>
        <meta charset="utf-8">

        <style>
            .star1{
                width: 200px;
                height: 100px;
                background-color: yellow;
                line-height: 100px;
                text-align: center;
                color: white;
                font-weight: bold;
                font-size: 1.5em;
            }
        </style>
    </head>

    <body id="sky">

    </body>

    <script>
        var sky = document.querySelector("#sky");
        var star = {
            siMesma: document.createElement("div"),
            suaClasse: this.siMesma.classList
        }
        star["suaClasse"].add("star1");
    sky.appendChild(star.siMesma);
    </script>
</html>

Comentários

Valeu pela dica Arthur, nem tinha percebido..., mas a parte que eu queria continua não funcionando.

2 respostas

por Artur Diniz Adam

| 100.4k xp | 155 posts

Alura Scuba Team

14/05/2018

Oi Wilton,

A funcão sky.appendChild está recebendo uma String "star.siMesma" como parâmetro e por isso nada acontece na tela. Essa função precisa receber o elemento star.siMesma que será inserido dentro do elemento sky. O código ficaria assim:

sky.appendChild(star.siMesma);

solução!

por Wilton Ribeiro

| 127.9k xp | 57 posts

15/05/2018

Descobri a causa do problema, ao invés de:

suaClasse: this.siMesma.classList

Eu teria que usar:

star.siMesma.classList.add("star1");

Por que o objeto classList sozinho não retorna nada ele precisa de um método para funcionar, o código funcionando fica assim:

<!DOCTYPE html>
<html>
    <head>
        <title>Stars</title>
        <meta charset="utf-8">

        <style>
            .star1{
                width: 200px;
                height: 100px;
                background-color: yellow;
                line-height: 100px;
                text-align: center;
                color: white;
                font-weight: bold;
                font-size: 1.5em;
            }
        </style>
    </head>

    <body id="sky">

    </body>

    <script>
        var sky = document.querySelector("#sky");
        var star = {
            siMesma: document.createElement("div"),
        }
        star.siMesma.classList.add("star1");
    sky.appendChild(star.siMesma);
    </script>
</html>