JavaScript函数返回由2组和弦组成的梯度，仅在从特定函数调用时才返回0

Question

我在Javascript中有一个函数来返回2组坐标的梯度。从画布元素的两次单击中检索坐标。这是做了两行。

梯度函数正常工作：

    function calcGradient(x1,y1,x2,y2){
        return ((y2-y1)/(x2-x1));
}

如果我叫它正常的话，它就会起作用：

console.log(calcGradient(0, 0, 3, 6)); // Returns 2

即使是小数，当我认为这就是问题所在时：

console.log(calcGradient(0, 0, 3.2324, 6.969)); // Returns 2.1559831703997028

但当我这么说的时候

function updateLineStats() {
    var p_line1_formula = document.querySelector("#formula_line-1 span");
    var p_line2_formula = document.querySelector("#formula_line-2 span");

    var p_line1_gradient = document.querySelector("#gradient_line-1 span");
    var p_line2_gradient = document.querySelector("#gradient_line-2 span");

    var p_line1_length = document.querySelector("#length_line-1 span");
    var p_line2_length = document.querySelector("#length_line-2 span");

    var p_isIntersecting = document.querySelector("#isIntersecting");

    var elementDir = [
        [p_line1_formula, p_line2_formula],
        [p_line1_gradient, p_line2_gradient],
        [p_line1_length, p_line2_length]
    ];

    lines.forEach(function (lineData, i) {
        if(!(lineData[0].includes(null) || lineData[1].includes(null))) {

            elementDir[1][i].innerHTML = calcGradient(
                lineData[0][0],
                lineData[1][1],
                lineData[1][0],
                lineData[1][1]);

            elementDir[2][i].innerHTML = calcLength(
                lineData[0][0],
                lineData[1][1],
                lineData[1][0],
                lineData[1][1]);
        }
    })
}

它将0返回到所讨论的<p>元素。

这些线的长度可以工作。尚未使用formula变量。

画布是500x500，因此值在这两者之间的任意位置。

Answer 1

我用示例数据创建了一个示例，向您展示它是如何工作的。如果有2组以上的坐标，那么要么重写现有的坐标，要么动态创建新元素并将它们添加到DOM中。

​

     function calcGradient(x1,y1,x2,y2){
        return ((y2-y1)/(x2-x1));
     }
     
     function calcLength(x1,y1,x2,y2){
        return ((y2-y1)/(x2-x1));
     }

     let lines = [ 
                   [ [0,0],
                     [3,6] ],
                   [ [0,0],
                     [3.2324,6.969] ]
                 ];
       
       
        var p_line1_formula = document.querySelector("#formula_line-1 span");
        var p_line2_formula = document.querySelector("#formula_line-2 span");

        var p_line1_gradient = document.querySelector("#gradient_line-1 span");
        var p_line2_gradient = document.querySelector("#gradient_line-2 span");

        var p_line1_length = document.querySelector("#length_line-1 span");
        var p_line2_length = document.querySelector("#length_line-2 span");

        var elementDir = [
            [p_line1_formula, p_line2_formula], //elementDir[0][0] , elementDir[0][1]
            [p_line1_gradient, p_line2_gradient], //elementDir[1][0] , elementDir[1][1]
            [p_line1_length, p_line2_length] //elementDir[2][0] , elementDir[2][1]
        ];
        let counter = 1;
        lines.forEach( el=>{
            //checks if the sub array is null, counter should not be greater than 2 because it's the length of elementDir
            if(el != null && counter < elementDir.length){
                //gets the sub array at position 1 and the element with index 0 => p_line1_gradient
                elementDir[counter][0].innerHTML = calcGradient(
                    el[0][0],
                    el[0][1],
                    el[1][0],
                    el[1][1]);
                
                //gets the sub array at position 1 and the element with index 1 => p_line2_gradient
                elementDir[counter][1].innerHTML = calcLength(
                    el[0][0],
                    el[0][1],
                    el[1][0],
                    el[1][1]);
            }

            counter++;
        });

<div id="gradient_line-1"><span></span></div>
    <div id="gradient_line-2"><span></span></div>
    <div id="length_line-1"><span></span></div>
    <div id="length_line-2"><span></span></div>

​