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 working 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">
<table align="center">
<tr >
<td align="left">
<button id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" >
</td>
<td>
<img src="pics/org/upperfew.png" >
</td>
<td>
<img src="pics/org/redheart.png" >
</td>
</tr>
<tr align="center" >
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" >
</td>
</tr>
<tr align="center" >
<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 >
<td align="left">
<button id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" >
</td>
<td>
<img src="pics/org/upperfew.png" >
</td>
<td>
<img src="pics/org/redheart.png" >
</td>
</tr>
<tr align="center" >
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" >
</td>
</tr>
<tr align="center" >
<td>
רד איסט
</td>
</tr>
</table>
`;
print.innerHTML = printOrg;
})
btnWhy.addEventListener('click', function(){
let printWhy = `
<table align="center">
<tr >
<td align="left">
<button id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right" >
• תיאור מרוחב
<br>
• ננסה להביא פה כמה שיותר דוגמאות
<br>
• אני סתם נסה לדחוף פה עוד משפט
</td>
</tr>
</table>
`;
print.innerHTML = printWhy;
})
btnJoin.addEventListener('click', function(){
let printJoin = `
<table align="center">
<tr >
<td align="left">
<button id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
את האמת כרגע אין לי מושג מה אתה רוצה לרשום בטופס הרשמה אז תשלח לי כשיהיה לך
<br>
<br>
<button type="submit" id="joinBtn">שלח טופס</button>
</td>
</tr>
</table>
`;
print.innerHTML = printJoin;
})
CodePudding user response：
Hi,
here the problem is when you set innerHtml = your new html the let btnOrg = document.getElementById("orgBtn"); are now returning nothing, they point to an element of the page that has been deleted and not to an id,
here is the solution:
<div id="innerHTML">
<table align="center" >
<tr >
<td align="left">
<button id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr id="joinTable" style="display: none;"></tr>
<td colspan="3" align="right">
את האמת כרגע אין לי מושג מה אתה רוצה לרשום בטופס הרשמה אז תשלח לי כשיהיה לך
<br>
<br>
<button type="submit" id="joinBtn">שלח טופס</button>
</td>
</tr>
<tr id="whyTable" style="display: none;"></trid>
<td colspan="3" align="right" >
• תיאור מרוחב
<br>
• ננסה להביא פה כמה שיותר דוגמאות
<br>
• אני סתם נסה לדחוף פה עוד משפט
</td>
</tr>
<tr id="orgTable" style="display: table;"></tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" >
</td>
<td>
<img src="pics/org/upperfew.png" >
</td>
<td>
<img src="pics/org/redheart.png" >
</td>
</tr>
<tr align="center" >
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" >
</td>
</tr>
<tr align="center" >
<td>
רד איסט
</td>
</tr>
</table>
</div>
JS:
let btnOrg = document.getElementById("orgBtn");
let orgTable = document.getElementById("orgTable");
let btnWhy = document.getElementById("whyBtn");
let whyTable = document.getElementById("whyTable");
let btnJoin = document.getElementById("joinBtn");
let joinTable = document.getElementById("joinTable");
btnOrg.addEventListener('click', function(){
console.log("pressed")
orgTable.style.display = "table"
whyTable.style.display = "none"
joinTable.style.display = "none"
})
btnWhy.addEventListener('click', function(){
console.log("pressed")
orgTable.style.display = "none"
whyTable.style.display = "table"
joinTable.style.display = "none"
})
btnJoin.addEventListener('click', function(){
console.log("pressed")
orgTable.style.display = "none"
whyTable.style.display = "none"
joinTable.style.display = "table"
})
i changed the code you now in the HTML there is a "header" like part and the buttons are never deleted thats the content who change !
CodePudding user response：
Attach the event to the body then on click check the id
document.body.addEventListener('click', e => {
if (e.target.nodeName == "BUTTON" && !e.target.id) return
let theId = e.target.id;
if (theId == "orgBtn")
print.innerHTML = printOrg
else if (theId == "whyBtn")
print.innerHTML = printWhy
else if (theId == "whyBtn")
print.innerHTML = printJoin
})
let print = document.getElementById("innerHTML");
let printOrg = `
<table align="center">
<tr >
<td align="left">
<button id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" >
</td>
<td>
<img src="pics/org/upperfew.png" >
</td>
<td>
<img src="pics/org/redheart.png" >
</td>
</tr>
<tr align="center" >
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" >
</td>
</tr>
<tr align="center" >
<td>
רד איסט
</td>
</tr>
</table>
`;
let printWhy = `
<table align="center">
<tr >
<td align="left">
<button id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right" >
• תיאור מרוחב
<br>
• ננסה להביא פה כמה שיותר דוגמאות
<br>
• אני סתם נסה לדחוף פה עוד משפט
</td>
</tr>
</table>
`;
let printJoin = `
<table align="center">
<tr >
<td align="left">
<button id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
את האמת כרגע אין לי מושג מה אתה רוצה לרשום בטופס הרשמה אז תשלח לי כשיהיה לך
<br>
<br>
<button type="submit" id="joinBtn">שלח טופס</button>
</td>
</tr>
</table>
`;<div id="innerHTML">
<table align="center">
<tr >
<td align="left">
<button id="orgBtn">
ארגונים חברים
</button>
</td>
<td align="center">
<button id="whyBtn">
למה כדאי להצטרף
</button>
</td>
<td align="right">
<button id="joinBtn">
הצטרפות
</button>
</td>
</tr>
<tr>
<td colspan="3" align="right">
תיאור כללי מזה מועדון החברים וכל השטויות מסביב
<br>
חשוב לציין שאני מודע לזה שהארגונים שמופיעים פה לא קיימים יותר/לא נמצאים בהתארגנות, אבל זה רק לדוגמא
<br>
</td>
</tr>
<tr align="center">
<td>
<img src="pics/org/gate5.png" >
</td>
<td>
<img src="pics/org/upperfew.png" >
</td>
<td>
<img src="pics/org/redheart.png" >
</td>
</tr>
<tr align="center" >
<td>
שער 5
</td>
<td>
הקומץ העליון
</td>
<td>
הלב האדום
</td>
</tr>
<tr>
</tr>
<tr align="center">
<td>
<img src="pics/org/redeast.png" >
</td>
</tr>
<tr align="center" >
<td>
רד איסט
</td>
</tr>
</table>
</div>