Question

我希望显示特定图像的次数与用户给出的次数一样多。这部分已完成。但我想在每张图片下面显示一个数字。例如，如果用户输入为4，则应该有4个图像，其中＆＃39; 1＆＃39;低于第1张图片＆＃39; 2＆＃39;低于秒。图像也必须是可点击的。

＆＃13;

<!DOCTYPE html>
<html>
<body>

<p>Click the button to add a new element to the array.</p>
<input type="number" id="myNumber" value="">
<button onclick="imag()">Try it</button>


<div id="demo">

<script>
function imag(c,x) {
var x = document.getElementById("myNumber").value;
var c="<img src='C:/Users/Akhil/Desktop/New folder/G.jpg'/>";
    
  var arr = [];
  for (var i = 0; i < x; i++) {
    arr.push(c);
  
document.getElementById("demo").innerHTML = arr.join("&nbsp&nbsp");

}
}


</script>

</body>
</html>

＆＃13;

Answer 1

您已经拥有了在循环中寻找的号码。所以你可以像这样简单地将它添加到你的数组中。

JS：

function imag() {
    var x = document.getElementById("myNumber").value;
    var c = "<img src='C:/Users/Akhil/Desktop/New folder/G.jpg'/>";

    var arr = [];
    for (var i = 0; i < x; i++) {
        arr.push("<div class='image'>" + c + "<br />" + (i+1) + "</div>");
    }

    document.getElementById("demo").innerHTML = arr.join("&nbsp&nbsp");
}

CSS：

div.image {
    display: inline-block;
}

Answer 2

var imageSrc = "http://fc08.deviantart.net/fs71/f/2010/148/1/9/20x20_PNG_Icons_DOMO_by_JMcIvor.png";

function imag(c,x) {
  var x = document.getElementById("myNumber").value;
  var demo = document.getElementById("demo");
  
  var container = document.createElement("div");
  container.setAttribute("class", "container");
  
  for(var i=0; i<x; i++) {
    var image = document.createElement("img");
    image.setAttribute("class", "image");
    image.setAttribute("src", imageSrc);
    container.appendChild(image);
    var text = document.createElement("div");
    text.innerHTML = i+1;
    container.appendChild(text);
    demo.appendChild(container);
  }
}

#demo {
}

.container {
}

.image {
}

.text {
}

<!DOCTYPE html>
<html>
<body>

<p>Click the button to add a new element to the array.</p>
<input type="number" id="myNumber" value="">
<button onclick="imag()">Try it</button>

<div id="demo"></div>

</body>
</html>

我只是使用另一个图片网址来测试代码，将其替换为您的代码。我希望这会有所帮助。

如何在每个动态创建的图像下面显示一个数字？

2 个答案: