how to slide text from left to right instead of images in this code?

Question

i have this code here for sliding images but i wanted to do the same thing for sliding text instead of images but it is not working with me when i tried it, so any one can do it for me text slider moving from left to right instead of image slider without mouse click? and thanks in advance

 var mainImage = document.getElementById("mainImage"); //Create image array var imageArray = ["Life is what happens to us while we are making other plans","Life is what happens to us while we are making other plans","Life is what happens to us while we are making other plans"]; //Set up array index var imageIndex = 0; function changeImage() { mainImage.setAttribute("src",imageArray[imageIndex]); imageIndex++; if(imageIndex >= imageArray.length) { imageIndex = 0; } } //Create function to cycle through images mainImage.onclick = changeImage //Call cycle function var intervalHandle = setInterval(changeImage,3000); mainImage.onclick = function () { clearInterval(intervalHandle); }

 h1 { text-align: center; } #mainImage { padding-left: 350px; padding-top: 40px; }

 //<img id="mainImage" src="images/D.png" />

Answer 1

You need to use HTML DOM innerHTML Property .

Create an element with id="text" change document.getElementById("text").innerHTML

 var textElement = document.getElementById("text"); //Create image array var imageArray = ["Life is what happens to us while we are making other plans","Life is what happens to us while we are making other plans2","Life is what happens to us while we are making other plans3"]; //Set up array index var imageIndex = 0; function changeImage() { textElement.innerHTML = imageArray[imageIndex] imageIndex++; if(imageIndex >= imageArray.length) { imageIndex = 0; } } //Create function to cycle through images textElement.onclick = changeImage //Call cycle function var intervalHandle = setInterval(changeImage,3000); textElement.onclick = function () { clearInterval(intervalHandle); }

 h1 { text-align: center; } #mainImage { padding-left: 350px; padding-top: 40px; }

 <p id="text"></p>