使用javascript onclick函数替换div内容不起作用
使用javascript onclick函数替换div内容不起作用
提问于 2018-08-16 03:58:13
尝试使用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>
这是不起作用的，当使用内部超文本标记语言作为innerHTML = "replace the div"时，它起作用。但是为什么它在这种情况下不起作用，以及如何修复。有人能帮帮我吗？
回答 2
Stack Overflow用户
发布于 2018-08-16 04:12:58
它似乎真的起作用了。我试着运行它，它似乎起作用了。
在这里尝试一下：
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>
Stack Overflow用户
发布于 2018-08-16 04:25:27
您可以将图像文件名存储到一个数组中，然后遍历该数组并为每个文件/图像创建一个元素，然后将其附加到#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 carousel，那么您的答案将会大不相同，我建议您编辑您的问题以添加该信息
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51865592
复制相关文章
相似问题