Replacing a div content using a javascript onclick function not working

Question

Tried to replace a div content using a javascript onclick function.

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". But why it is not working in this case and how to fix. Can anyone help me please !

What is not working, can you explain? Which error the console shows to you? And where is the #carousel element? — Calvin Nunes
– Calvin Nunes, Commented Aug 15, 2018 at 20:13
Have you tried to assign the whole div to a variable and use that for innerHTML? What errors do you get on the console? What do you see on the HTML page using this method? — Advena
– Advena, Commented Aug 15, 2018 at 20:16
It shows only last image without css. how to assign whole div to a variable instead of this way. Can you please help me. — Chathuri Fernando
– Chathuri Fernando, Commented Aug 15, 2018 at 20:18

Calvin Nunes · Accepted Answer · 2018-08-15 20:18:08Z

1

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>

edited Aug 15, 2018 at 20:18

Calvin Nunes

6,4915 gold badges24 silver badges54 bronze badges

answered Aug 15, 2018 at 20:12

Ben Sh

496 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Chathuri Fernando Over a year ago

But not work for me, can I give this content from a div id instead of this way ?

Calvin Nunes Over a year ago

Why it doesn't work for you, please edit your question and clarify the problem that is happen to you

Chathuri Fernando Over a year ago

It only shows last image without any css. That is the my problem

Ben Sh Over a year ago

it might be because you're using a carousel? if i remember correctly a bootstrap carousel supposed to show only one image at a time.

Chathuri Fernando Over a year ago

Right, if I add this content inside of a div and then, can I use the div id to "innerHTML='call the div id' "

Calvin Nunes · Accepted Answer · 2018-08-15 20:32:05Z

1

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

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

edited Aug 15, 2018 at 20:32

answered Aug 15, 2018 at 20:25

Calvin Nunes

6,4915 gold badges24 silver badges54 bronze badges

2 Comments

Chathuri Fernando Over a year ago

Thanks for your help, Actually it is a slider which circling through a phone mokeup. I want to change the image set when a button click. Tired of solving this. I really appreciate your help.

Calvin Nunes Over a year ago

ok, you're welcome. BUt try to clarify your question better to get better answers, you passed a lot of information in the comments that you should have passed at the moment of the question creation. It makes a huge difference to people who are trying to help

Collectives™ on Stack Overflow

Replacing a div content using a javascript onclick function not working

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related