Develop Reference

How can I remove all borders from a group of elements except for the one created?

I'm trying to dynamically make all borders disappear except the newest created container's border I have tried the commented out section of the JavaScript. Can someone please provide an explanation/example of how this can be done?
function countButtonLinks() {
var elementGroups = document.getElementById('containsAll');
if(elementGroups.children.length == 0) {
var numID = 1;
}
if(elementGroups.children.length == 1) {
var numID = 2;
}
if(elementGroups.children.length == 2) {
var numID = 3;
}
if(elementGroups.children.length == 3) {
var numID = 4;
}
if(elementGroups.children.length == 4) {
var numID = 5;
}
if(elementGroups.children.length == 5) {
var numID = 6;
}
return numID;
}
function createContainer() {
if(document.getElementById('containsAll').children.length < 6) {
var elementA = document.createElement("span");
var elementAInnerTxt = document.createElement("div");
elementA.id = 'elem' + countButtonLinks();
elementAInnerTxt.id = 'elemInner' + countButtonLinks();
elementA.className = 'elem1';
elementAInnerTxt.className = 'elemInner1';
elementA.appendChild(elementAInnerTxt);
document.getElementById('containsAll').appendChild(elementA);
}
}
.containsAll {
width: 91%;
height: 75%;
position: absolute;
float: left;
margin-top: 1%;
margin-left: 1%;
background-color: transparent;
z-index: 91;
border: 1px #000000 solid;
border-radius: 7px;
padding: 5px;
}
.elem1 {
max-width: 100%;
max-height: 100%;
min-width: 100px;
min-height: 60px;
float: left;
background-color: transparent;
border: 1px #333333 solid;
border-radius: 5px;
}
.elemInner1 {
max-width: 100%;
max-height: 100%;
min-width: 100px;
min-height: 60px;
float: left;
background-color: transparent;
padding: 5px;
}
.buttonClass {
width: 100px;
height: 50px;
}
<button class="buttonClass" type="button" onclick="createContainer();">Click Me</button>
<div id="containsAll" class="containsAll"></div>
Please, no JQuery.

