How to call and print <td> elements of a <table> script?

Asked

Viewed 61 times

1

I’m learning JS and I set out to do an exercise. The idea is to show a specific month’s calendar on the page, and, according to the current day, pick up and print the td with Index for the day and then color the cell in the table. Unhappiness I’m not getting if you want to call the value of td.

Follow the code (ask them to ignore the mess and possible bad practices in 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>

javascript html5 dom

  • Wesley, I don’t understand where the printing part comes in?

  • In Divs, for testing.

  • I think we’re not talking about the same "print" :) to print should have something like window.print(), that’s not what you mean by print?

  • I mean to show on the page, in this case I use Divs as it is done in the course of CEV. Apparently I am using the incorrect term for this practice.

1 answer

1


The problems are that you are using the point . in the names of the classes in the document.getElementsByClassName and also missing the index. For example, instead of:

document.getElementsByClassName(".resu")

Seria:

document.getElementsByClassName("resu")[0]

The [0] is the index of the first element that has the class.

Another thing that was missing was to take the cell text in:

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

To get the text from the cell above, you can use .textContent or .innerText:

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

Behold:

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

    Sam, many thanks for the clarification. Your correction returned exactly what I intended, now I can proceed with the exercise..

Browser other questions tagged javascript html5 dom

You are not signed in. Login or sign up in order to post.