Can anyone assist with solving this issue?
The webpage on JSFIDDLE displays 4 news containers, but an 'undefined' string appears before the first news container. I am looking to remove that 'undefined' string.
Here is the HTML code:
<div class="banners__wrap-article" id='sk_wrap_82630'></div>
And here is the JavaScript code:
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById('sk_wrap_82630').innerHTML = '<div class="banners__smi2"> \
<div class="banners__smi2__header"><span class="banners__smi2__header-text">News</span></div> \
' + cycleItems() + ' \
</div> \
<div class="banners__smi2"> \
<div class="banners__smi2__header"><span class="banners__smi2__header-text"></span></div> \
</div>';
}
}
function cycleItems(){
var items = "";
var massive = JSON.parse(xmlhttp.responseText);
for (var i = 0; i <= 3; i++) {
items += constructItem(massive.news[i].url, massive.news[i].img, massive.news[i].title);
};
return items;
}
function constructItem(url, img, title){
var item;
return '<div class="banners__smi2__item"> \
<a href="' + url + '" class="banners__smi2__link"> \
<img class="banners__smi2__img" src="' + img + '" alt="" /> \
<span class="banners__smi2__title">' + title + '</span> \
</a> \
</div>';
}