將值從輸入文本復制到另一個字段

Question

所以在做一個小項目來幫助我學習 Javascript 所以要溫柔點:)

我正在創建一個有 2 個輸入值（homeTeam 和 awayTeam）的小記分牌，我試圖將它們復制到記分卡變量（Team_1 和 Team_2），但無法讓它工作。 如果使用 promt 進行此工作並更改為有點笨重。

我一直在玩弄下面的代碼，但無法使其正常工作，因此感謝您的幫助。

   <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

您可以使用HTMLInputElement的.value屬性將輸入字段中的值放入 javascript 個變量中。

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

除非你正在編寫普通的 javascript 代碼，它也必須在舊瀏覽器中工作（不太可能因為你說你正在學習）我建議在定義不會改變（不可變）的作用域值時使用const並在定義可以改變的作用域變量時使用let變化（可變）。 避免使用var除非你真的想達到var-hoisting 的效果。

我還添加了兩個示例 function 調用。

updateMatchesBetweenTeams檢查是否已經存在具有相同主客場球隊的比賽並增加其matchesPlayed計數器，否則創建一個matchesPlayed: 1的新條目。

updateTableOfMatches清除並重新填充顯示到目前為止存儲的所有匹配項的表。 表格的列是主場、客場和比賽。

有關使用的 DOM API 的文檔，請參閱createElement 、 appendChild和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>