将文本框链接到由按钮运行的javascript公式

Linking a textbox to a javascript equation ran by a button

本文关键字：运行 javascript 公式 按钮 文本 链接      更新时间：2023-09-26

我一直试图在文本框中输入一个像100、45这样的输入，并通过单击按钮来运行它，但我不知道该怎么做。它应该在单击按钮后发布答案作为警报。请帮忙。非常感谢。

function Rad(a, b){
    var Armor=a/(Math.sin((Math.PI/180)*b))
    alert(Armor)
}
.box {
    color: gray;
    margin-top: 10px;
    margin-left: 10px;
}
.equation {
    color: #444;
    font: inherit;
    min-height: 2em;
    border-radius: 3px;
    padding-left: 4px;
    border: 2px solid #bfbfbf;
}
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	<link rel='stylesheet' href='style.css'/>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src='script.js'></script>
</head>
<body>
  <div class="box">
    <input class="equation" type="text">
  </div>
  <button onclick="Rad()">Click</button>
</body>
</html>

函数Rad(a, b)有两个参数。

为了解决这个问题，您必须删除onClick="Rad()"，因为您在这里没有传递任何参数。

使用jQuery和附加一个类似下面的click事件，而从输入中获取值并将其除以,，然后用这两个值调用Rad。

$('#btnRad').click(function(){
    var equVal = $('.equation').val().split(',');
    Rad(equVal[0], equVal[1]);
});
function Rad(a, b){
    var Armor=a/(Math.sin((Math.PI/180)*b))
    alert(Armor)
}

HTML修改的

<button id="btnRad">Click</button>

注意：这样可以重用Rad函数。

function Rad(a, b){
    var Armor=a/(Math.sin((Math.PI/180)*b))
    alert(Armor)
}
$('#btnRad').click(function(){
  var equVal = $('.equation').val().split(',');
  Rad(equVal[0], equVal[1]);
  
  });
.box {
    color: gray;
    margin-top: 10px;
    margin-left: 10px;
}
.equation {
    color: #444;
    font: inherit;
    min-height: 2em;
    border-radius: 3px;
    padding-left: 4px;
    border: 2px solid #bfbfbf;
}
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
	<link rel='stylesheet' href='style.css'/>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src='script.js'></script>
</head>
<body>
  <div class="box">
    <input class="equation" type="text">
  </div>
  <button id="btnRad">Click</button>
</body>
</html>

将Rad函数更改为：

function Rad(){
    var inp=document.getElementById('eq'); // or document.getElementsByName('equation')[0]
    var splited=inp.value.split(',');
    var a=parseInt(splited[0],10);
    var b=parseInt(splited[1],10);
    var Armor=a/(Math.sin((Math.PI/180)*b))
    alert(Armor)
}

并且不要忘记将'eq'指定为输入的id

这会检查输入（现在有一个id）是否与"数字，数字"（带可选空格）匹配，并在进行数学运算之前取出这些数字：

function Rad() {
  var args = document.getElementById('args');
  var argstr = args.value;
  var matches = argstr.match(/^'s*(['d'.]+)'s*,'s*(['d'.]+)/);
  if (matches) {
    var a = +matches[1],
      b = +matches[2];
    var Armor = a / (Math.sin((Math.PI / 180) * b))
    alert(Armor)
  }
}
.box {
  color: gray;
  margin-top: 10px;
  margin-left: 10px;
}
.equation {
  color: #444;
  font: inherit;
  min-height: 2em;
  border-radius: 3px;
  padding-left: 4px;
  border: 2px solid #bfbfbf;
}
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <link rel='stylesheet' href='style.css' />
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src='script.js'></script>
</head>
<body>
  <div class="box">
    <input id="args" class="equation" type="text">
  </div>
  <button onclick="Rad()">Click</button>
</body>
</html>

当前，您尚未将a和b发送到Rad()。如果你说a和b是输入的数字，用逗号分隔，那么这将起作用：

如果您想将输入的两个值发送到函数，则需要再次使用Javascript来获取值并调用函数：

function Rad(a, b) {
  var Armor = a / (Math.sin((Math.PI / 180) * b))
  alert(Armor)
}
$('button').click(function() {
  Rad($('.equation').val().split(',')[0], $('.equation').val().split(',')[1]);
});
.box {
  color: gray;
  margin-top: 10px;
  margin-left: 10px;
}
.equation {
  color: #444;
  font: inherit;
  min-height: 2em;
  border-radius: 3px;
  padding-left: 4px;
  border: 2px solid #bfbfbf;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <input class="equation" type="text">
</div>
<button>Click</button>

这将分别向Rad、a和b发送逗号前的数字和逗号后的数字。

例如：输入：10, 20将显示：29.238044001630875

相关文章：