中点公式在 JS 中返回奇怪的输出

Question

所以我有以下代码：

function domidpoint() {
    var x1 = document.getElementById("x1").value;
    var y1 = document.getElementById("y1").value;
    var x2 = document.getElementById("x2").value;
    var y2 = document.getElementById("y2").value;
    var midpointx, midpointy;
    if(x1, y1, x2, y2 != '') {
        midpointx = (x1 + x2) / 2;
        midpointy = (y1 + y2) / 2;
        document.getElementById("result").innerHTML = midpointx.toString() + "," + midpointy.toString();
    }
}

但是当我运行它的值 (-6,8),(6,-7) 应该 return (0,0.5) 的中点时，我得到了输出-33，南。有谁知道这是为什么？我是 javascript 的新手，所以如果我在做一些愚蠢的事情，请随时告诉我。

Answer 1

value returns 一个字符串；使用 + 表示数字加法，但 concatenation 表示字符串。（看看 x1+x2 和 y1+y2 是什么，看看区别。）

Answer 2

当您从 DOM 读取某些内容时，它 returns 一个字符串，当您尝试对其执行任何操作时。发生了这样的事情：

const midPointX = '-66'/2;
const midPointY = '8-7'/2;

第一点仍然有效，这就是您得到 -33 的原因。如果您将顺序更改为 (x2 + x1)，您将得到 NaN。

'8-7' 不是有效数字，这就是您得到 NaN 的原因。

注意： 您对字符串执行算术运算 (-,*,/,%)， 除了加法 (+)。

'1' + '2'; // '12'
'1' - '2'; // -1

要解决这个问题，您必须将字符串转换为数字。

const x1 = '-6', y1 = '8', x2 = '6', y2 = '-7';
const midPointX = (+x1 + +x2) / 2;
const midPointY = (+y1 + +y2) / 2;

console.log(midPointX, midPointY);

Answer 3

您的代码有两个问题，第一个是您在 if(x1, y1, x2, y2 != '') 中有语法错误，您应该单独进行每个检查 x1 != '' 并用 AND 运算符 && 见下面的代码

第二个问题是 document.getElementById("x1").value return 是 string 不是 number 所以你需要在使用前把它转换成数字避免不必要的行为

function domidpoint() {
    var x1 = document.getElementById("x1").value;
    var y1 = document.getElementById("y1").value;
    var x2 = document.getElementById("x2").value;
    var y2 = document.getElementById("y2").value;
    var midpointx, midpointy;
    if (x1 != "" && x2 != "" && y1 != "" && y2 != "") {
        midpointx = (Number(x1) + Number(x2)) / 2;
        midpointy = (Number(y1) + Number(y2)) / 2;
        document.getElementById("result").innerHTML = midpointx.toString() + "," + midpointy.toString();
    }
}

最后看来您是 javascript 的新手，所以这里有两个很棒的资源可以帮助您了解 javascript 基础知识

https://www.youtube.com/watch?v=W6NZfCO5SIk ---（视频） https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics -- （文章）

Answer 4

计算前确保所有值都转换为数字类型

中点公式在 JS 中返回奇怪的输出

Midpoint Formula returning weird output in JS

javascript

math