Display a JavaScript variable's value in HTML input

Question

I have this HTML list and input:

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

and this external JavaScript code to get the value of each span I click on in an array

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++
})

is there any possible way to display the spans i clicked on in the input ??

Yes; pick an element and set its text content (or HTML) to the value. — Dave Newton, Jul 12 '21 at 15:55
well, you'd need valid HTML, but you'd just get the input and set its value to the numbers. — Heretic Monkey, Jul 12 '21 at 15:58
Does adding following code in the If statement serve the purpose: document.getElementById("lotto").value= numbers.toString(); — Gergo, Jul 12 '21 at 16:08

score 0 · Answer 1 · answered Jul 12 '21 at 15:56

Yes, it's fairly straightforward. You can use join to turn the array of numbers into a string and then set that as the textbox's value.

Demo:

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

Display a JavaScript variable's value in HTML input

1 Answers1