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

[אלעזר 1]

אתם צריכים פשוט להשמיט את המאפיין value בבדיקה (שורה 11 בקוד כאן):

(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 == "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)
  
    }
})()

 

[אלוווופה]

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

 

[אלעזר 1]

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

לא צריך להוריד את כל השורה, רק להוריד את הגישה המיותרת ל- value שמחזירה תוצאה שלא קיימת, הערך נמצא ב-

square.style.backgroundColor

ולא ב-

square.style.backgroundColor.value

 

[אלוווופה]

אוקי, תודה רבה!!!

 

[אלוווופה]

עזרת לי מאוד.

 

[אלוווופה]

אלעזר 1 איך אפשר לעשות לצורה מתוך ה border js ??​

 

[אלעזר 1]

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[אלוווופה]

@אלעזר 1 תוכל לומר לי למה השימוש בפונקציית slice לא עושה את תפקידה??​

if (temp.length > 0) {
                            square.removeChild(hole)
                            let k = 0
                            do {
                                k++
                            } while ((board[k].x != x || board[k].y != y))
                            square.setAttribute('data-exists', 'notExist')
                            board.slice(k, k + 1)
                            console.log(board)
                            toInsertBoard(board, square)
                        }

תודה רבה רבה!!

 

[אלעזר 1]

האם board הוא מערך?

 

[אלוווופה]

האם board הוא מערך?

ברור, מערך של אובייקטים.

 

[אלוווופה]

@אלעזר 1 עוד שאלה, האם אפשר להסיר id/class שיתווסף (בJS) לתגית שנוצרה בJS???​

 

[אלעזר 1]

ברור, מערך של אובייקטים.

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

 

[אלעזר 1]

@אלעזר 1 עוד שאלה, האם אפשר להסיר id/class שיתווסף (בJS) לתגית שנוצרה בJS???​

אפשר לקרוא בעזרת JS לאלמנטים שנוספו לדף באמצעות JS,
אך צריך לשים לב שמאזינים לאירועים (events) שהוגדרו בטעינת העמוד באמצעות האזנה ל-class או id לא יכללו את האלמנטים שנוספו אח"כ

 

[אלוווופה]

let board = [];

(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 (square.style.backgroundColor == "black") {
                square.setAttribute('data-x', j)
                square.setAttribute('data-y', i)
                square.setAttribute('data-exists', 'notExist')
                let hole = document.createElement('button')
                hole.classList.add('hole')
                square.appendChild(hole)
                if (i != 3 && i != 4) {
                    if (i < 3) {
                        square.setAttribute('data-exists', 'black')
                        hole.style.backgroundColor = "black"
                    }
                    else {
                        square.setAttribute('data-exists', 'wheat')
                        hole.style.backgroundColor = "wheat"
                    }
                    hole.addEventListener('click', function examination() {
                        let x = square.getAttribute('data-x') * 1
                        let y = square.getAttribute('data-y') * 1
                        let index = 0, temp = []
                        if (square.getAttribute('data-exists') == 'black') {
                            while (temp.length < 2 && index < board.length) {
                                if ((board[index].x == (x - 1) && board[index].y == (y + 1)) || (board[index].x == (x + 1) && board[index].y == (y + 1)))
                                    if (board[index].exists == 'notExist') {
                                        temp.push(board[index])
                                    }
                                    else if (board[index].exists == 'wheat')
                                        examination();
                                index++
                            }
                        }
                        else if (square.getAttribute('data-exists') == 'wheat') {
                            while (temp.length < 2 && index < board.length) {
                                if ((board[index].x == (x - 1) && board[index].y == (y - 1)) || (board[index].x == (x + 1) && board[index].y == (y - 1)))
                                    if (board[index].exists == 'notExist') {
                                        temp.push(board[index])
                                    }
                                    else if (board[index].exists == 'black')
                                        examination()
                                index++
                            }
                        }
                        if (temp.length > 0) {
                            square.removeChild(hole)
                            let k = 0
                            do {
                                k++
                            } while ((board[k].x != x || board[k].y != y))
                            console.log(k)
                            console.log(board[k])
                            square.setAttribute('data-exists', 'notExist')
                            board.slice(k, k + 1)
                            console.log(board)
                            toInsertBoard(board, square)
                        }

                    })
                }
                else hole.id = 'option'
                toInsertBoard(board, square)
            }
            document.querySelector('#board').appendChild(row)
        }
    }
    console.log(board)
})()
//בחירת הצבע המתאים לכל משבצת
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";
}

