Copy value from input text to another field

Question

so working on a little project to help me learn Javascript so be gently :)

I am creating a little scoreboard which has 2 input values (homeTeam & awayTeam) and i am attempting to copy these to a scorecard variable (Team_1 & Team_2) but can't get this to work. Had this working using a promt and changed as was a bit clunky.

I have been playing around with the below code but cant get this to work, so any help is appreciated.

   <label for="home">Home Team</label>
            <input type="text" id="homeInput" name="fname"><br><br>
            <label for="home">Away Team</label>
            <input type="text" id="awayInput" name="fname"><br><br>

            <button onclick="disp_prompt()">Submit Teams</button>

function disp_prompt(){
    var homeInput = document.getElementById('homeInput').innerHTML = Team_1;
    var awayInput = document.getElementById('awayInput').innerHTML = Team_2;
   
    document.getElementById('homeInput').value = document.getElementById('Team_1').value;     
   
}

Answer 1

You can get the values from the input fields into javascript variables by using the .value property of the HTMLInputElement.

const homeTeam = document.getElementById('homeInput').value;
const awayTeam = document.getElementById('awayInput').value;

Unless you are writing plain javascript code that has to work in old browsers as well (unlikely since you said you are learning) I would recommend using const when defining scoped values that won't change (immutable) and let when defining scoped variables that can change (mutable). Avoid using var unless you actually want to achieve the var-hoisting effect.

I also added two sample function calls.

The updateMatchesBetweenTeams checks if a match with the same home vs away teams already exists and increases its matchesPlayed counter, otherwise creates a new entry with matchesPlayed: 1.

The updateTableOfMatches clears and refills a table showing all matches stored so far. Columns of the table are Home, Away and Matches Played.

For docs of the used DOM APIs see createElement, appendChild and textContent

document.getElementById("add-teams").addEventListener("click", addTeams);
  
function addTeams() {
    const homeTeam = document.getElementById('homeInput').value;
    const awayTeam = document.getElementById('awayInput').value;

    // homeTeam and awayTeam contain the text from inputs
    // now you can call other functions in your code and pass these values in
    
    updateMatchesBetweenTeams(matches, homeTeam, awayTeam)

    updateTableOfMatches(matches)
}

// Matches should contain objects with structure
// { homeTeam: string, awayTeam: string, matchesPlayed: number }
const matches = []

function updateMatchesBetweenTeams(matches, homeTeam, awayTeam) {
    const match = matches.find(it => it.homeTeam === homeTeam && it.awayTeam === awayTeam)
    if (match) {
      // entry already exists, so just update it
      match.matchesPlayed++
    } else {
      // create a new entry
      // { homeTeam, awayTeam } is shorthand for { homeTeam: homeTeam, awayTeam: awayTeam }
      matches.push({ homeTeam, awayTeam, matchesPlayed: 1 })
    }
    return matches
}

function updateTableOfMatches(matches) {
    const tbody = document.getElementById('matches-table-body')
    // clear the table first
    tbody.textContent = ''
    for (let match of matches) {
        const columnValues = [match.homeTeam, match.awayTeam, match.matchesPlayed]
        tbody.appendChild(createTableRow(columnValues))
    }
}

function createTableRow(columnValues) {
    const tableRow = document.createElement("tr")

    for (let columnValue of columnValues) {
      const td = document.createElement("td")
      td.textContent = columnValue
      // or td.appendChild(document.createTextNode(columnValue))
      tableRow.appendChild(td)
    }
    
    return tableRow
}

<label for="home">Home Team</label>
<input type="text" id="homeInput" name="fname"><br><br>
<label for="home">Away Team</label>
<input type="text" id="awayInput" name="fname"><br><br>

<button type="button" id="add-teams">Add Teams</button>

<p>The table below shows all matches between the teams</p>

<table id="matches-table">
  <thead>
    <tr>
      <th>Home</th>
      <th>Away</th>
      <th>Matches Played</th>
    </tr>
  </thead>
  <tbody id="matches-table-body">
  </tbody>
</table>