Andrew Nguyen Andrew Nguyen - 2 months ago 4x
HTML Question

Changing text of input field on click


  • In my if-else statement when a
    has the class
    the text of the input field should be blank, but right now it's the name of last clicked player.

  • Right now, when a player is selected all 20 input fields have their
    text changed to the player last clicked. However, the name of the
    first player with
    should be put into the first
    input field
    and so on until all 20 players have been selected and the 20 input fields are filled.


// Every time a player is clicked, note the name of the player
$(".player").on("click", function(){

// Get the name of that player, only if
// Put the text of that player into the appropriate input field

if ($(this).find("")) {
var playerName = $(this).find(".player__name").html();
} else {

index.html (Form)

<form id="form">
<input type="text" name="p1" id="p1" required>
<input type="text" name="p2" id="p2" required>
<input type="text" name="p3" id="p3" required>
<input type="text" name="p4" id="p4" required>
<input type="text" name="p5" id="p5" required>
<input type="text" name="p6" id="p6" required>
<input type="text" name="p7" id="p7" required>
<input type="text" name="p8" id="p8" required>
<input type="text" name="p9" id="p9" required>
<input type="text" name="p10" id="p10" required>
<input type="text" name="p11" id="p11" required>
<input type="text" name="p12" id="p12" required>
<input type="text" name="p13" id="p13" required>
<input type="text" name="p14" id="p14" required>
<input type="text" name="p15" id="p15" required>
<input type="text" name="p16" id="p16" required>
<input type="text" name="p17" id="p17" required>
<input type="text" name="p18" id="p18" required>
<input type="text" name="p19" id="p19" required>
<input type="text" name="p20" id="p20" required>
<button type="submit">
Submit your vote

index.html (Player)

<div class="player player--goalie year--1970">
<div class="tooltip tooltip--tall">
<p class="tooltip__name">Glen Hanlon</p>
<p class="tooltip__hometown"><span>Hometown:</span> Brandon, Man.</p>
<p class="tooltip__years"><span>Years Played:</span> 1974-1977</p>
<div class="tooltip__stats--inline">
<div class="stats__group stats--games">
<p class="stats__header">GP</p>
<p class="stats__number--games">172</p>

<div class="stats__group stats--goalsag">
<p class="stats__header">GA</p>
<p class="stats__number">4.22</p>
<p class="stats__number">3.99</p>
<p class="stats__number stats__number--goalsag">3.09</p>

<div class="stats__group stats--savep">
<p class="stats__header">SAV%</p>
<p class="stats__number">.892</p>
<p class="stats__number">.891</p>
<p class="stats__number stats__number--savep">.906</p>

<div class="stats__group stats--shutouts">
<p class="stats__header">SO</p>
<p class="stats__number">0</p>
<p class="stats__number stats__number--shutouts">4</p>
<p class="stats__number">4</p>
</div> <!-- tooltip__stats--inline -->
</div> <!-- tooltip -->
<div class="player__headshot player--hanlon">
<div class="picked is-inactive"><i class="fa fa-star" aria-hidden="true"></i></div>
<p class="player__name" value="Glen Hanlon">Glen Hanlon</p>
<p class="player__position">Goalie</p>


you need to tell what specific textbox should update.

// Every time a player is clicked, note the name of the player
$(".player").on("click", function(){
    var playerNames = [];
    $("input:text").each(function(i, t) { playerNames.push(t.value) });

    if ($(this).find("")) {
        var playerName = $(this).find(".player__name").html();
        var index = playerNames.indexOf(playerName);

        if(index == -1) // add player
            $("input:text:eq(" + playerNames.indexOf("") + ")").val(playerName);
        else // remove player
            $("input:text:eq(" + index + ")").val("");           
    } else {


on each click, getting all text box values into an arry playerNames using $.each loop

then check the active (or clicked) playerName already exists in the playerNames array or not.

if not exists (i.e index == -1) then add it to next empty textbox

playerNames.indexOf("") brings the index of next empty textbox

else remove it from the textbox where it exists.

Hope this helps!.