在HTML输入中显示JavaScript变量的值

Question

我有这个HTML列表和输入：

            <li>
                <span>19</span>
            </li>
            <li>
                <span>20</span>
            </li>
            <li>
                <span>21</span>
            </li>
            <li>
                <span>22</span>
            </li>
            <li>
                <span>23</span>
            </li>
            <li>
                <span>24</span>
            </li>
        </ul>
    <input type="text" id='lotto' value='' readonly>
</div>

和这个外部JavaScript代码来获取我在数组中单击的每个跨度的值

let clicks = 0
let numbers = []

$(document).on('click', 'li', function(event) {
  if (clicks < 6) {
    numbers[clicks] = parseInt($(this).find('span').html())
  }
  console.log(numbers)
  clicks++
})

有没有可能显示我在输入中点击的跨度?？

Answer 1

是的，这很简单。您可以使用join将数字数组转换为字符串，然后将其设置为文本框的值。

演示：

​

let clicks = 0
let numbers = []

$(document).on('click', 'li', function(event) {
  if (clicks < 6) {
    numbers[clicks] = parseInt($(this).find('span').html())
  }
  //console.log(numbers)
  clicks++;
  
  $("#lotto").val(numbers.join(","));
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li>
  <span>19</span>
</li>
<li>
  <span>20</span>
</li>
<li>
  <span>21</span>
</li>
<li>
  <span>22</span>
</li>
<li>
  <span>23</span>
</li>
<li>
  <span>24</span>
</li>
</ul>
<input type="text" id='lotto' value='' readonly />

​