//מילוי הלוח בכל נתוני המשבצות
function toInsertBoard(board, square) {
    let newSquare = new Square(square.getAttribute('data-x'), square.getAttribute('data-y'), square.getAttribute('data-exists'))
    board.push(newSquare)
}

 

[אלוווופה]

@אלעזר 1 אשמח אם תוכל לעזור לי, כתבתי 2 פונק' בjs ויצרתי אפשרות של לחיצה שהיא מפנה לפונק' השנייה, אבל הוא מראה לי את ההפניה והוא נכנס לפונק' אבל כשהוא מגיע ל - onload הוא חוזר לכפתור שנוצר ושם גומר בלי לממש את רב הפונק'. למה???​

function init() {
    if (localStorage.getItem('gmail') !== null) {
        document.querySelector("#join").innerHTML = "הפניות שלי"
        document.querySelector("#join").href = "allRequest.html"
        let x = document.querySelector("#join")
        x.onclick = function () { allRequest() }
        let new_li = document.createElement('li')
        let new_a = document.createElement('a')
        new_a.innerHTML = 'התנתק'
        new_a.href = 'user.html'
        new_a.onclick = function () { out() }
        new_li.appendChild(new_a)
        document.getElementById('add').appendChild(new_li)
        //document.getElementById('add').appendChild(document.createElement('li').appendChild(document.createElement('a').innerHTML='hhhh'))
    }

function allRequest() {
    let gmail = localStorage.getItem("gmail")
    //יצירת קריאה חדשה
    let req = new XMLHttpRequest();
    //פתיחת הקריאה - סוג וכתובת
    req.open('get', 'https:/localhost:44397/API/contacs/GetUserQuetions/' + gmail, true);
    //שליחת הבקשה
    req.send();
    req.onload = function () {
        console.log(req.responseText);
        let allRequest = JSON.parse(req.response);
        console.log(allRequest);
        let table = document.createElement('table')
        table.setAttribute('class', 'table table-primary table-bordered table-hover')
        //שורת כותרת
        let r = document.createElement('tr');
        //עמודות כותרת
        let d1 = document.createElement('th');
        d1.innerHTML = "שאלה"
        r.appendChild(d1)
        d1 = document.createElement('th');
        d1.innerHTML = "תשובה"
        r.appendChild(d1)
        // הוספת שורת כותרת
        table.appendChild(r)
        //שורות תוכן
        for (let i = 0; i < allRequest.length; i++) {
            r = document.createElement('tr');
            //Question
            d1 = document.createElement('td');
            d1.innerHTML = allRequest[i].Question
            r.appendChild(d1)
            //Answer
            d1 = document.createElement('td');
            if (allRequest[i].Answer != null)
                d1.innerHTML = allRequest[i].Answer
            else d1.innerHTML = "שאלתך טרם נענתה"
            r.appendChild(d1)
            // הוספת שורות תוכן
            table.appendChild(r)
        }
        document.getElementById('contact').appendChild(table)
    }
    // document.getElementById("message").innerHTML = req.responseText
}
}

 

[אלעזר 1]

@אלעזר 1 אשמח אם תוכל לעזור לי, כתבתי 2 פונק' בjs ויצרתי אפשרות של לחיצה שהיא מפנה לפונק' השנייה, אבל הוא מראה לי את ההפניה והוא נכנס לפונק' אבל כשהוא מגיע ל - onload הוא חוזר לכפתור שנוצר ושם גומר בלי לממש את רב הפונק'. למה???​