function countButtonLinks(){
var elementGroups = document.getElementById('containsAll');
// you don't need to use 'var numID'
return elementGroups.children.length + 1;
}
function createContainer(){
if(document.getElementById('containsAll').children.length < 6){
// add code here
for(var i=0;i<document.getElementById('containsAll').children.length;i++){
document.getElementById('containsAll').children[i].style.border = '0 none';
}
var elementA = document.createElement("span");
//...

Simply call the existing children of the element and remove the border before inserting
another element:
function countButtonLinks(){
var elementGroups = document.getElementById('containsAll');
var groupLength = elementGroups.children.length;
return groupLength++;
}
function createContainer() {
var containsAll = document.getElementById('containsAll'),
childrenLength = containsAll.children.length;
if (childrenLength >= 6) {
return; // Bail immediately since we only need to add a new element if the children's length is less than 6
}
// Call previous children
for ( var i = 0; i < childrenLength; i++ ) {
let child = containsAll.children[i];
// You can add a new class here that will remove the border
// but in this example, we'll use the style attribute to remove the border
child.style.border = 0;
}
// Now, add the new element
var elementA = document.createElement("span");
var elementAInnerTxt = document.createElement("div");
elementA.id = 'elem' + countButtonLinks();
elementAInnerTxt.id = 'elemInner' + countButtonLinks();
elementA.className = 'elem1';
elementAInnerTxt.className = 'elemInner1';
elementA.appendChild(elementAInnerTxt);
containsAll.appendChild(elementA);
}
Also, if you're going to use an element multiple times inside a function, make it a habit to store that element in a variable so you don't repeatedly calls the document.getElementById function.

You can accomplish this using the CSS :last-child selector
var container = document.getElementById('container');
function count_button_links()
{
return container.children.length + 1;
}
function new_container()
{
if (count_button_links() > 6) return false;
let span = document.createElement('span');
span.id = 'el_' + count_button_links();
span.className = 'box';
container.appendChild(span);
}
#container {
width: 100%;
background-color: transparent;
border: 1px solid #000;
border-radius: 7px;
padding: 5px;
display:flex;
height:200px;
}
.box {
flex:0 0 100px;
height:60px;
background-color: transparent;
border-radius: 5px;
}
.box:last-child{
border:1px solid #333;
}
button {
width: 100px;
height: 50px;
}
<button type="button" onclick="new_container();">Click Me</button>
<div id="container"></div>

Change color of the div shown in the window

I'm trying to change the colors of the divs from skyblue to yellow, when a specific div appears OR goes through the middle of the window. I have been building my own logic which works fine when I scroll the page up and down slowly. But it doesn't work when I scroll the page fast. I have inserted a button which takes the page to the fourth div (Box - 5) from the 100 divs. When the fourth div appears the background color does not switch, I have the keep scrolling up and down for my logic to change the fourth background color. The button is placed at the bottom of the page.
So I need help in making a better logic to changing the div's background color when the div is at or goes through the middle of the window, no matter the page is being scrolled fast or slow OR the page being
directly shifted to a specific div. Thanks
My index.html:
window.onbeforeunload = function() {
this.scrollTo(0, 0);
}
var content = document.getElementById("content"),
current = 0;
for (var y = 0; y < 100; y++) {
var box = document.createElement("div");
box.id = "box";
box.innerHTML = "Box - " + (y + 1);
content.appendChild(box);
}
content.children[current].style.backgroundColor = "yellow";
window.onscroll = function() {
if (this.oldScroll > this.scrollY) {
if (current >= 1) {
var previous_box = content.children[current - 1];
if ((this.scrollY + this.innerHeight / 2) < previous_box.offsetTop + previous_box.clientHeight) {
content.children[current].style.backgroundColor = "skyblue";
current--;
content.children[current].style.backgroundColor = "yellow";
}
}
} else {
if (current < 99) {
var next_box = content.children[current + 1];
if ((this.scrollY + this.innerHeight / 2) > next_box.offsetTop) {
content.children[current].style.backgroundColor = "skyblue";
current++;
content.children[current].style.backgroundColor = "yellow";
}
}
}
this.oldScroll = this.scrollY;
}
document.querySelector("button").onclick = function() {
var y = content.children[4].offsetTop - (content.children[4].clientHeight / 4);
window.scrollTo(0, y);
};
body {
margin: 0;
}
#navigation {
min-width: 620px;
background-color: blue;
width: 100%;
height: 50px;
z-index: 1;
position: fixed;
top: 0;
}
#box {
position: relative;
height: 75%;
width: 100%;
margin: 15% auto 15% auto;
color: black;
background-color: skyblue;
border: black 1px solid;
font-size: 50px;
text-align: center;
}
button {
margin: 0% auto 15% auto;
left: 50%;
}
<div id="navigation"></div>
<div id="content"></div>
<button>GO TO BOX 5</button>

window.onbeforeunload = function() {
this.scrollTo(0, 0);
}
var content = document.getElementById("content"),
current = 0;
for (var y = 0; y < 100; y++) {
var box = document.createElement("div");
box.id = "box";
box.innerHTML = "Box - " + (y + 1);
content.appendChild(box);
}
content.children[current].style.backgroundColor = "yellow";
window.onscroll = function() {
for(var i=0;i<content.children.length;i++){
var top = content.children[i]. getBoundingClientRect().top;
var height = top+content.children[i].clientHeight;
var halfWindow = window.innerHeight*0.5;
if(top<halfWindow&&height>halfWindow){
content.children[i].style.backgroundColor = "skyblue";
}
else{
content.children[i].style.backgroundColor = "yellow";
}
}
}
document.querySelector("button").onclick = function() {
var y = content.children[4].offsetTop - (content.children[4].clientHeight / 4);
window.scrollTo(0, y);
};
body {
margin: 0;
}
#navigation {
min-width: 620px;
background-color: blue;
width: 100%;
height: 50px;
z-index: 1;
position: fixed;
top: 0;
}
#box {
position: relative;
height: 75%;
width: 100%;
margin: 15% auto 15% auto;
color: black;
background-color: skyblue;
border: black 1px solid;
font-size: 50px;
text-align: center;
}
button {
margin: 0% auto 15% auto;
left: 50%;
}
<div id="navigation"></div>
<div id="content"></div>
<button>GO TO BOX 5</button>

