Issue
I am trying to write a JavaScript program that will accept user input, that being the Scale Length used for their guitar, and how many frets it has, then do the necessary calculations to solve for the distance between each fret.
How I would prefer it to work is the variables would be created as needed. So the user inputs their scale and frets, and the program will display an HTML table with everything, and only display rows for the number of frets they originally input.
The problem is, I'm completely new to JavaScript, and how not the slightest idea how to accomplish this, other than knowing a FOR loop is involved.
EDIT: The values are now calculating correctly, as well as entering into the table correctly! Here's my updated code:
<!DOCTYPE html>
<html>
<head>
<title>Banjo Neck Calculations</title>
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<table>
<tbody id="scaleLengthTable">
<tr>
<th colspan="2" id="tableHeader"></th>
</tr>
<tr>
<th>Fret</th>
<th>Distance From Nut</th>
</tr>
</tbody>
</table>
<script> // Calculates the the scale length
let scaleLength = prompt("What is your desired scale length?"); // Prompts user for the scale length of their instrument
let numFrets = prompt("How many frets will you have?"); //Prompts user for the number of frets on their instrument
let testing = 0; // Placeholder value, updated by the below for loop
let distFromNut = 0; // Placeholder value, updated by the below for loop
const fretDists = []; // An array that is filled with values by the below for loop
let main_table = document.getElementById("scaleLengthTable");
for (let i = 0; i < numFrets; i++) {
// Create new row and cells for the table
let row = document.createElement("tr");
let cell1 = document.createElement("td");
let cell2 = document.createElement("td");
testing = (scaleLength - distFromNut) / 17.817;
fretDists.push(testing);
distFromNut = fretDists[i] + distFromNut;
// Add the cells to the row and the row to the table body
cell1.appendChild(document.createTextNode(i + 1));
cell2.appendChild(document.createTextNode(distFromNut.toFixed(4) + '"'));
row.appendChild(cell1);
row.appendChild(cell2);
main_table.appendChild(row);
document.getElementById("tableHeader").innerHTML = "Scale Length = " + scaleLength + '" - ' + numFrets + " Frets";
}
</script>
</body>
</html>
Solution
So in HTML I would create a simple table
<body>
<table>
<tbody id="main-table">
</tbody>
</table>
</body>
Then in your JavaScript you can add table rows and cells
let main_table = document.getElementById("main-table");
for (let i = 0; i < numFrets; i++) {
// Create new row and cells for the table
let row = document.createElement("tr");
let cell1 = document.createElement("td");
let cell2 = document.createElement("td");
testing = (scaleLength - distFromNut) / 17.817;
fretDists.push(testing);
distFromNut = fretDists[i] + distFromNut;
// Add the cells to the row and the row to the table body
cell1.appendChild(document.createTextNode(i + 1));
cell2.appendChild(document.createTextNode(distFromNut.toFixed(4)));
row.appendChild(cell1);
row.appendChild(cell2);
main_table.appendChild(row);
}
Answered By - adkop
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.