Передача индекса в качестве аргумента в Javascript с помощью setElementAttribute () - PullRequest
Новая
       73

Передача индекса в качестве аргумента в Javascript с помощью setElementAttribute ()

0 голосов
/ 19 января 2020

Я хочу передать индекс в качестве аргумента функции splatImg (), которая преобразует изображение ошибки в изображение сплата при получении указанного c идентификатора. Однако консоль возвращает <img id ="0" onclick = "splatImg(i)" src = "file:///C:/Users/luhan/Downloads/images/bugImage.jpg"/> вместо <img id ="0" onclick = "splatImg(0/1/2/3/4)" src = "file:///C:/Users/luhan/Downloads/images/bugImage.jpg"/>

HTML: 

<div id ="div1"> </div>

JavaScript: 

function createImg()
{   
    img = document.createElement("img");
    img.src = "images/bugImage.jpg";
    for (i = 0; i < 4; i++)
    {
        img[i]= document.createElement("img");
        img[i].setAttribute("id", [i]);
        img[i].setAttribute("onclick", "splatImg(i)");
        img[i].src = img.src;
        document.getElementById("div1").appendChild(img[i]);
    }
}

function splatImg(id)               
{
    BUGS_CONDITION = [true, true, true, true];
    BUGS = ["bug1", "bug2", "bug3", "bug4"];
    for (var i = 0; i < 4; i++)
    {   
        if (BUGS_CONDITION[i])  
        {
            document.getElementById(id).src = "images/bugSplat.jpg";
            removeBug = BUGS.splice(0, 1);
            BUGS_CONDITION[i] = false;
            console.log(BUGS);
            return;
        }
    }
    return;
}

Ответы [ 2 ]

0 голосов
/ 19 января 2020 

// Added to execute the code here
window.onload = function() { createImg(); };

function createImg()
{   
    // No need to create an image to hold its src
    var src = "images/bugImage.jpg";
    // img should be an array
    var img = [];
    for (i = 0; i < 4; i++)
    {
        img[i]= document.createElement("img");
        // Numerical index can be hard to manage
        // So I've changed to alphanumerical
        img[i].setAttribute("id", 'img-' + i);
        img[i].onclick = function() {
            // Send image object instead a variable
            splatImg(this);
        };
        img[i].src = src;
        document.getElementById("div1").appendChild(img[i]);
    }
}

function splatImg(img)               
{
    var BUGS_CONDITION = [true, true, true, true];
    var BUGS = ["bug1", "bug2", "bug3", "bug4"];
    // Get number from img.id
    var id = img.id.split('-')[1];
    BUGS_CONDITION[id] = true;
    for (var i = 0; i < 4; i++)
    {
        if (BUGS_CONDITION[i])  
        {
            img.src = "images/bugSplat.jpg";
            // Remove the bug, no new variable needed
            BUGS.splice(id, 1);
            BUGS_CONDITION[i] = false;
            console.log(BUGS);
            return;
        }
    }
    return;
}
You had some errors that I've commented directly in code
<div id ="div1"> </div>
0 голосов
/ 19 января 2020

Несколько вещей, которые я заметил. Похоже, что вы устанавливаете id для массива: 

img[i].setAttribute("id", [i]);

Вместо этого оно должно быть: 

img[i].setAttribute("id", i);

И когда вы вызываете функцию, она просто передает букву "i" вместо индекса, поэтому вместо: 

"splatImg(i)"

Вы должны иметь (примечание: он использует строку шаблона ): 

`splatImg(${i})`
...