Html Question posted in
Some basic documentation can be found here.

How to create a FOR loop that will work for calculating instrument scale length and put it in an HTML table?

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: I’ve since figured out how to get the calculations to work correctly and print on screen, but still have to figure out how to put them in a table. Also, the numbers are supposed to start at 1 rather than 0. Here’s my updated code:

<!DOCTYPE html>
<html>

<head>
    
</head>

<body>

  

  <script type="text/javascript">
    var scaleLength = prompt("What is your desired scale length?");
    var numFrets = prompt("How many frets will you have?");
    var testing = 0;
    var distFromNut = 0;
    const fretDists = [];
        
        for (let i = 0; i < numFrets; i++) {
            testing = (scaleLength - distFromNut) / 17.817;
            fretDists.push(testing);
            distFromNut = fretDists[i] + distFromNut;
            document.write(i + ": " + distFromNut.toFixed(4) + "<br>");
        }
  </script>

</body>
</html>
Tags:

2

Answers


  1. 0

    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);
}
    Login or Signup to reply.
  2. 0

    Below you will find a working snippet. I replaced your prompt()s by numeric input fields. As soon as there is valid input in both of them the calculation in the function calc() is triggered and the results are shown in the table.

    Admittedly, there are quite a few concepts in the script that might be new for a "newbie" but I consider them as well worth learning.

    const el={}, tbd=document.querySelector("#table tbody");
["scaleLength","numFrets"].forEach(n=>{
 el[n]=document.querySelector(`input[name=${n}]`);
 el[n].addEventListener("input",calc);
});
function calc(){
 let scaleLength=el.scaleLength.value,
     numFrets   =el.numFrets.value,
     distsFromNut=[];
 if(scaleLength>0 && numFrets>0){
  for (let i=0,len=scaleLength; i < numFrets; i++) {
   len-=len/17.817153;
   distsFromNut.push(scaleLength-len);
  }
  tbd.innerHTML=distsFromNut.map((d,i)=>
   `<tr><td>${i+1}</td><td>${d.toFixed(4)}</td></tr>`
  ).join("");
 }
}
    <input type="number" name="scaleLength" placeholder="Scale length">
<input type="number" name="numFrets" placeholder="Number of frets">
<table id="table">
 <thead><tr><th>no.</th><th>dist. from nut</th></tr></th></thead>
 <tbody></tbody>
</table>

    When you put the snippet into action on your own page, please make sure that you place the <script> section below your <body> since the script expects the DOM to have loaded already.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search