function init() {
    if (localStorage.getItem('gmail') !== null) {
        document.querySelector("#join").innerHTML = "הפניות שלי"
        document.querySelector("#join").href = "allRequest.html"
        let x = document.querySelector("#join")
        x.onclick = function () { allRequest() }
        let new_li = document.createElement('li')
        let new_a = document.createElement('a')
        new_a.innerHTML = 'התנתק'
        new_a.href = 'user.html'
        new_a.onclick = function () { out() }
        new_li.appendChild(new_a)
        document.getElementById('add').appendChild(new_li)
        //document.getElementById('add').appendChild(document.createElement('li').appendChild(document.createElement('a').innerHTML='hhhh'))
    }

function allRequest() {
    let gmail = localStorage.getItem("gmail")
    //יצירת קריאה חדשה
    let req = new XMLHttpRequest();
    //פתיחת הקריאה - סוג וכתובת
    req.open('get', 'https:/localhost:44397/API/contacs/GetUserQuetions/' + gmail, true);
    //שליחת הבקשה
    req.send();
    req.onload = function () {
        console.log(req.responseText);
        let allRequest = JSON.parse(req.response);
        console.log(allRequest);
        let table = document.createElement('table')
        table.setAttribute('class', 'table table-primary table-bordered table-hover')
        //שורת כותרת
        let r = document.createElement('tr');
        //עמודות כותרת
        let d1 = document.createElement('th');
        d1.innerHTML = "שאלה"
        r.appendChild(d1)
        d1 = document.createElement('th');
        d1.innerHTML = "תשובה"
        r.appendChild(d1)
        // הוספת שורת כותרת
        table.appendChild(r)
        //שורות תוכן
        for (let i = 0; i < allRequest.length; i++) {
            r = document.createElement('tr');
            //Question
            d1 = document.createElement('td');
            d1.innerHTML = allRequest[i].Question
            r.appendChild(d1)
            //Answer
            d1 = document.createElement('td');
            if (allRequest[i].Answer != null)
                d1.innerHTML = allRequest[i].Answer
            else d1.innerHTML = "שאלתך טרם נענתה"
            r.appendChild(d1)
            // הוספת שורות תוכן
            table.appendChild(r)
        }
        document.getElementById('contact').appendChild(table)
    }
    // document.getElementById("message").innerHTML = req.responseText
}
}

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

 

[אלוווופה]

מה יכולה להיות הבעיה אם יצרתי דף אחד של JS וכמה דפים של HTML, לכולם יש onload שמפנה לאותה פונק' בJS, חלק דפים עולים כנדרש וחלק מהדפים (2) נעצרים באמצע הפונק'.
מתוך בדיקה בf12 הוא מראה לי כך:
script.js:70 Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
at init (script.js:70:51)
at a (script.js:63:5)
at onload (messege.html:17:29)
בעוד הסימון של השגיאה מצוין על השורה הזו:

 document.querySelector("#join").innerHTML = "הפניות שלי"

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

 

[אלעזר 1]

במה הבעיה???

לקוד הזה יש תלות באלמנט עם ה-ID

join

אם הוא לא קיים בדף הקוד ישבר

 

[הודיה גולדברג]

ידוע לך קישור להדרכה בנושא?
תודה

 

[אלעזר 1]

ידוע לך קישור להדרכה בנושא?
תודה

יש בגוגל הרבה מאד מדריכים ל-JS, ביניהם:

מדריך javascript

מדריכים בנושא javascript, שפת התכנות של הדפדפנים המודרניים, והשפה הנפוצה ביותר בין מפתחים של אתרי אינטרנט.

reshetech.co.il

מדריך JavaScript - הקדמה • וובמאסטר

JavaScript, או בשמה המקוצר, JS היא שפת סקריפט מבוססת אובייקטים (Object Oriented. כלומר, היא מחולקת לאובייקטים וכל אובייקט הוא מכלול של פונקציות (מתודות) ותכונות (Properties).

webmaster.org.il

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com