Question

我有一个代码，根据从tempimages[]到img的{{1}}，尝试显示从src到id=slide box002的临时图像arrayVariable至ptag[i]。

我已经使用函数displayAllImages()将图像分配给img src id=slide。但它无法显示图像。

我的问题是我无法将tempimages数组显示给box002的img sr。

如何实现？

var tempimages = [];

function rvalue() {
    var array = [];
    var arrayVariable = ['1', '2', '3', '4', '5','6', '7', '8', '9', '10'];
    var ArrayOfImages = ['1.jpg', '2.jpg', '3.jpg', '4.jpg' ,'5.jpg','6.jpg', '7.jpg', '8.jpg', '9.jpg' ,'10.jpg']; //your assumed   
    arrayLength = arrayVariable.length;
    ptags = document.getElementsByName("values");

    for (i = 0; i < ptags.length; i++) {
        ptags[i].textContent = arrayVariable[Math.floor(Math.random() * arrayLength)];
        array.push(ptags[i].textContent);
        tempimages.push(`${ptags[i].textContent}.jpg`); 
    }
		
    console.log(array);
    console.log(tempimages); 
    console.log(slide); 
}
		
function displayAllImages() {
    var i = 0,
        len = tempimages.length;        
    
    for (; i < tempimages.length; i++) {   
        var img = new Image();
        img.src = tempimages[i];
        img.style.width = '100px';
        img.style.height = '100px';
        document.getElementById('slide').appendChild(img);
    }
};

$(function() {
    displayAllImages();   
});

#container {
    margin-top:15%;
    white-space:nowrap;
    text-align:center;
    margin-left:20%;
    margin-right:30%;
}

.box {
    background-color: coral;
    width: 50px;
    height:50px;
    display:inline-block;
    border-radius:5px;
    border:2px solid #333;
    border-color: #e6e600;
    margin:-2px;
    border-radius: 10%;
    background-color:  #66ff66;
}

<body onload="rvalue()">
<div id="container">
    <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
        <p name="values"></p>
    </div>
    <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
        <p name="values"></p>
    </div>
    <div class="box"  ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
        <p name="values"></p>
    </div>
</div>
    
<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
    <img src=""  draggable="true" id="slide" style="width:49px; height:49px; border-radius: 50%;" border="rounded"/>    
</div>    
</body>

使用javascript

0 个答案: