Jacascript won’t continue

I want to do when I press a button, the script will change my HTML code to make it another page, but when I press another button after it the buttons don’t work and doing nothing… At the first click each button work and do his job, the second click non of the buttons work and all the script just stop working.

HTML:

<div id="innerHTML">
            &nbsp;
            <table align="center">
                <tr class="headOrgs">
                    <td align="left">
                        <button class="ttl btnOn" id="orgBtn">
                            ארגונים חברים
                        </button>
                    </td>
                    <td align="center">
                        <button class="ttl" id="whyBtn">
                            למה כדאי להצטרף
                        </button>
                    </td>
                    <td align="right">
                        <button class="ttl" id="joinBtn">
                            הצטרפות
                        </button>
                    </td>
                </tr>
                <tr>
                    <td colspan="3" align="right">
                        תיאור כללי מזה מועדון החברים וכל השטויות מסביב
                        <br>
                        חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
                        <br>
                        &nbsp;
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <img src="pics/org/gate5.png" class="orgLogo">
                    </td>
                    <td>
                        <img src="pics/org/upperfew.png" class="orgLogo">
                    </td>
                    <td>
                        <img src="pics/org/redheart.png" class="orgLogo">
                    </td>
                </tr>
                <tr align="center" class="orgNames">
                    <td>
                        שער 5
                    </td>
                    <td>
                        הקומץ העליון
                    </td>
                    <td>
                        הלב האדום
                    </td>
                </tr>
                <tr>
                    &nbsp;
                </tr>
                <tr align="center">
                    <td>
                        <img src="pics/org/redeast.png" class="orgLogo">
                    </td>
                </tr>
                <tr align="center" class="orgNames">
                    <td>
                        רד איסט
                    </td>
                </tr>
            </table>
        </div>
        <script src="js/members.js"></script>

JS:

let print = document.getElementById("innerHTML");
let btnOrg = document.getElementById("orgBtn");
let btnWhy = document.getElementById("whyBtn");
let btnJoin = document.getElementById("joinBtn");

btnOrg.addEventListener('click', function(){
    let printOrg = `
        <table align="center">
            <tr class="headOrgs">
                <td align="left">
                    <button class="ttl btnOn" id="orgBtn">
                        ארגונים חברים
                    </button>
                </td>
                <td align="center">
                    <button class="ttl" id="whyBtn">
                        למה כדאי להצטרף
                    </button>
                </td>
                <td align="right">
                    <button class="ttl" id="joinBtn">
                        הצטרפות
                    </button>
                </td>
            </tr>
            <tr>
                <td colspan="3" align="right">
                    תיאור כללי מזה מועדון החברים וכל השטויות מסביב
                    <br>
                    חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
                    <br>
                    &nbsp;
                </td>
            </tr>
            <tr align="center">
                <td>
                    <img src="pics/org/gate5.png" class="orgLogo">
                </td>
                <td>
                    <img src="pics/org/upperfew.png" class="orgLogo">
                </td>
                <td>
                    <img src="pics/org/redheart.png" class="orgLogo">
                </td>
            </tr>
            <tr align="center" class="orgNames">
                <td>
                    שער 5
                </td>
                <td>
                    הקומץ העליון
                </td>
                <td>
                    הלב האדום
                </td>
            </tr>
            <tr>
                &nbsp;
            </tr>
            <tr align="center">
                <td>
                    <img src="pics/org/redeast.png" class="orgLogo">
                </td>
            </tr>
            <tr align="center" class="orgNames">
                <td>
                    רד איסט
                </td>
            </tr>
        </table>
        `;
    print.innerHTML = printOrg;
})

btnWhy.addEventListener('click', function(){
    let printWhy = `
        &nbsp;
        <table align="center">
            <tr class="headOrgs">
                <td align="left">
                    <button class="ttl" id="orgBtn">
                        ארגונים חברים
                    </button>
                </td>
                <td align="center">
                    <button class="ttl btnOn" id="whyBtn">
                        למה כדאי להצטרף
                    </button>
                </td>
                <td align="right">
                    <button class="ttl" id="joinBtn">
                        הצטרפות
                    </button>
                </td>
            </tr>
            <tr>
                <td colspan="3" align="right" class="whyTxt">
                    • תיאור מרוחב
                    <br>
                    • ננסה להביא פה כמה שיותר דוגמאות
                    <br>
                    • אני סתם נסה לדחוף פה עוד משפט
                </td>
            </tr>
        </table>
        `;
    print.innerHTML = printWhy;
})

btnJoin.addEventListener('click', function(){
    let printJoin = `
        &nbsp;
        <table align="center">
            <tr class="headOrgs">
                <td align="left">
                    <button class="ttl" id="orgBtn">
                        ארגונים חברים
                    </button>
                </td>
                <td align="center">
                    <button class="ttl" id="whyBtn">
                        למה כדאי להצטרף
                    </button>
                </td>
                <td align="right">
                    <button class="ttl btnOn" id="joinBtn">
                        הצטרפות
                    </button>
                </td>
            </tr>
            <tr>
                <td colspan="3" align="right">
                    את האמת כרגע אין לי מושג מה אתה רוצה לרשום בטופס הרשמה אז תשלח לי כשיהיה לך
                    <br>
                    <br>
                    <button type="submit" class="btnJoin" id="joinBtn">שלח טופס</button>
                </td>
            </tr>
        </table>
        `;
    print.innerHTML = printJoin;
})

Leave a Comment