בקשת מידע | כפתור שבלחיצה יפעיל קוד html

[אבי_770]

סליחה על הבורות, אבל איך אני עושה באתר שלי כפתור שבלחיצה יפעיל קוד html?
אני יודע שצריך לעשות button onclick לפונקציה בגאוה סקריפט, אבל מה אני כותב בפונקציה בשביל שיעשה משהו ב html?

[צדיק תמים]

@אבי_770 אתה צריך לכתוב איזה 'משהו' אתה רוצה שהקוד ג'אוהסקריפט ישנה ב-html
אלא אם כן אתה מצפה שיעבירו לך פה סדרת שיעורים בג'אוהסקריפט
ואגב לא חייבים להגדיר פונקציה בוואן-קליק בhtml עצמו, אפשר פשוט להוסיף קלאס/id, ולהוסיף לו אירוע בקוד js

[יוסי רחמים]

@אבי_770

<button onclick="hello()">hello world!</button>
<script>
function hello(){//כאן מגדירים את פונקציית hello()
alert("hello world!")//כאן כותבים מה עושים בפונקצייה הזאת
}//כאן סוגרים את הפונקצייה
</script>

alert.html
בהצלחה

[מוטי אורן]

@יוסי-רחמים להבנתי הדלה הוא התכוון למניפולציות על ה DOM (אם כי אני לא בטוח)..

@אבי_770 אולי זה יכול לעזור לך

[אבי_770]

@יוסי-רחמים אני לא רוצה להפעיל משהו ב javascript, אני רוצה שהפונקציה תיצור ארוע חדש ב html.
אני רוצה שבלחיצה על הכפתור יציג div חדש יכתוב בפונקציה ויציג אותו

[אבי_770]

בעקרון, מצאתי את זה:

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

אבל לעא ה בנתי איך אנ י עושה שזה יפעיל אותו על ידי לחיצה על כפתור, ניסתי לעשות:

<button onclick="demo">hello world!</button>

אבל זה לא עובד, הכפתור לא מציג את הקוד ב javascript.

ושאני עושה:

<p id="demo"></p>

זה עובד, למה?

[יוסי רחמים]

@אבי_770
אם אתה רוצה ליצור DIV חדש
אז זה הקוד:

  document.body.innerHTML += '<div class="css" id="id"></div>';

אתה יכול לשנות את הDIV לזה:
זה מה שבעצם רצית לעשות
document.body.innerHTML += '<p>hello world</p>';
כדי להכניס פונקצייה לתוך כפתור עם מה שאתה הבאת:

<button onclick="demo()">hello world!</button>
<script>
function demo(){
document.getElementById("demo").innerHTML = "Hello World!";
}
</script>
<p id="demo"></p>

מה שאתה בעצם עשית בקוד הזה זה שהוא פשוט מכניס תוכן לתוך הטקסט
ושים לב שכשאתה קורא לפונקציה חייבים אחריה ()
לדוגמא:
demo
אז עושים ככה:
demo()
בגלל שאני חפרתי אני יתן לך את הקוד:

<button onclick=" document.body.innerHTML += '<p>hello world</p>';">hello world</button>

ואם אתה רוצה שיהיה לP שנוצר ID אז זה הקוד:

<button onclick="demo()">hello world</button>
<script>
function demo(){
document.body.innerHTML += '<p id="demo">hello world</p>';
}
</script>

בהצלחה

[צדיק תמים]

@אבי_770 לא הבנת איך זה פועל.
השורה הזאת:

document.getElementById("demo").innerHTML = "Hello World!";

בעצם מחפשת אלמנט עם ID בשם "demo"' , ומחליפה את התוכן שלו בקוד ה-HTML שאת מכניס, שבמקרה שלך זה סך הכל המילים '!Hello World'.
אבל כדי שזה יקרה רק במקרה מסוים - צריך לעשות כפתור.
אלא שבוואן-קליק צריך להגדיר את השם של הפונקציה שרוצים להפעיל, לא את השם של האלמנט שאותו הפונקציה משנה. (מה גם שבקוד שצירפת לא קיימת בכלל שום פונקציה).
פונקציה זה בעצם רכיב קוד מבודד, שעד שלא תגיד לו לרוץ - הוא לא יפעל.
ואתה מגדיר בHTML של הכפתור, שפעולת קליק עליו תריץ את הקוד שבפונקציה.
כלומר כזה דבר:

<p id="demo"></p>
<button onclick="demoFunc()">hello world!</button>
<script>
function demoFunc (){
        document.getElementById("demo").innerHTML = "Hello World!";
        }
</script>

וכמו שכתבתי כבר קודם, אין חובה לעשות את השינוי בHTML עצמו - אפשר לעשות סקריפט שמה שהוא עושה זה "מאזין" לקליק.
ואגב אם אתה מחפש משהו נקודתי ולא ללמוד את השפה, ייתכן שיהיה לך יותר קל לעשות את זה ב-jQuery;
המאזין:
https://internet-israel.com/מדריכים/jquery/jquery-events-אירועים/#:~:text=עם id שונים.-,ON,-על מנת להבין
הוספת, החלפת טקסט/HTML לאלמנט וכדומה:
https://internet-israel.com/מדריכים/jquery/jquery-שינויים-ב-html/#:~:text=html שיש בו.-,פונקצית APPEND,-פונקצית append היא
נ.ב. אם אתה עובד על HTML נקי (ולא על פטפורמה מוכנה כמו למשל Nodebb או מדיה ויקי - שבשניהם כבר מוטמעת הספריה jQuery) אתה חייב להטמיע את הספריה כדי שהקודים שמבוססים עליה יעבדו.

[יוסי רחמים]

@צדיק-תמים אני עשיתי שהוא פשוט יוצר יותר קצר וקל אבל איך שרוצים

[צדיק תמים]

@אבי_770 שים לב לעריכה שעשיתי - הפעלת פונקציה (בדרך כלל, למעט פונקציות כמו טיימר ועוד) היא על ידי שם הפונקציה וסוגריים פותחים וסוגרים אחריה.
כלומר ככה:

<button onclick="demoFunc()">hello world!</button>

ולא ככה:

<button onclick="demoFunc">hello world!</button>