在javascript中划分两个变量

Question

好的，所以我试着用JavaScript编写中点计算器以获得乐趣并用语言练习，公式非常简单，它只是x1 + x2 / 2和y1 + y2 / 2，我想要用户能够定义x和y坐标，这就是我想出的：

alert("welcome to nate's midpoint calculator!");
var x1 = prompt("type your first x coordanate!");
var y1 = prompt("excelent!, now your first y coordanate!");
var x2 = prompt("now type your second x coordanate!");
var y2 = prompt("and finally, your last y coordanate!");
var midText = ("your midpoints are: ");
var comma = (",");
var exclam = ("!");
var two = (2)
var x1x2 = (x1 + x2 / two);
var y1y2 = (y2 + y2 / two );
alert(midText + x1x2 + comma + y1y2 + exclam);

出于某种原因，这不能正确计算并输入错误答案，请继续try it out。这可能是我的一些奇怪的错误，我对javascript很新，只使用了一两个小时的语言。任何帮助将非常感谢！提前谢谢！

Answer 1

(x1 + x2 / two)

正在划分然后连接字符串和数字。 尝试

((+x1 + +x2) / two)

使用前缀+运算符将字符串强制转换为数字，并将低优先级加法括号括起来。

您可以通过

查看此操作

alert(("1" + "0") / 2)  // alerts 5 since "1" + "0" == "10"
alert((1 + 0) / 2)      // alerts 0.5 since 1 + 0 == 1

Answer 2

也许你需要

var x1x2 = (parseInt(x1) + parseInt(x2)) / two;
var y1y2 = (parseInt(y2) + parseInt(y2)) / two;

Answer 3

Demo jsFiddle

<强> JS

alert("welcome to nate's midpoint calculator!");
var x1 = prompt("type your first x coordanate!");
var y1 = prompt("excellent!, now your first y coordanate!");
var x2 = prompt("now type your second x coordanate!");
var y2 = prompt("and finally, your last y coordanate!");
var midText = ("your midpoints are: ");

var x1x2 = (+x1 + +x2) / 2;
var y1y2 = (+y2 + +y2) / 2 ;
alert(midText + x1x2 + "," + y1y2 + "!");

---

The way I would do it (jsFiddle)

<强> HTML

<h1>Welcome to Nate's midpoint calculator!</h1>
<form>
    <div>
        <label for="x1">X1</label>
        <input type="textbox" id="x1" />
        <label for="y1">Y1</label>
        <input type="textbox" id="y1" />
    </div>
    <div>
        <label for="x2">X2</label>
        <input type="textbox" id="x2" />
        <label for="y2">Y2</label>
        <input type="textbox" id="y2" />
    </div>
    <div>
        <input type="submit" value="Calculate" onclick="Calculate()"/>
    </div>
</form>
<div>
    <span id="results"></span>
</div>

<强> JS

function Calculate(){
    event.preventDefault();
    var x1 = parseFloat(document.getElementById('x1').value);
    var y1 = parseFloat(document.getElementById('y1').value);
    var x2 = parseFloat(document.getElementById('x2').value);
    var y2 = parseFloat(document.getElementById('y2').value);

    var x1x2 = parseFloat((x1 + +x2) / 2);
    var y1y2 = parseFloat((+y2 + +y2) / 2);
    document.getElementById("results").innerHTML=("your midpoints are: " + x1x2 + "," + y1y2 + "!");
}

---

Using KnockoutJS

<强> HTML

<h1>Welcome to Nate's midpoint calculator!</h1>

<div>
    <label for="x1">X1</label>
    <input type="textbox" id="x1" data-bind="value: x1" />
    <label for="y1">Y1</label>
    <input type="textbox" id="y1" data-bind="value: y1" />
</div>
<div>
    <label for="x2">X2</label>
    <input type="textbox" id="x2" data-bind="value: x2" />
    <label for="y2">Y2</label>
    <input type="textbox" id="y2" data-bind="value: y2" />
</div>
<div> 
    your midpoints are: <span id="results" data-bind="text: Midpoint"></span>!
</div>

<强> JS

var MidpointCalulatorViewModel = function () {
    var self = this;
    self.x1 = ko.observable();
    self.x2 = ko.observable();
    self.y1 = ko.observable();
    self.y2 = ko.observable();

    self.x1x2 = ko.computed(function () {
        return parseFloat((parseFloat(self.x1()) + parseFloat(self.x2())) / 2);
    }, self);

    self.y1y2 = ko.computed(function () {
        return parseFloat((parseFloat(self.y1()) + parseFloat(self.y2())) / 2);
    }, self);

    self.Midpoint = ko.computed(function () {
        return self.x1x2() + "," + self.y1y2();
    }, self);
};

ko.applyBindings(new MidpointCalulatorViewModel());

请注意，您需要验证