Function doesn't work properly inside an `if` statement javascript/jQuery

Question

I have a problem, while calling a function inside an if statement.

Function that doesn't work properly is drawRight() with 2 arguments that draws divs, text and other elements in a loop.

When I call it like that my website is just getting crashed and it looks like css wasn't applying.

    <div id="right">
        <script>
            $('.leftOption').click(function() {
                if(this.id == "option1") {
                    drawRight(3,5);
                }
            });
        </script>
    </div>

If I call it outside of the statement, everything is cool, but then I can't use statement if to call it or not. :(

    <div id="right">
        <script>
            $('.leftOption').click(function() {
                if(this.id == "option1") {
                }
            });
            drawRight(3,5);
        </script>
    </div>

drawRight() function

let drawRight = (fromID, toID) => {
                for(var r=fromID; r<=toID; r++) {
                    if(r % 2 != 0) {
                        //nieparzyste
                        document.write(`<div id="set${r}" class="rightOption rightOptionColor1">`);
                    } else {
                        document.write(`<div id="set${r}" class="rightOption rightOptionColor2">`);
                    }

                        document.write(`<div class="r1">`);
                                document.write(`<div class="garage">`);
                                    document.write(`<img class="garage_icon" src="../assets/images/icons/icon_garage.png"/>`);
                                    document.write(`<div id="garage_header">`);
                                            document.write(`<div class="garage_text">`);
                                                    document.write(`Garaż`);
                                            document.write(`</div>`);
                                            document.write(`<div class="garage_id">`);
                                                    document.write(`(${r})`);
                                            document.write(`</div>`);
                                    document.write(`</div>`);
                                document.write(`</div>`);
                                document.write(`<div id="button${r}" class="button">`);
                                        document.write(`<div class="button_border">`);
                                                document.write(`<div class="button_text">`);
                                                        document.write(`Wejdź`);
                                                document.write(`</div>`);
                                        document.write(`</div>`);
                                document.write(`</div>`);
                        document.write(`</div>`);

                        document.write(`<div class="r2">`);
                                document.write(`<div class="owner_header">`);
                                        document.write(`<img class="owner_icon" src="../assets/images/icons/person.png">`);
                                        document.write(`<div class="owner_text">`);
                                            document.write(`Właściciel`);
                                        document.write(`</div>`);
                                        document.write(`<div id="owner${r}" class="owner_nick info_text">`);
                                                document.write(``);
                                        document.write(`</div>`);
                                document.write(`</div>`);
                        document.write(`</div>`);

                        document.write(`<div class="r3">`);
                                document.write(`<div class="parking_header">`);
                                        document.write(`<img class="parking_icon" src="../assets/images/icons/p.png">`);
                                        document.write(`<div class="parking_text">`);
                                            document.write(`Ilość miejsc`);
                                        document.write(`</div>`);
                                        document.write(`<div id="parking${r}" class="parking_quantity info_text">`);
                                                document.write(`5`);
                                        document.write(`</div>`);
                                document.write(`</div>`);
                        document.write(`</div>`);

                        document.write(`<div class="r4">`);
                                document.write(`<div class="rIcons">`);
                                    document.write(`<img id="rOwned${r}" class="rOwned rIcon" src="../assets/images/icons/owned.png"/>`);
                                    document.write(`<img id="rShared${r}" class="rShared rIcon" src="../assets/images/icons/shared.png"/>`);
                                document.write(`</div>`);
                        document.write(`</div>`);

                    document.write(`</div>`);
                }
            }

Answer 1

You can give it a try;

this.id == option1

I am assuming that your this.id is number value and you are comparing it with a string.

PS. I don't know from where this option1 coming. Please share the source of option1 .