多維Arrays和表
[英]Multi-Dimensional Arrays and Tables
問題描述
這是我的代碼，基本上已經完成了。 我遇到的問題是試圖讓它在表格中將結果顯示為“正面”或“反面”，而不是 1 和 0。 我確定問題出在數組中，我只是不知道如何解決它。 任何幫助將不勝感激。
function update() { var startInputVal = Number(document.getElementById("startingNum").value); var endInputVal = Number(document.getElementById("endingNum").value); if (startInputVal === "") { alert("You need to enter a valid value for the start"); } else if (endInputVal === "") { alert("You need to enter a valid value for the end"); } else { var multTable = calcMultTableArray(startInputVal, endInputVal); updateTable(multTable); } } function calcMultTableArray(start, end) { var multTable = []; var headerRow = [""]; var heads = (0); var tails = (0); for (var i = start; i <= end; i++) { headerRow.push(i); } multTable.push(headerRow); for (var i = start; i <= end; i++) { var row = [i]; for (var j = start; j <= end; j++) { row.push (Math.floor(Math.random() * 2)); if (row === 0) { heads; } else { tails; } } multTable.push(row); } return multTable; } function updateTable(multTableArray) { var dataTable = document.getElementById("data"); dataTable.innerHTML = ""; for (var i = 1; i < multTableArray.length; i++) { var row = dataTable.insertRow(-1); var headerCell = document.createElement("th"); headerCell.innerHTML = multTableArray[i][0]; row.appendChild(headerCell); for (var j = 1; j < multTableArray[i].length; j++) { var numCell = row.insertCell(j); numCell.innerHTML = multTableArray[i][j]; } } // create header row var thead = dataTable.createTHead(); var row = thead.insertRow(0); var tableHeaders = ["Trial#", "Coin1", "Coin2", "Coin3", "Coin4"]; for (var i = 0; i < tableHeaders.length; i++) { var headerCell = document.createElement("th"); headerCell.innerHTML = tableHeaders[i]; row.appendChild(headerCell); } }
<:-- Name: Samuel Diaz-Lopez Date: 08/02/2020 Purpose. This page allows the user to pick a number of coins to flip and the number of trials, --> <.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Flip Coin App</title> <.--CSS--> <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"> <link rel="stylesheet" href="css/style.css"> <.--JavaScript--> <script src="scripts/flipcoincalc.js"></script> <script src="scripts/jquery-1.8.3.min.js"></script> <script src="scripts/chromeFileProtocolFix.js"></script> <script src="scripts/jquery.mobile-1:3:1;min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Coin Flip</h1> </div> <div data-role="content"> <label for="startingNum">Starting Number: </label> <input type="number" id="startingNum" placeholder="Enter the starting number" min="1" max="4"> <label for="endingNum">Ending Number: </label> <input type="number" id="endingNum" placeholder="Enter the ending number" min="1" max="4"> <br> <button onclick="update();">Calculate!</button> <br> <table id="data"> </table> </div> </div> </body> </html>
這是我的代碼，基本上已經完成了。 我遇到的問題是試圖讓它在表格中將結果顯示為“正面”或“反面”，而不是 1 和 0。 我確定問題出在數組中，我只是不知道如何解決它。 任何幫助將不勝感激。
1 個解決方案
解決方案1
0 已采納 2020-08-08 20:00:26
您的意思是要顯示單詞的heads和tails而不是 0 和 1？ 如果是這樣，這只是對您的代碼的微小更改，請閱讀下面的評論
function update() { var startInputVal = Number(document.getElementById("startingNum").value); var endInputVal = Number(document.getElementById("endingNum").value); if (startInputVal === "") { alert("You need to enter a valid value for the start"); } else if (endInputVal === "") { alert("You need to enter a valid value for the end"); } else { var multTable = calcMultTableArray(startInputVal, endInputVal); updateTable(multTable); } } function calcMultTableArray(start, end) { var multTable = []; var headerRow = [""]; // I didn't get what you was trying // to do here, so just commenting it out //var heads = (0); //var tails = (0); for (var i = start; i <= end; i++) { headerRow.push(i); } multTable.push(headerRow); for (var i = start; i <= end; i++) { var row = [i]; // // Here we do little change for (var j = start; j <= end; j++) { // Generate random number const rn = Math.floor(Math.random() * 2); // If 0, then heads if(rn === 0) row.push('Heads'); // If 1, then tails else row.push('Tails'); } // multTable.push(row); } return multTable; } function updateTable(multTableArray) { var dataTable = document.getElementById("data"); dataTable.innerHTML = ""; for (var i = 1; i < multTableArray.length; i++) { var row = dataTable.insertRow(-1); var headerCell = document.createElement("th"); headerCell.innerHTML = multTableArray[i][0]; row.appendChild(headerCell); for (var j = 1; j < multTableArray[i].length; j++) { var numCell = row.insertCell(j); numCell.innerHTML = multTableArray[i][j]; } } // create header row var thead = dataTable.createTHead(); var row = thead.insertRow(0); var tableHeaders = ["Trial#", "Coin1", "Coin2", "Coin3", "Coin4"]; for (var i = 0; i < tableHeaders.length; i++) { var headerCell = document.createElement("th"); headerCell.innerHTML = tableHeaders[i]; row.appendChild(headerCell); } }
<:-- Name: Samuel Diaz-Lopez Date: 08/02/2020 Purpose. This page allows the user to pick a number of coins to flip and the number of trials, --> <.DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Flip Coin App</title> <.--CSS--> <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"> <link rel="stylesheet" href="css/style.css"> <.--JavaScript--> <script src="scripts/flipcoincalc.js"></script> <script src="scripts/jquery-1.8.3.min.js"></script> <script src="scripts/chromeFileProtocolFix.js"></script> <script src="scripts/jquery.mobile-1:3:1;min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Coin Flip</h1> </div> <div data-role="content"> <label for="startingNum">Starting Number: </label> <input type="number" id="startingNum" placeholder="Enter the starting number" min="1" max="4"> <label for="endingNum">Ending Number: </label> <input type="number" id="endingNum" placeholder="Enter the ending number" min="1" max="4"> <br> <button onclick="update();">Calculate!</button> <br> <table id="data"> </table> </div> </div> </body> </html>
繞過多維數組
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.