使用javascript onclick函数替换div内容不起作用
[英]Replacing a div content using a javascript onclick function not working
问题描述
Tried to replace a div content using a javascript onclick function. 
试图使用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>
This is not working, It works when use inner html as innerHTML = "replace the div" . 这不起作用，当将内部html用作innerHTML = "replace the div"时，它将起作用。 But why it is not working in this case and how to fix. 但是为什么它在这种情况下不起作用以及如何解决。 Can anyone help me please ! 谁能帮我！
2 个解决方案
解决方案1
1 2018-08-15 20:12:57
It seems it actually works. 看来它确实有效。 I tried running it, and it seems like it worked. 我尝试运行它，看起来好像可行。
Try it here: 在这里尝试：
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>
解决方案2
1 2018-08-15 20:25:26
Well, you can store the images file names into an array, then loop through this array and create an element to each of those files/images, then append it to the #carousel 好吧，您可以将图像文件名存储到一个数组中，然后遍历该数组并为每个文件/图像创建一个元素，然后将其附加到#carousel
below is an example:(I didn't add all images, you can add the rest of them by yourself) 下面是一个示例：（我没有添加所有图像，您可以自己添加其余图像）
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>
But if you are using Bootstrap carousel, then your answer will be much more different and I suggest you to edit your question to add that information 但是，如果您使用的是Bootstrap传送带，那么答案会大不相同，建议您编辑问题以添加该信息
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用javaScript函数onclick div替换HTML内容？ - Replace HTML content using javaScript function onclick div?
用 javascript 替换 div 内容 - replacing div content with javascript
<div> onClick运行javascript函数不起作用 - <div> onClick run javascript function not working
onclick javascript function 不适用于 div 元素 - onclick javascript function not working on a div element
使用JavaScript替换页面内容不起作用 - Replacing page content using JavaScript not working
Javascript/Jquery onClick 使用 HTML Div 不起作用 - Javascript/Jquery onClick using HTML Div not working
替换HTML javascript中的div内容 - Replacing div content in HTML javascript
使用JavaScript在文本中插入链接而不会替换div的全部内容 - Using javascript to insert links in text WITHOUT replacing entire content of div
使用Javascript onClick更改div内容 - Changing div content with Javascript onClick
Javascript-使用onclick更改div内容 - Javascript - Change div content with onclick
相关标签