1

Estou aprendendo JS e me propus a fazer um exercício. A ideia é mostrar um calendário de um mês específico na página, e, de acordo com o dia atual, pegar e imprimir a td com indice referente ao dia e depois colorir a célula na table. Infelizmento não estou conseguindo se quer chamar o valor da td.

Segue o código (peço que ignorem a bagunça e possíveis más praticas no HTML):

        var agora = new Date()
        var hoje = agora.getDate()
        
        var hojeExato = hoje + 6 // Teoricamente serve para ignorar as <td> de dias da semana
        var diaMes = document.getElementsByTagName("td")[hojeExato]
        
        var res = document.getElementsByClassName(".resu")
        var teste = document.getElementsByClassName(".teste1")

        teste.innerText = `${diaMes}`

        res.innerHTML = `${diaMes}`
<body>
    <h1>Calendário de Setembro 2019 :)</h1>
    
    <table id="tabelaEstilo">
        <tr> 
            <td class="DOM">DOM</td> <td class="SEG">SEG</td> <td class="TER">TER</td> 
            <td class="QUA">QUA</td> <td class="QUI">QUI</td> <td class="SEX">SEX</td> <td class="SAB">SAB</td> 
        </tr>
        
        <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td>        </tr>
        <tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td>   </tr>
        <tr> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> </tr>
        <tr> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> </tr>
        <tr> <td>29</td> <td>30</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td>      </tr>
        <tr> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td>     </tr>
    </table>
    
    <div class="teste1">teste</div>
    <div class="resu">olá</div>


    <script>
        var agora = new Date()
        var hoje = agora.getDate()
        
        var hojeExato = hoje + 6 // Teoricamente serve para ignorar as <td> de dias da semana
        var diaMes = document.getElementsByTagName("td")[hojeExato]
        
        var res = document.getElementsByClassName(".resu")
        var teste = document.getElementsByClassName(".teste1")

        teste.innerText = `${diaMes}`

        res.innerHTML = `${diaMes}`

    </script>
    
</body>

4
  • wesley, não entendi onde entra a parte de imprimir? Commented 1/09/2019 às 20:02
  • Nas divs, para teste. Commented 1/09/2019 às 21:25
  • acho que não estamos falando do mesmo "imprimir" :) para imprimir deveria ter algo como window.print(), não é isso que vc quer dizer com imprimir? Commented 1/09/2019 às 21:28
  • Quero dizer para mostrar na página, neste caso eu uso divs como é feito no curso do CeV. Pelo visto estou usando o termo incorreto para esta pratica. Commented 1/09/2019 às 21:37

1 Resposta 1

1

Os problemas são que você está usando o ponto . nos nomes das classes nos document.getElementsByClassName e falta também o índice. Por exemplo, Em vez de:

document.getElementsByClassName(".resu")

Seria:

document.getElementsByClassName("resu")[0]

O [0] é o índice do primeiro elemento que possui a classe.

Outra coisa que faltou foi pegar o texto de célula em:

var diaMes = document.getElementsByTagName("td")[hojeExato]

Para pegar o texto da célula acima, você pode usar .textContent ou .innerText:

var diaMes = document.getElementsByTagName("td")[hojeExato].textContent

Veja:

var agora = new Date()
        var hoje = agora.getDate()
        var hojeExato = hoje + 6 // Teoricamente serve para ignorar as <td> de dias da semana
        var diaMes = document.getElementsByTagName("td")[hojeExato].textContent
        
        var res = document.getElementsByClassName("resu")[0]
        var teste = document.getElementsByClassName("teste1")[0]

        teste.innerText = `${diaMes}`

        res.innerHTML = `${diaMes}`
<body>
    <h1>Calendário de Setembro 2019 :)</h1>
    
    <table id="tabelaEstilo">
        <tr> 
            <td class="DOM">DOM</td> <td class="SEG">SEG</td> <td class="TER">TER</td> 
            <td class="QUA">QUA</td> <td class="QUI">QUI</td> <td class="SEX">SEX</td> <td class="SAB">SAB</td> 
        </tr>
        
        <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td>        </tr>
        <tr> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> <td>13</td> <td>14</td>   </tr>
        <tr> <td>15</td> <td>16</td> <td>17</td> <td>18</td> <td>19</td> <td>20</td> <td>21</td> </tr>
        <tr> <td>22</td> <td>23</td> <td>24</td> <td>25</td> <td>26</td> <td>27</td> <td>28</td> </tr>
        <tr> <td>29</td> <td>30</td> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td>      </tr>
        <tr> <td>6</td> <td>7</td> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td>     </tr>
    </table>
    
    <div class="teste1">teste</div>
    <div class="resu">olá</div>

 
</body>

1
  • 1
    Sam, muitissímo obrigado pelo esclarecimento. Sua correção retornou exatamente o que eu pretendia, agora posso prosseguir com o exercício. Todo sucesso para você. Commented 1/09/2019 às 21:40

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .