מה לא טוב בקוד? (js)

[UU]

הid באמצע הbody והסקריפט בא בסופו של הbody

אם זה מתבצע פעם אחת - הקוד עובד
מאמינה שאם תוריד את השאלה על המשתנה mouseDown - הקוד יקרה 10 פעמים בדיוק
לא הבנתי למה לחלק לפולסים בודדים, שירד ישירות את המקסימום או שירד בכך לחיצה כמה בודדים
בשביל שירד עם הפסקות כדאי להתשמש בפונקציות של טיימר ולא בלולאות

 

[ש.ב.ח.]

אם זה מתבצע פעם אחת - הקוד עובד
מאמינה שאם תוריד את השאלה על המשתנה mouseDown - הקוד יקרה 10 פעמים בדיוק
לא הבנתי למה לחלק לפולסים בודדים, שירד ישירות את המקסימום או שירד בכך לחיצה כמה בודדים
בשביל שירד עם הפסקות כדאי להתשמש בפונקציות של טיימר ולא בלולאות

ברו שאם הייתי רוצה שהחלון יגלל 1000 פיקסלים הייתי נותן אותו ביחידה אחת אבל אני מעוניין בכפתור שיגלול את החלון מטה (וכפתור אחר מעלה) לפי הלחיצה עליו - כל עוד המשתמש לוחץ החלון יגלל (ביחידות קטנות כמובן כמו 10/20 פיקסלים) כשירים המשתמש אצבעו החלון יעמוד.
בקיצור אני מנסה לתת תחליף ל scroll Bar הרגיל של הדפדפן.

 

[UU]

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

var mouseDown;

document.getElementById("down").onmouseup = function() {
clearInterval(mouseDown);
}
document.getElementById("down").onmousedown =
function(){
doMouseDown()
mouseDown = setInterval(doMouseDown(); }, 500);
}
var doMouseDown = function(){
window.scrollBy({top: 10, left: 0, behavior: 'smooth' });
}

 

[ש.ב.ח.]

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

אז ככה, ראשית תודה אנו מתקדמים לתוצאה...
הקוד שכתב קצת מבוגבאג... תיקנתי אות כך (וכמובן בדקתי שזה עובד):
This user does not have permission to use the HTML BB code.

רק בעיה קטנה נותרה וצריך שתעזרו לי איך לפתור אותה.
ברגע שהעליית העכבר לא נעשה על האלמנט החלון ימשיך לרוץ עד הסוף, הסיבה פשוטה, על מנת לעצור את הטיימר יש לבצע את עליית העכבר על האלמנט (מה שחייב אותי להשתמש בcss ע"מ שהאלמנט יהיה Sticky).

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

 

[UU]

מחליפים
document.getElementById("down").onmouseup
ב:
document.getElementByTagName("body").onmouseup
בהצלחה!

 

[ש.ב.ח.]

מחליפים
document.getElementById("down").onmouseup
ב:
document.getElementByTagName("body").onmouseup
בהצלחה!

כל עוד המשתמש ירים את העכבר על איזור ריק במסך מה טוב, הבעיה שהוא יכול להרים את העכבר על אלמנט על יד הdown במקרה כזה הטיימר לא יפסיק.

איך מגדירים הרמת עכבר לא משנה איפה (בהתייחסות לעכבר בלבד) האם יש כזו אפשרות?

 

[mordy]

איך מגדירים הרמת עכבר לא משנה איפה (בהתייחסות לעכבר בלבד) האם יש כזו אפשרות?

window.onmouseup

 

[ש.ב.ח.]

window.onmouseup

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

מי ידע למצוא את הקוד הנכון?

 

[mordy]

אולי במקום window תנסו document או document.body

 

[ש.ב.ח.]

אולי במקום window תנסו document או document.body

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

ועכשיו שני פרטים שנותרו לי לברר:
1. איך גורמים לאייקון להיות בלתי נגרר?

2. למה כשקורה כזה מקרה לחיצה סתם על המסך וכמובן גם הרמת העכבר לא עוצרת את הגלילה, הרי נעשה כאן mouseup?

*כמו למשל המצב שלי שאני לחצתי על אייקון מסויים (הוא #down) ולאחר מכן אני גרור מעט עם העכבר, בעצם הוא גורר את האייקון ולכל מקום במסך יש אין כניסה - כלומר, אי אפשר לגרור אותו לשם.

עזרתכם בבקשה....

 

[mordy]

@ש.ב.ח.
אני לא ליד מחשב, אבל כמדומני שאם האלמנט down# יהיה button זה יעבוד לך

 

[אלוווופה]

מקפיצה,

s976, mordy, ש.ב.ח., UU​

מישהו יכול להגיד לי מה לא טוב בקוד (או אם צריך להוסיף משהו):
מה שיוצא לי:

 

[אלעזר 1]

מקפיצה,

s976, mordy, ש.ב.ח., UU​

מישהו יכול להגיד לי מה לא טוב בקוד (או אם צריך להוסיף משהו):
מה שיוצא לי:

הסקריפט נמצא בקובץ נפרד מה-HTML, יקל עלי לבדוק אותו אם תצרפו אותו כטקסט

 

[אלוווופה]

אלעזר 1 צירפתי.​

תודה רבה!

 

[אלעזר 1]

אלעזר 1 צירפתי.​

תודה רבה!

צירפתם כאן תמונה של קובץ ה-HTML שכבר העליתם בהודעה הקודמת

 

[אלעזר 1]

הקוד עצמו עובד מצוין אבל בגלל שהאלמנטים ב-HTML לא מכילים תוכן ולא הוגדר להם height ו-width הם אינם מופיעים בתצוגה

ספוילר: טיפ

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

(function(){
    for (let i = 0; i < 8; i++) {
        let row = document.createElement('div')
        row.classList.add('row')
        for (let j = 0; j < 8; j++) {
            let square = document.createElement('div')
            square.classList.add('square')
            row.appendChild(square)
            square.style.backgroundColor = color(i, j)
            if(i != 3 && i != 4)
                if(square.style.backgroundColor.value == "black") {
                    let hole = document.createElement('div')
                    hole.classList.add('hole')
                    if(i < 3)
                        hole.style.backgroundColor = "black"
                    else hole.style.backgroundColor = "white"
                    square.appendChild(hole)
                }
        }
        document.querySelector('#board').appendChild(row)
       
    }
})()

function color(i, j) {
    if(i % 2 == 0)
        if(j % 2 == 0)
            return "white";
        else return "black";
    else if (j % 2 != 0)
        return "white";
    return "black";
}

 

[אלוווופה]

הקוד עצמו עובד מצוין אבל בגלל שהאלמנטים ב-HTML לא מכילים תוכן ולא הוגדר להם height ו-width הם אינם מופיעים בתצוגה

ספוילר: טיפ

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

(function(){
    for (let i = 0; i < 8; i++) {
        let row = document.createElement('div')
        row.classList.add('row')
        for (let j = 0; j < 8; j++) {
            let square = document.createElement('div')
            square.classList.add('square')
            row.appendChild(square)
            square.style.backgroundColor = color(i, j)
            if(i != 3 && i != 4)
                if(square.style.backgroundColor.value == "black") {
                    let hole = document.createElement('div')
                    hole.classList.add('hole')
                    if(i < 3)
                        hole.style.backgroundColor = "black"
                    else hole.style.backgroundColor = "white"
                    square.appendChild(hole)
                }
        }
        document.querySelector('#board').appendChild(row)
  
    }
})()

function color(i, j) {
    if(i % 2 == 0)
        if(j % 2 == 0)
            return "white";
        else return "black";
    else if (j % 2 != 0)
        return "white";
    return "black";
}

אלעזר 1 יש להם רוחב וגובה, זה בcss:​

*{
    box-sizing: border-box;
    background-color: black;
}

#game{
    width: 700px;
    margin: auto;
}

#board{
    width: 640px;
    border: 15px white solid;
    border-radius: 10px;
}

#board > .row{
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    height: 86px;
}

.square{
    width: 88px;
    height: 88px;
}

.hole{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px white solid;
}

תודה על העזרה!!
נ.ב. לדעתי הריבועים מסתירים את העיגולים שיצרתי, איך אפשר להביא צורה קדימה על צורה נוספת??

 

[אלעזר 1]

יתכן שיש לכם הגדרות CSS אחרות שדורסות את הערכים האלו.
זו התוצאה אצלי לפי הקובץ המצורף:

 

[אלוווופה]

כמו מה? כי השתדלתי לעשות הכל בcss ולא יותר מידי בjs.

 

[אלוווופה]

יתכן שיש לכם הגדרות CSS אחרות שדורסות את הערכים האלו.
זו התוצאה אצלי לפי הקובץ המצורף:
צפה בקובץ המצורף 1187054

@אלעזר 1 ניסיתי ליצור את העיגולים בדף נפרד עם אותו סטייל, בלי הריבועים עצמם וכן יצא לי.
אז חשבתי אולי צריך להביא לעיגול משהו שיביא אותו לפני הריבוע, יש משהו כזה?