עזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...

[איציק דייטש]

כרגע יצרתי כפתור שמחליף את תמונת הרקע אבל רק פעם אחת, אני רוצה שכל פעם הוא יחליף רקע פעם זה ופעם זה
זה הקוד הנוכחי

var backgroundImg = document.querySelector(".welcome");

var bottun = document.getElementById('change_bg');

bottun.addEventListener('click', changeBackground);

function changeBackground(){
    backgroundImg.style.backgroundImage = "url(../images/img2.jpg)";
}

@מוטי-אורן אולי תעזור לי כרגיל?!

[נ נח]

@איציק-דייטש אולי תנסה

var backgroundImg = document.getElementByClassName('welcome');

לא הבנתי מה זה ה welcome, זה התמונה?

:::

אגב כותבים button ולא bottun

:::

[איציק דייטש]

@נ-נח אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:

לא הבנתי מה זה ה welcome, זה התמונה?

זה קלאס לתמונה...

@נ-נח אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:

אגב כותבים button ולא bottun

כן, כבר ערכתי מקודם

@נ-נח אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:

@איציק-דייטש אולי תנסה

var backgroundImg = document.getElementByClassName('welcome');

לא זה הבעיה, אני מחפש דרך שזה יחזור על עצמו... ולא פעם אחת שאני מבזבז את הכפתור, ת'מבין?

[נ נח]

@איציק-דייטש אולי זה?

var button = document.getElementById('change_bg');
button.onclick = function () { $('.welcome').css('backgroundImage', 'url(../images/img2.jpg)') };

[איציק דייטש]

@נ-נח איפה אני אמור לשים את זה בדיוק, אני קצת טיפש
הבאת את זה מגוגל? או שאתה מתמצא ב js?

[נ נח]

@איציק-דייטש איפה ששמת את הקוד שלך
חצי גוגל חצי מתמצא...

[איציק דייטש]

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

[נ נח]

@איציק-דייטש מחילה רק עכשיו הבנתי את השאלה..
זה אמור להיות משהו כזה:

var backgroundImg = document.querySelector(".welcome");
var button = document.getElementById('change_bg');
button.addEventListener('click', changeBackground);
function changeBackground(){
    if (backgroundImg.style.backgroundImage === "url(../images/img2.jpg)") {
        backgroundImg.style.backgroundImage = "url(התמונה הראשונה)";
    } else {
    backgroundImg.style.backgroundImage = "url(../images/img2.jpg)"
}};

[איציק דייטש]

@נ-נח עדיין מחליף רק פעם אחת, נראלי אני מתייאש עד ש @מוטי-אורן או @chv יגיעו...

[chv]

@איציק-דייטש הבעיה היא לכאורה שאתה מסתמך על backgroundImg.style.backgroundImage - וזה בכלל תמיד יחזיר סטרינג ריק, כל עוד אין לאלמנט הנבחר תכונת style.
כי ככה עובד element.style. (זה מביא רק את הCSS שהוצהרו בתור תכונת style של אלמנטים קיימים ב-HTML. וכמו שתראה בהסבר בתיעוד כאן. תקרא)

מה שכן צריך לעשות זה -
הכי מומלץ כמובן לעבוד במקרה כזה עם Jquery שבתוך רגע אתה מקבל את הערך CSS של האלמנט, ובתוך רגע משנה אותו. ככה מקבלים CSS של אלמנט ב-Jquery. לדוגמא קבלת הרקע של ה-body:

$( 'body' ).css( 'backgroundImage' )

הבעיה שלנו שכיוון שהערך של background-image הוא עם סוגריים + ערך, הפלט שיצא לנו מהשאלה הזו יהיה עם לוכסנים ושאר מרעין בישין -

"url(\"https://domain.com/images/sample.jpg\")"

אז אפשר להשתמש ברגקס כדי למחוק אותן, כבר בשלב שמקבלים את הCSS. ככה (מכאן) -

$( 'body' ).css( 'backgroundImage' ).replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')

שורה כזו תחזיר לנו רק את ה-URL של התמונה ברקע.

עכשיו הרי גם אפשר להשתמש ב-Jquery כדי להגדיר את הCSS. כלומר לשנות את התמונה (לא רק לקבל את המידע):

$( 'body' ).css( 'backgroundImage', 'url(https://domain.com/images/secondPicture.jpg)' )

יוצא שפונקציה להחליף תמונה ב-Jquery תהיה ככה בערך:

function changebackground() {
    let backelement = $( 'body' ).css( 'backgroundImage' ).replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
    if (backelement == 'https://domain.com/images/sample.jpg') {
        $( 'body' ).css( 'backgroundImage', 'url(https://domain.com/images/secondPicture.jpg)' )
    }
    if (backelement == 'https://domain.com/images/secondPicture.jpg') {
        $( 'body' ).css( 'backgroundImage', 'url(https://domain.com/images/sample.jpg)' )
    }
}

---

אוקיי כל זה עם Jquery. מה אם אתה לא רוצה לעבוד עם זה? (אין באמת עניין. זה רק מקל את החיים לעבוד עם Jquery)
כדי לקבל את ה-style האמיתי הנוכחי (שכולל גם CSS שלא כתכונת style) תצטרך לקבל דרך פונקצית window.getComputedStyle (תיעוד) ככה בערך זה על הרקע של ה-body:

