3个向量合向量计算时JS代码返回NaN问题排查求助

问题原因 #

• 向量输入元素直接参与运算：代码中vectoro/vectortw/vectorth是获取到的DOM节点对象，并非输入的数值，必须读取.value属性并转为数字类型才能参与数学计算，直接用DOM对象运算必然返回NaN。
• toFixed()方法误用：该方法返回的是字符串类型，在运算过程中调用会导致后续的乘法、加法变成字符串拼接或者非法数值运算，应该在所有计算完成后再对最终结果做精度处理。
• 输入控件属性错误：规范的数字输入框type值是number，你写的numbers不符合标准，部分浏览器可能无法正常识别输入值类型。
• 缺少空值判断：如果任意一个输入框为空时触发计算，读取到的value是空字符串，转数字后为NaN，最终结果也会是NaN。

修正后代码 #

var vectoro = document.getElementById("f1");
var vectortw = document.getElementById("f2");
var vectorth = document.getElementById("f3");
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
var d3 = document.getElementById("d3");
var hasil = document.getElementById("hasil");

function prosessatu(){
    // 读取所有输入值并转为数字类型
    let v1 = Number(vectoro.value);
    let v2 = Number(vectortw.value);
    let v3 = Number(vectorth.value);
    let deg1 = Number(d1.value);
    let deg2 = Number(d2.value);
    let deg3 = Number(d3.value);
    
    // 校验所有值为有效数字再执行计算
    if(isNaN(v1) || isNaN(v2) || isNaN(v3) || isNaN(deg1) || isNaN(deg2) || isNaN(deg3)) {
        hasil.value = '';
        return;
    }

    // 计算x轴分量
    let f1 = v1 * Math.cos(deg1 * Math.PI / 180);
    let f2 = v2 * Math.cos(deg2 * Math.PI / 180);
    let f3 = v3 * Math.cos(deg3 * Math.PI / 180);
    // 计算y轴分量
    let fsino = v1 * Math.sin(deg1 * Math.PI / 180);
    let fsintw = v2 * Math.sin(deg2 * Math.PI / 180);
    let fsinth = v3 * Math.sin(deg3 * Math.PI / 180);
    
    let sigmafx = Math.pow(f1 + f2 + f3, 2);
    let sigmafy = Math.pow(fsino + fsintw + fsinth, 2);
    // 最终结果保留2位小数
    hasil.value = Math.sqrt(sigmafx + sigmafy).toFixed(2);
}

vectoro.oninput = prosessatu;
d1.oninput = prosessatu;
vectortw.oninput = prosessatu;
d2.oninput = prosessatu;
vectorth.oninput = prosessatu;
d3.oninput = prosessatu;

同时将输入控件的属性修正为<input type="number">即可正常运行。

内容的提问来源于stack exchange，提问作者Fullerena