Unable to add text into slideshow li element

I am unable to add text into slideshow li element. Its not my slideshow i downloaded it from codepen https://codepen.io/team/moderndeveloper/pen/MKgqzq?q=imageslider&limit=team&team_name=moderndeveloper . When i add some text into li element entire slideshow disappear. I tried to add div into li element but nothing help. So, is there any solution for this?
HTML
<div class="ImageSlider">
<div class="ImageSlider-scroller">
<ul class="ImageSlider-items">
<li class="ImageSlider-item" style="background-image: url(https://farm6.staticflickr.com/5076/14164379250_71c3a5b32a_b.jpg);"></li>
<li class="ImageSlider-item" style="background-image: url(https://farm3.staticflickr.com/2937/14371160993_186df4a083_b.jpg);"></li>
<li class="ImageSlider-item" style="background-image: url(https://farm3.staticflickr.com/2914/14185397280_e51c40b1df_b.jpg);"></li>
</ul>
<nav class="ImageSlider-indicators">
</nav>
</div>
</div>
CSS
body {
margin: 0;
}
.ImageSlider {
display: flex;
align-items: stretch;
}
.ImageSlider-button {
width: 40px;
border: none;
background: transparent;
color: #000000;
font-size: 40px;
text-align: center;
outline: none;
opacity: 0.5;
transition: opacity 300ms ease-out;
}
.ImageSlider-button:hover {
opacity: 1;
}
.ImageSlider-scroller {
flex: 1;
overflow: hidden;
position: relative;
}
.ImageSlider-items {
margin: 0;
padding: 0;
list-style: none;
white-space: nowrap;
font-size: 0;
line-height: 0;
transition: transform 0.6s cubic-bezier(1, 0, 0, 1);
}
.ImageSlider-item {
display: inline-block;
padding-bottom: 31.25%;
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
}
.ImageSlider-indicators {
list-style: none;
padding: 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: block;
text-align: right;
padding: 40px 140px;
font-size: 0;
}
.ImageSlider-indicator {
display: inline-block;
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
border: 2px solid #FFFFFF;
width: 14px;
height: 14px;
border-radius: 16px;
margin: 0 4px;
background-color: rgba(255, 255, 255, 0);
transition: background-color 0.4s ease-in-out;
}
.ImageSlider-indicator:hover,
.ImageSlider-indicator--is-active {
background-color: #FFFFFF;
}
JS
/* global Modernizr */
if (!Object.assign) {
Object.defineProperty(Object, 'assign', {
enumerable: false,
configurable: true,
writable: true,
value: function(target) {
'use strict';
if (target === undefined || target === null) {
throw new TypeError('Cannot convert first argument to object');
}
var to = Object(target);
for (var i = 1; i < arguments.length; i++) {
var nextSource = arguments[i];
if (nextSource === undefined || nextSource === null) {
continue;
}
nextSource = Object(nextSource);
var keysArray = Object.keys(nextSource);
for (var nextIndex = 0, len = keysArray.length; nextIndex < len; nextIndex++) {
var nextKey = keysArray[nextIndex];
var desc = Object.getOwnPropertyDescriptor(nextSource, nextKey);
if (desc !== undefined && desc.enumerable) {
to[nextKey] = nextSource[nextKey];
}
}
}
return to;
}
});
}
(function(window, document, Modernizr) {
"use strict";
var d = document;
var transform = Modernizr.prefixed('transform');
function ImageSliderIndicators(imageSlider, options) {
this.imageSlider = imageSlider;
this.options = Object.assign({}, ImageSliderIndicators.DEFAULTS, options || {});
this.el = d.querySelector('.' + this.options.indicatorsClass);
this.indicators = [].slice.call(d.querySelectorAll('.' + this.options.indicatorClass));
this.imageSlider.el.addEventListener('positionChanged', this.onPositionChanged.bind(this));
this.el.addEventListener('click', this.onIndicatorClick.bind(this), false);
this.onPositionChanged();
}
ImageSliderIndicators.DEFAULTS = {
indicatorsClass: 'ImageSlider-indicators',
indicatorClass: 'ImageSlider-indicator',
indicatorActiveClass: 'ImageSlider-indicator--is-active'
};
ImageSliderIndicators.prototype.onIndicatorClick = function onIndicatorClick(event) {
var position = this.indicators.indexOf(event.target);
if (position !== -1) {
this.imageSlider.goto(position);
}
};
ImageSliderIndicators.prototype.onPositionChanged = function onPositionChanged() {
var self = this;
this.indicators.forEach(function(element, index) {
var action = index === self.imageSlider.position ? 'add' : 'remove';
element.classList[action](self.options.indicatorActiveClass);
});
};
function ImageSlider(options) {
this.options = Object.assign({}, ImageSlider.DEFAULTS, options || {});
this.position = 0;
this.el = d.querySelector('.' + this.options.imageSliderClass);
this.items = d.querySelector('.' + this.options.itemsClass);
this.itemCount = d.querySelectorAll('.' + this.options.itemClass).length;
this.scroller = d.querySelector('.' + this.options.scrollerClass);
this.previousButton = d.querySelector('.' + this.options.previousButtonClass);
this.nextButton = d.querySelector('.' + this.options.nextButtonClass);
this.indicators = new ImageSliderIndicators(this, this.options.indicators);
window.addEventListener('resize', this.render.bind(this));
this.nextButton && this.nextButton.addEventListener('click', this.next.bind(this));
this.previousButton && this.previousButton.addEventListener('click', this.previous.bind(this));
}
ImageSlider.DEFAULTS = {
imageSliderClass: 'ImageSlider',
itemsClass: 'ImageSlider-items',
itemClass: 'ImageSlider-item',
scrollerClass: 'ImageSlider-scroller',
previousButtonClass: 'js-ImageSlider-button--previous',
nextButtonClass: 'js-ImageSlider-button--next'
};
ImageSlider.prototype.render = function render() {
this.items.style[transform] = 'translate3d(' + (-this.position * this.items.offsetWidth) + 'px,0,0)';
};
ImageSlider.prototype.goto = function goto(position) {
var event = d.createEvent('Event');
event.initEvent('positionChanged', true, true);
this.position = position;
this.el.dispatchEvent(event);
this.render();
};
ImageSlider.prototype.previous = function previous() {
this.goto((this.position + (this.itemCount - 1)) % this.itemCount);
};
ImageSlider.prototype.next = function next() {
this.goto((this.position + 1) % this.itemCount);
};
window.ImageSlider = ImageSlider;
}).call(this, window, window.document, Modernizr);
new ImageSlider();

Durinko.
The slideshow doesn't disappear. The content is pushed down.
The secret is in the CSS code.
Try this:
HTML
<li class="ImageSlider-item" style="background-image: url(https://farm6.staticflickr.com/5076/14164379250_71c3a5b32a_b.jpg);"><p>Some Text</p></li>
CSS:
p {
position: absolute;
font-size: 30px;
}

How to save innerHTML of div in a local storage?

I want to save and restore data from div - that is container of other divs,
In order to make it I use local storage and JSON like this:
window.onload = restoreJason;
function makeJson(){
var canvas = document.getElementById("canvas");
var shapes = canvas.querySelectorAll("div[class='drag']");
var divs = new Object();
for(var i=0; i<shapes.length; ++i){
divs[shapes[i].getAttribute('innerHTML')] = shapes[i].innerHTML;
}
localStorage.setItem("divs", JSON.stringify(divs));
}
function restoreJason(){
var divs = JSON.parse(localStorage.getItem("divs"));
var canvas = document.getElementById("canvas");
var shapes = canvas.querySelectorAll("div[class='drag']");
for(var i = 0; i<shapes.length; i++){
shapes[i].value = divs[shapes[i].getAttribute("innerHTML")];
}
console.log(divs);
}
However, I don't know how to access the innerHTML of the elements and save it or restore it.
What do you think I shall do?
(To be more detailed - I need to save the content of the div when user click on "save", and load it when the user click "load". This is a snippest of it...)
NOTICE: the "canvas" is just the id of the main div, and not a real "canvas".
function randomizeColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * letters.length)];
}
return color;
}
function randomizeRectangle() {
var width = Math.random() * 700 + 50;
var height = Math.random() * 250 + 50;
if (height <= 20) {
height = 20;
}
var posX = Math.round(Math.random() * window.innerWidth);
var posY = Math.round(Math.random() * window.innerHeight);
var randomRecObj = {
"width": width + "px",
"height": height + "px",
"posX": posX,
"posY": posY
};
return randomRecObj;
}
function makeShape() {
var rect = randomizeRectangle();
var rectDOM = document.createElement("div");
rectDOM.className = "rectangle";
rectDOM.style.border = "1px solid black";
rectDOM.style.width = rect.width;
rectDOM.style.height = rect.height;
rectDOM.style.background = randomizeColor();
rectDOM.style.top = rect.posY + "px";
rectDOM.style.left = rect.posX + "px";
//rectDOM.addEventListener("click", selectShape);
// rectDOM.style.transform =rect.rotation;
return rectDOM;
}
function randRect() {
var rectDOM = makeShape();
var canvas = document.getElementById("canvas");
canvas.appendChild(rectDOM);
}
function randOval() {
var ovalDOM = makeShape();
ovalDOM.style.borderRadius = "50%";
var canvas = document.getElementById("canvas");
canvas.appendChild(ovalDOM);
}
function changeColor(){
}
function cancelSelection() {
var selected = document.getElementsByClassName("selected");
while (selected) {
selected[0].classList.remove(selected[0]);
}
}
function removeShape(event) {
var selectedShapes = document.getElementsByClassName("selected");
var len = selectedShapes.length;
while (len > 0) {
selectedShapes[0].parentNode.removeChild(selectedShapes[0]);
--len;
}
}
function removeCorners(rectDom) {
var corners = document.getElementsByClassName("corners");
var len = corners.length;
while (len > 0) {
corners[0].classList.remove("corners");
--len;
}
}
.header{
background: #4ABDAC;
color: #fff;
margin: 1px;
}
hr{
border-top: 3px double #2a3132;
}
ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #90afc5;
}
li{
float: left;
border: 2px solid #336b87;
padding: 3px;
margin: 3px;
}
li>a{
display: block;
color: #2a3132;
text-decoration: none;
padding: 10px 14px;
}
#color{
margin-left: 150px;
}
#rect{
margin-left: 100px;
}
li>a:hover{
color: #763626;
cursor: pointer;
}
#canvas{
background: #66a5ad;
position: relative;
height: 1200px;
width: 100%;
}
.corners{
position: absolute;
height: 10px;
width: 10px;
background:#fff;
border: 1px solid black;
display: none;
}
.selected .corners{
display: inline-block;
}
.cornerUpLeft{
top: -5px;
left: -5px;
}
.cornerUpRight{
top: -5px;
right: -5px;
}
.cornerBtmLeft{
bottom: -5px;
left: -5px;
}
.cornerBtmRight{
bottom: -5px;
right: -5px;
}
.rectangle{
position: absolute;
}
.colorBox{
border: 1px solid black;
height: 20px;
width: 20px;
list-style: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sketch Board - Eyal Segal Project</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<script src="js/sketch.js"></script>
</head>
<body>
<h1 class="header">Sketch Board</h1>
<div>
<ul class="toolbar">
<li><a>Load</a></li>
<li id="Save"><a>Save</a></li>
<li id="rect"><a onclick="randRect()">Rectangle</a></li>
<li><a onclick="randOval()">Oval</a></li>
</ul>
<hr>
</div>
<div class="canvas" id="canvas">
</div>
</body>
</html>

All you need to do is set the .innerHTML of the div id="canvas" into localStorage. There's no need for JSON or loops at all.
Also, don't use inline HTML event attributes (onclick). Instead, do all your JavaScript separately using modern, standards based event handling.
Lastly, there is no need for <a> elements to be able to respond to a click event. Actually, your a elements are invalid as they don't have a name or href attribute anyway. The li elements can simply be set up for click events.
This is the code to do it but it won't execute here in the Stack Overflow snippet environment, but you can see it working here.
// Get reference to the "canvas"
var can = document.getElementById("canvas");
// Save the content of the canvas to localStorage
function saveData(){
localStorage.setItem("canvas", can.innerHTML);
}
// Get localStorage data
function restoreData(){
can.innerHTML = localStorage.getItem("canvas");
}
// get load and save references
var load = document.getElementById("load");
var save = document.getElementById("save");
// Set up event handlers
load.addEventListener("click", restoreData);
save.addEventListener("click", saveData);
// Get references to the rect and oval "buttons" and set their event handlers
var rect = document.getElementById("rect");
rect.addEventListener("click", randRect);
var oval = document.getElementById("oval");
oval.addEventListener("click", randOval);
function randomizeColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * letters.length)];
}
return color;
}
function randomizeRectangle() {
var width = Math.random() * 700 + 50;
var height = Math.random() * 250 + 50;
if (height <= 20) {
height = 20;
}
var posX = Math.round(Math.random() * window.innerWidth);
var posY = Math.round(Math.random() * window.innerHeight);
var randomRecObj = {
"width": width + "px",
"height": height + "px",
"posX": posX,
"posY": posY
};
return randomRecObj;
}
function makeShape() {
var rect = randomizeRectangle();
var rectDOM = document.createElement("div");
rectDOM.className = "rectangle";
rectDOM.style.border = "1px solid black";
rectDOM.style.width = rect.width;
rectDOM.style.height = rect.height;
rectDOM.style.background = randomizeColor();
rectDOM.style.top = rect.posY + "px";
rectDOM.style.left = rect.posX + "px";
//rectDOM.addEventListener("click", selectShape);
// rectDOM.style.transform =rect.rotation;
return rectDOM;
}
function randRect() {
var rectDOM = makeShape();
var canvas = document.getElementById("canvas");
canvas.appendChild(rectDOM);
}
function randOval() {
var ovalDOM = makeShape();
ovalDOM.style.borderRadius = "50%";
var canvas = document.getElementById("canvas");
canvas.appendChild(ovalDOM);
}
function changeColor(){
}
function cancelSelection() {
var selected = document.getElementsByClassName("selected");
while (selected) {
selected[0].classList.remove(selected[0]);
}
}
function removeShape(event) {
var selectedShapes = document.getElementsByClassName("selected");
var len = selectedShapes.length;
while (len > 0) {
selectedShapes[0].parentNode.removeChild(selectedShapes[0]);
--len;
}
}
function removeCorners(rectDom) {
var corners = document.getElementsByClassName("corners");
var len = corners.length;
while (len > 0) {
corners[0].classList.remove("corners");
--len;
}
}
.header{
background: #4ABDAC;
color: #fff;
margin: 1px;
}
hr{
border-top: 3px double #2a3132;
}
ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #90afc5;
}
li{
float: left;
border: 2px solid #336b87;
padding: 3px;
margin: 3px;
}
li>a{
display: block;
color: #2a3132;
text-decoration: none;
padding: 10px 14px;
}
#color{
margin-left: 150px;
}
#rect{
margin-left: 100px;
}
li>a:hover{
color: #763626;
cursor: pointer;
}
#canvas{
background: #66a5ad;
position: relative;
height: 1200px;
width: 100%;
}
.corners{
position: absolute;
height: 10px;
width: 10px;
background:#fff;
border: 1px solid black;
display: none;
}
.selected .corners{
display: inline-block;
}
.cornerUpLeft{
top: -5px;
left: -5px;
}
.cornerUpRight{
top: -5px;
right: -5px;
}
.cornerBtmLeft{
bottom: -5px;
left: -5px;
}
.cornerBtmRight{
bottom: -5px;
right: -5px;
}
.rectangle{
position: absolute;
}
.colorBox{
border: 1px solid black;
height: 20px;
width: 20px;
list-style: none;
}
<h1 class="header">Sketch Board</h1>
<div>
<ul class="toolbar">
<li id="load">Load</li>
<li id="save">Save</li>
<li id="rect">Rectangle</li>
<li id="oval">Oval</li>
</ul>
<hr>
</div>
<div class="canvas" id="canvas">
</div>

