Question

试图使用javascript onclick函数替换div内容。

function x() {
            document.getElementById("carousel").
				innerHTML = "<figure><img src=\"src/theme-captures/ando-ios-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/unpivot-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/acn-n-theme-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/cirtangle-shadow-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/white-drawn-min.png\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/stock-qetto.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/craven.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/muze-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/windows-8-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/green-lanting-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/desa-min.png\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
                "\t\t\t\t\t\t\t\t\t<figure><img src=\"src/theme-captures/dark-moon-min.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>";
        }

<button onclick="x()">click</button>

这不起作用，当将内部html用作innerHTML = "replace the div"时起作用。但是为什么它在这种情况下不起作用以及如何解决。谁能帮我！

Answer 1

似乎确实有效。我尝试运行它，看起来好像可行。

在这里尝试：

function x() {
    document.getElementById("carousel").innerHTML = "<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>\n" +
        "\t\t\t\t\t\t\t\t\t<figure><img src=\"https://is4-ssl.mzstatic.com/image/thumb/Purple62/v4/25/3e/5d/253e5de1-1411-c919-410a-c3628a666a5b/mzl.rehriusj.png/246x0w.jpg\" style=\"height: 56%; margin-top: 19px\" alt=\"\"></figure>";
}

<button onclick="x()">click</button>
<div id="carousel"></div>

Answer 2

好吧，您可以将图像文件名存储到一个数组中，然后遍历该数组并为每个文件/图像创建一个元素，然后将其附加到#carousel

下面是一个示例：（我没有添加所有图像，您可以自己添加其余图像）

var arrOfImgs = ["ando-ios-min.jpg", "unpivot-min.jpg", "acn-n-theme-min.jpg", "cirtangle-shadow-min.jpg", "white-drawn-min.png"];

function x() {
    var carousel = document.getElementById("carousel");
    carousel.innerHTML = ""
    for (let imgSrc of arrOfImgs){
      var imgElem = document.createElement("img");
      imgElem.src = "/src/theme-captures/" + imgSrc;
      imgElem.className = "img-class";
      imgElem.alt = imgSrc;
      carousel.append(imgElem)
    }    
}

.img-class{
  height: 56%;
  margin-top: 19px;
  border: 1px solid;
  margin: 4px;
}

<button onclick="x()">click</button>
<div id="carousel"></div>

但是，如果您使用的是Bootstrap轮播，那么答案会大不相同，建议您编辑问题以添加该信息

使用javascript onclick函数替换div内容不起作用

2 个答案: