Display a JavaScript variable's value in HTML input [duplicate]

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
– Dave Newton, Commented Jul 12, 2021 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
– Heretic Monkey, Commented Jul 12, 2021 at 15:58
Does adding following code in the If statement serve the purpose: document.getElementById("lotto").value= numbers.toString(); — Gergo
– Gergo, Commented Jul 12, 2021 at 16:08

ADyson · Accepted Answer · 2021-07-12 15:56:41Z

0

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

answered Jul 12, 2021 at 15:56

ADyson

62.9k16 gold badges85 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Display a JavaScript variable's value in HTML input [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related