Ask your JavaScript questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

populate an <ul> with <li> items instead <div><input> JavaScript

  • SOLVED

I need to populate an <ul> with <li> items instead <div><input>

The new code initialization:

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.easy-ticker.js"></script>

<script>
$(document).ready(function(){

var dd = $('.vticker').easyTicker({
direction: 'up',
speed: 'slow',
interval: 2000,
height: 'auto',
visible: 5,
mousePause: 0

}).data('easyTicker');

});


</script>

<div class="vticker">
<ul>
<li>List 1</li>
<li>List 2></li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
</ul>
</div>


=========================================


Existing code: (doesn't work, displays nothing)

<div class = "vticker">

<ul>

<script>
// this will select the list above, generate the items and place them in the list
let list = document.querySelector('.vticker');
let items = '';
let limit = player_limit;

for (let i = 0; i < limit; i++) {
items += `<li id="V${i}">\n`;
i++;
}
list.innerHTML = items;

</script>

</ul>

</div>

AND:

<script>

for (i=0; i <= v_archive.length-2; i++) {

good_1 = v_archive[i];
good_2 = v_archive[i+1];

document.getElementById("V" +i).value = good_1 + " ――― " +good_2;
i++;
}

</script>

Answers (1)

2019-07-29

Rainner Lins answers:

You're not setting up your HTML code correctly and not calling things in the right order. You need to setup your list items first before calling easyTicker:

https://jsfiddle.net/rainnerlins/ry1o7e6z/