window.getComputedStyle(document.body).backgroundImage

כאשר גם עליו נצטרך להריץ סידור טקסטואלי על ידי רגקס.

(window.getComputedStyle(document.body).backgroundImage).replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')

הבעיה שה-window.getComputedStyle הוא רק מה שנקרא 'גטר' הוא לא 'סטר' הוא לא יכול להגדיר דברים, רק לקבל.
אז כדי להגדיר את ה-CSS באמצעות JS צריך פשוט לפנות ישירות לאלמנט -

document.body.style.backgroundImage = 'url(https://domain.com/images/sample.jpg)'

כך שפונקציה להחלפת תמונת רקע ב-JS טהורה תיראה בערך כך:

function changebackground() {
    let backelement = (window.getComputedStyle(document.body).backgroundImage).replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
    if (backelement == 'https://domain.com/images/sample.jpg') {
        document.body.style.backgroundImage = 'url(https://domain.com/images/secondPicture.jpg)'
    }
    if (backelement == 'https://domain.com/images/secondPicture.jpg') {
        document.body.style.backgroundImage = 'url(https://domain.com/images/sample.jpg)'
    }
}

עוד שאלות?

[נ נח]

@chv אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:

עוד שאלות?

יש לי שאלה - למה שמת שני if במקום if else?
יותר קצר

function changebackground() {
    let backelement = $( 'body' ).css( 'backgroundImage' ).replace(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')
    if (backelement == 'https://domain.com/images/sample.jpg') {
        $( 'body' ).css( 'backgroundImage', 'url(https://domain.com/images/secondPicture.jpg)' )
    }
    else {
        $( 'body' ).css( 'backgroundImage', 'url(https://domain.com/images/sample.jpg)' )
    }
}

[chv]

@נ-נח אין סיבה. אפשר גם if else..

[איציק דייטש]

@chv קודם כל...

תודה רבה!!

שנית, למה אני לא רוצה להשתמש ב jquery, כי אנחנו (בקורס) לא למדנו את זה, אז אני רוצה להיצמד ללימודים
ולכן אני גם לא מרוצה מהאחרון שנתת לי
חוצמיזה שאני לא רואה איך מפעילים את הפונקציה ע"י הכפתור
שוב, תודה רבה!!

[chv]

@איציק-דייטש אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:

אני גם לא מרוצה מהאחרון שנתת לי

אבל הוא לא Jquery

אני לא רואה איך מפעילים את הפונקציה ע"י הכפתור

כמו שעשית - על ידי listener
או פשוט בתכונה באלמנט של הכפתור - "()onclick="changebackground

[איציק דייטש]

@chv מה זה???

(/.*\s?url\([\'\"]?/, '').replace(/[\'\"]?\).*/, '')

אני לא אומר שזה jquery, אני רק אומר שאני לא מכיר את זה מהלימודים

[chv]

@איציק-דייטש אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:

מה זה???

כמו שכתבתי - זה רגקס regex - קיצור של regular expression.
זו דרך לנתח, לשנות ולסדר טקסט על ידי תוכנה על פי כללים טקסטואליים.
https://גוגל-בפורומים.tk/#gsc.tab=0&gsc.q=רגקס

אני לא מכיר את זה מהלימודים

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

[מוטי אורן]

@chv למה שהוא לא יעשה משהו כזה? (זה אותו רעיון כמו ש @נ-נח הביא, אבל עם פיתרון לבעיה שהזכרת)

var backgroundImg = document.getElementsByClassName('welcome')[0];
var button = document.getElementById('change_bg');
var whichImage = 1;
button.addEventListener('click', changeBackground);
function changeBackground() {
  if (whichImage === 1) {
    backgroundImg.style.backgroundImage = 'url(התמונה השניה)';
    whichImage = 2;
  } else {
    backgroundImg.style.backgroundImage = 'url(התמונה הראשונה)';
    whichImage = 1
  }
}

[chv]

@מוטי-אורן צודק.

אתה אומר - מה אני צריך לדעת איזו תמונה נמצאת שם ברקע עכשיו. זה לא משנה - העיקר להכניס תמונה לרקע (כי היוזר לחץ על הכפתור)
יותר נכון - אין צורך כנראה לבדוק מה התמונת רקע בהתחלה כי אנחנו כנראה כבר יודעים את זה. מי שכותב את האתר.

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

[מוטי אורן]

@chv אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:

אנחנו כנראה כבר יודעים את זה

בדיוק!!

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

[איציק דייטש]

@chv @מוטי-אורן וואו, אני נדהם כל פעם מהצורה שבה אתם מסבירים, תודה רבה!!!!

@chv אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:

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

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

@מוטי-אורן אמר בעזרה | יצירת כפתור שתחליף את הרקע כל פעם לרקע האחר...:

@איציק-דייטש שים לב להסבר: אם וכאשר היית כותב את הסקריפ...

תודה רבה!!

---

אוקיי, תוך כדי כתיבת התגובה, בדקתי את מה ש @מוטי-אורן הביא ... ו...

כל הכבוד!!

תודה רבה!!