代码之家 › 专栏 › 技术社区 › Manny0

使用javascript和html表单计算两点之间的距离[重复]

html javascript

Manny0 · 技术社区 · 8 年前

我有点卡住了,因为每当我在输入x1、x2、y1、y2的数字后单击“计算距离”按钮时,所有内容都会清除,而不是计算

 function calculateDistance()
            {
                var pointx1 = parseInt(document.getElementById("pointx1").value);
                var pointy1 = parseInt(document.getElementById("pointy1").value);
                var pointx2 = parseInt(document.getElementById("pointx2").value);
                var pointy2 = parseInt(document.getElementByID("pointy2").value);
          
                var distance = Math.sqrt(Math.Pow((pointx1-pointx2),2)+Math.Pow((pointy1-pointy2),2));

                window.alert("Distance: "+distance);

            }

<!DOCTYPE html>
<html> 
    <head>
        <meta charset = "utf-8">
        <title> Distant Points </title>
    <script type = "text/javascript"> </script>
        </head>
            <body>
                <form name = "f1" method="post">
                    <label>Point 1:</label><br>
                    x:<input type = "text" id = "pointx1" size = "30"/> &nbsp; y1:<input type = "text" id = "pointy1" size = "30"/> <br>
                    <label>Point 2:</label> <br>
                    x:<input type = "text" id = "pointx2" size = "30"/> &nbsp; y2:<input type = "text" id = "pointy2" size = "30"/>
                    <button onclick = "calculateDistance()">Calculate Distance</button>
             </form>
        </body>
</html>

1 回复 | 直到 8 年前

Cjmarkham 8 年前

原因是您有几个拼写错误,并且您正在使用表单。

首先是打字错误:

它是 document.getElementById 不 document.getElementByID 其次 Math.pow 不 Math.Pow

由于按钮位于表单中,因此您还需要 return false 防止默认表单提交干扰您的代码。

function calculateDistance() {
  var pointx1 = parseInt(document.getElementById("pointx1").value);
  var pointy1 = parseInt(document.getElementById("pointy1").value);
  var pointx2 = parseInt(document.getElementById("pointx2").value);
  var pointy2 = parseInt(document.getElementById("pointy2").value);

  var distance = Math.sqrt(Math.pow((pointx1-pointx2),2)+Math.pow((pointy1-pointy2),2));

  window.alert("Distance: "+distance);
}

<form name = "f1" method="post">
  <label>Point 1:</label><br>
  x:<input type = "text" id = "pointx1" size = "30"/> &nbsp; y1:<input type = "text" id = "pointy1" size = "30"/> 
  <br>
  <label>Point 2:</label> <br>
  x:<input type = "text" id = "pointx2" size = "30"/> &nbsp; y2:<input type = "text" id = "pointy2" size = "30"/>
  <button onclick = "calculateDistance(); return false;">Calculate Distance</button>
</form>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前