JavaScript slideshow isn't working as intended

I made this little Slideshow with HTML/CSS/JS. Most of it is working but there is one thing which I can't figure out. How do I make it so the text above each image fits the img itself when autosliding is on? Right now it only shows the right title for each img when i manually click through. Any help is appreciated. Many thanks in advance.
var uniqueRandoms = [];
var indexCount = 0;
var allImagesAndText = ["Seltene römische Goldmünze", "Römische Funde", "Römische Wandmalerei", "Tutanchamun", "Cheops Pyramide", "Ägyptische Malerei"];
var total = allImagesAndText.length - 1;
function makeUniqueRandom() {
if (!uniqueRandoms.length) {
for (var i = indexCount; i <= total; i++) {
uniqueRandoms.push(i);
}
}
var index = Math.floor(Math.random() * uniqueRandoms.length);
var val = uniqueRandoms[index];
uniqueRandoms.splice(index, 1);
return val;
}
function slide(x) {
if(indexCount + x >= 0 && indexCount + x <= total) {
clearInterval(sliderInterval);
indexCount += x;
var Image = document.getElementById('img');
Image.src = "images/img" + indexCount + ".jpg";
update_dom();
sliderInterval = window.setInterval( slideA, 3000);
}
}
function update_dom() {
var left_holder = document.getElementById('left_holder');
var right_holder = document.getElementById('right_holder');
ChangeText(indexCount);
if(indexCount == 0) {
left_holder.style.display = "none";
} else if (indexCount == total) {
right_holder.style.display = "none";
} else {
right_holder.style.display = "block";
left_holder.style.display = "block";
}
}
function slideA() {
var Image = document.getElementById('img');
imagescount = makeUniqueRandom();
Image.src = "images/img" + imagescount + ".jpg";
update_dom();
}
function ChangeText(imgNum) {
document.getElementById("text1").innerHTML = allImagesAndText[imgNum];
}
window.addEventListener("load", function() {
update_dom();
sliderInterval = window.setInterval( slideA, 3000);
document.getElementById("right").addEventListener("click", function() {
slide(1);
});
document.getElementById("left").addEventListener("click", function() {
slide(-1);
});
});
#slideshow {
height: 450px;
width: 650px;
margin: 20px auto;
position: relative;
z-index: 1;
border: 10px solid #000;
border-radius: 10px;
}
#img {
height: 450px;
width: 650px;
}
#left_holder {
height: 450px;
width: 100px;
position: absolute;
left: 0px;
top: 0px;
}
#right_holder {
height: 450px;
width: 100px;
position: absolute;
right: 0px;
top: 0px;
}
.left {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
left: 0px;
}
.right {
height: 50px;
width: 50px;
position: absolute;
top: 40%;
right: 0px;
}
#text1 {
position: absolute;
color: #fff;
font-size: 32px;
background-color: #000;
opacity: 0.5;
left: 37%;
z-index: 2;
}
<div id="slideshow">
<div id="text1">Text</div>
<img src="images/img0.jpg" />
<div id="left_holder">
<img id="left" class="left" src="images/arrow_left.png" />
</div>
<div id="right_holder">
<img id="right" class="right" src="images/arrow_right.png" />
</div>
</div>