קוד JS אמור ליצור אלמט לתוך HTML ולא עובד לי

ek0583232948

אני אפי' לא מתחיל ...
לומד מתוך חוברת של ברזיק
יש קוד JS :

let header = document.getElementById('myHeader');
header.innerHTML = 'Hello world';

אמור ליצור אלמנט לתוך קובץ HTML

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
</head>
<body>
 <!-- HTML elements will be here -->
 <script src="./source.js"></script>
</body>
</html>
<body>
    <!-- HTML elements will be here -->
    <h1 id="myHeader">Headline</h1>
</body>

אני פותח את הקובץ בדפדפן , וזה מציג לי את הכותרת Headline
במקום להציג לי hllow world
שזה מה שרשום בספר שאמור להציג
השם של קובץ הJS הוא בדיוק כפי שמופיע בHTML
אשמח למידע למה זה לא עובד לי

chagold

עובד מצוייין,
https://jsfiddle.net/0srxau9j/

אולי לא שמת את הJS ב~~תיקיה~~ בקובץ נפרד כמו שצריך,
תפתח את הקונסול (בכרום זה בהגדרות>כלים נוספים>כלים עבור מפתחים) ותראה אם יש שגיאה

ek0583232948

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
</head>
<body>
 <!-- HTML elements will be here -->
 <script src="./source.js"></script>
</body>
</html>
<body>
    <!-- HTML elements will be here -->
    <h1 id="myHeader">Headline</h1>
</body>

let header = document.getElementById('myHeader');
header.innerHTML = 'Hello world';

ek0583232948

פוסט זה נמחק!

ek0583232948

פוסט זה נמחק!

ek0583232948

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
</head>
<body>
 <!-- HTML elements will be here -->
 <script src="./source.js"></script>
</body>
</html>
<body>
    <!-- HTML elements will be here -->
    <h1 id="myHeader">Headline</h1>
</body>

let header = document.getElementById('myHeader');
header.innerHTML = 'Hello world';

Whenever

זה בגלל שיש לך שתי body וגם סגרת HTML לפני הזמן
הנה מתוקן

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
</head>

<body>
    <!-- HTML elements will be here -->
    <h1 id="myHeader">Headline</h1>
    <script src="./source.js"></script>
</body>
 </html>

אל תתייאש! אם תתמיד תהיה מומחה גדול:)

ek0583232948

@Whenever
תודה,

@Whenever כתב בקוד JS אמור ליצור אלמט לתוך HTML ולא עובד לי:

זה בגלל שיש לך שתי body

ליתר דיוק, הבעיה היא שהאלמנט של הכותרת אמור להיות לפני הסקריפט
כפי שאתה תיקנת, ושוב תודה

dovid

@ek0583232948 מי שלומד תכנות הוא מבחינתי יותר ממתחיל,
והוא מתכנת מהסוג שהכי כיף להתכתב איתו בפורום.
(כי בשונה מהרבה שואלים, הוא רוצה להצליח בלימוד ולא בתוצאה ספציפית כל שהיא).

Whenever

@Whenever כתב בקוד JS אמור ליצור אלמט לתוך HTML ולא עובד לי:

זה בגלל שיש לך שתי body

ליתר דיוק, הבעיה היא שהאלמנט של הכותרת אמור להיות לפני הסקריפט
כפי שאתה תיקנת, ושוב תודה

@ek0583232948 צודק, זה היה בגלל מיקום הסקריפט.

YK

@Whenever re רק להוסיף הסבר שלמדתי בזכות הדיון כאן:
התנסיתי עם הקוד הראשוני שהביא @ek0583232948 וראיתי שהקוד עובד כמו שהבאת כאן. אז התקשיתי להבין למה זה עבד באמת.

ההסבר להבנתי הוא הוא שכאשר מריצים את הקוד הנ"ל בעורך קוד האון ליין הוא מתעלם מהשורה של:

<script src="./source.js"></script>

כי אין אצלו נתיב כזה. ולכן, ה סביבת הרצה טוענת את הדף עם הקוד של ה HTML ורק אח"כ הוא מריץ את הסקריפט ולכן זה תקין [וזה שקול לתיקון שעשיתם, שהסקריפט ממוקם במקומו אחרי התיקון].
בבקשה תקנו אותי אם אני טועה

[הגעתי להבנה הזו כי שמרתי את הקוד המקורי ה'לא נכון' כקובץ HTML ואח"כ בקונסול [F12 ] הרצתי את 2 השורת של ה SJ וזה כן עבד תקין. ונסיתי להבין למה - וזו המסקנא שהגעתי אליה.

מקווה שמובן ההסבר ו'ההוכחה' [הסבר למתחילים כמוני].

אני מודה [תרתי משמע ] שזה עזר לי להבין טוב יותר את העניין
תודה לשניכם.
ובהצלחה.

Whenever

@YK להבנתי זה קורה כי הJS מחפש לשנות את ה ID של myheader וזה עוד לא נמצא.
הHTML עולה לנו לפי סדר הדף. כשהסקריפט רץ הוא לא מצא את ה myheader כי עוד לא היה קיים בדף.
ושמניחים את הסקריפט למטה הוא מחפש בדף את ה ID, מוצא אותו ומחליף אותו.

יגידו המומחים בJS אבל אני מתאר לעצמי שאפשר לכתוב את ה JS בצורה אחרת שיעבוד גם מלמעלה.

dovid

@Whenever זו אכן הסיבה.
בשביל לשים למעלה שיעבוד צריך לגרום לקוד לחכות לטעינת הדף במלואו,
פעם עשו זאת על ידי האזנה לאירוע של טעינת כל הדף,
היום יש כמה שיטות אחרות פשוטות כמו defer, ראה פה
https://stackoverflow.com/a/2920207/1271037.

Whenever

@dovid תודה
ניסיתי להכניס defer לפני ה src בscript וזה עובד גם מה HEADER.

שכוייח לכולם על השקלא וטריא, זה מאוד מחדד את הדברים.

תחומים - פורום חרדי מקצועי

קוד JS אמור ליצור אלמט לתוך HTML ולא עובד לי