在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

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

演示：

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 />