javascript - Adding image URL to an array -
i'm trying build basic image carousel. have array of photos, few of stored locally, want able add other pictures around web. have clicking button adds url of image user puts in text box array. url gets added in console, when examine array it's not storing url, instead stores image#url. how can store url? thanks!
var images = ['images/earth.jpg', 'images/shark.jpg', 'images/trolltunga.jpg']; var blankwarning = document.getelementbyid("hidden"); var previousbutton = document.queryselector('#previousbutton'); var nextbutton = document.queryselector('#nextbutton'); var addimage = document.queryselector('#addimage'); var image = document.queryselector('img'); var url = document.getelementbyid('url'); var x = 0; previousbutton.addeventlistener('click', function() { x--; if (x < 0) { x = (images.length - 1); } image.src = images[x]; }); nextbutton.addeventlistener('click', function() { x++; if (x === images.length) { x = 0; } image.src = images[x]; }); addimage.addeventlistener('click', function() { if (url === '') { blankwarning.style.display = 'inline'; blankwarning.style.color = 'red'; } else { images.push(url); } }); #image-wrapper img { width: 100px; height: 100px; } #hidden { display: none; } <div id="image-wrapper"> <img src='http://placehold.it/100x100' /> </div> <div id="button-wrapper"> <button id="previousbutton">previous</button> <button id="nextbutton">next</button> </div> <div id="add-image"> url: <input type="text" id="url"> <button id="addimage">add image</button><br> <p id="hidden">image url field cannot blank</p> </div>
Comments
Post a Comment