JS: Calendar in the form of table is not showing because of error Uncaught SyntaxError: Unexpected t-CodePudding

Unexpected token (, when trying to access a table through DOM. I'm trying to show the calendar if it is a certain month of the year, but JS it's identifying my table elements. There are two possible errors:

Studio Code: Identifier expected. ts(1003)
Browser console: Uncaught SyntaxError: Unexpected token '('

 window.onload = getDate();
  function getDate() {
    let currentMonth = new Date().getMonth()   1;
    let date7 = new Date(7); 
    let date8 = new Date(August, 2022);
    let date9 = new Date(September, 2022);
    let date10 = 10;
    let date11 = 11;
    let date12 = 12;
    if (currentMonth == date7) {
      document.getElementById.("july_22").style.display="table";
    }
    else if (currentMonth == date8) {
      document.getElementById.("august_22").style.display="table";
    }
    else if (currentMonth == date9) {
      document.getElementById.("september_22").style.display="table";
    }
    else if (currentMonth == date10) {
      document.getElementById.("october_22").style.display="table";
    }
    else if (currentMonth == date11) {
      document.getElementById.("november_22").style.display="table";
    }
    else if (currentMonth == date12) {
      document.getElementById.("december_22").style.display="table";
    }
    }

 <table id="july_22" cols="4" rows="33" cellspacing="20px">
        <caption>July</caption>
        <thead>
            
            <tr>
                <th>Mon</th>
                <th>Tue</th>
                <th>Wed</th>
                <th>Thu</th>
                <th>Fri</th>
                <th>Sat</th>
                <th>Sun</th>
            </tr>
        
       </thead>

       <tbody>
        <tr>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td ></td>
            <td >1</td>
            <td >2</td>
        </tr>
        <tr>
            <td >3</td>
            <td >4</td>
            <td >5</td>
            <td >6</td>
            <td >7</td>
            <td >8</td>
            <td >9<br><p >Fasting Day</p></td> 
        </tr>
        <tr>
            <td >10</td>
            <td >11</td>
            <td >12</td>
            <td >13<br><p >Fasting Day</p></td> 
            <td >14</td>
            <td >15</td>
            <td >16</td>
        </tr>
        <tr>
            <td >17</td>
            <td >18</td>
            <td >19</td>
            <td >20</td>
            <td >21</td>
            <td >22<br><p >Ritual</p></td>
            <td >23<br><p >Fasting Day</p></td> 
        </tr>
        <tr>
            <td >24</td>
            <td >25</td>
            <td >26</td>
            <td >27</td>
            <td >28<br><p >Fasting Day</p></td> 
            <td >29</td>
            <td >30</td>
        </tr>
       </tbody>
   
       
    </table>

CodePudding user response：

Ypu have a dot after document.getElementById. You need to remove it like document.getElementById("july_22").style.display = "table";