我正在try 编写一个JavaScript程序,它将接受用户输入,即他们的吉他使用的音阶长度,以及它有多少基调,然后进行必要的计算,以解决每个基调之间的距离.

我希望它的工作方式是,变量将根据需要创建.因此,用户输入他们的音量和音量,程序将显示一个包含所有内容的HTML表,并且只显示他们最初输入的音量的行.

问题是,我对JavaScript完全陌生,除了了解for循环之外,我对如何实现这一点一无所知.

编辑:这些值现在计算正确了,也正确地进入了表中!以下是我的更新代码:

<!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>

推荐答案

所以在HTML语言中,我会创建一个简单的表

<body>
    <table>
        <tbody id="main-table">
        </tbody>
    </table>
</body>

然后,您可以在您的JavaScript中添加表行和单元格

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);
}

Javascript相关问答推荐

我的glb文件没有加载到我的three.js文件中

是什么原因导致此Angular 16电影应用程序中因类型错误而不存在属性?

通过使用100%间隔时间来代表我们还剩多少时间来倒计时

提交表格后保留Web表格中的收件箱值?

类型脚本中只有字符串或数字键而不是符号键的对象

如何在Obsidian dataview中创建进度条

如何在ASP.NET中使用Google Charts API JavaScript将条形图标签显示为绝对值而不是负值

如何在文本字段中输入变量?

当我在Reaction中创建一个输入列表时,我的输入行为异常

如何利用CSS中的隐藏元素实现平滑扩展和防止网格行间隙

令牌JWT未过期

不同表的条件API端点Reaction-redux

MongoDB中的嵌套搜索

Next.js无法从外部本地主机获取图像

如果对象中的字段等于某个值,则从数组列表中删除对象

使用可配置项目创建网格

未找到用于 Select 器的元素:in( puppeteer 师错误)

未捕获的不变违规:即使在使用DndProvider之后也应使用拖放上下文

使用静态函数保存 node 前的钩子

无法向甜甜圈图表上的ChartJSImage添加可见标签