Question

当我尝试单击“计算”按钮时，它只能从输入数字到平方根，但另一方面，当我尝试在我的box2中输入数字时，它不会在box1中显示任何内容。我应该添加另一个包含ConvertToSqrt（）和ConvertToNum（）的函数吗？

  <script type="text/javascript">

  function ConvertToSqrt()
 {
   var num, sqrt;
   num = parseFloat(document.getElementById('box1').value);
   var sqrt = NumberToSquare(num);
   box2.value=sqrt;
 }

 function ConvertToNum()
 {
   var sqrt, num;
   sqrt = parseFloat(document.getElementById('box2').value);
   num = SquareToNum(sqrt);
   box1.value=num;
 }

 function NumberToSquare(num)
 {
   var sqrt; 
   sqrt = Math.sqrt(num); 
   return sqrt; 
 } 

 function SquareToNumber(sqrt)
 { 
   var num; 
   num = Math.pow(sqrt,2);
   return num; 
 } 
  </script>

  <body>
  <div style="border: solid; width: 300px; background-color: #83CAFF">

  <table>
  <th></th> <th>Calculater</th>
  <tr>
  <th>Enter Number:</th><th><input type="text" id="box1"></th>
  <tr>
  <th>SquareRoot:</th><th><input type="text" id="box2"></th>
  <tr>
  <th></th><th><input type="button" value="Calculate"
  onclick="ConvertToNum(); ConvertToSqrt();">
  </table>
  </div>
  </body>
  </html>

Answer 1

我就是这样做的。如果你愿意使用jquery，那就很容易了。

更新：改为普通JS

＆＃13;

var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var resetButton = document.getElementById("reset");

resetButton.onclick = function(){
  box1.value = "";
  box2.value = "";
};

//---------------------------------------------

box1.onkeyup = function(){
  box2.value = ConvertToSqrt(box1.value);
};

function ConvertToSqrt(num)
 {   
   var sqrt = NumberToSquare(num);   
   return sqrt;
 }

function NumberToSquare(num)
 {
   var sqrt = Math.sqrt(num); 
   return sqrt; 
 } 

//---------------------------------------------

box2.onkeyup = function(){
  box1.value = ConvertToNum(box2.value);
};

 function ConvertToNum(sqrt)
 {
   var num = SquareToNumber(sqrt);
   return num;
 }

 function SquareToNumber(sqrt)
 {  
   var num = Math.pow(sqrt,2);
   return num; 
 }

＆＃13;

<div style="border: solid; width: 300px; background-color: #83CAFF">

  <table>
  <th></th> <th>Calculater</th>
  <tr>
  <th>Enter Number:</th><th><input type="text" id="box1"></th>
  <tr>
  <th>SquareRoot:</th><th><input type="text" id="box2"></th>
  <tr>
  <th></th><th><input id="reset" type="button" value="reset">
  </table>
  </div>
  </body>

＆＃13;

你误解了下面的SquareToNumber功能。是SquareToNum。

function ConvertToNum() {
  var sqrt, num;
  sqrt = parseFloat(document.getElementById('box2').value);
  num = SquareToNumber(sqrt);
  //num = SquareToNum(sqrt);
  box1.value = num;
}

Answer 2

是的，你应该添加另一个包含ConvertToSqrt（）和ConvertToNum（）的函数，你不应该在html中绑定事件，因为它是不可维护的，只需使用addEventListener或其他人在JavaScript中执行它

无法运行两个功能

2 个答案: