在JavaScript中获取文本字段的输入后，我们如何将其写入文本字段？_Javascript

在JavaScript中获取文本字段的输入后，我们如何将其写入文本字段？

javascript

在JavaScript中获取文本字段的输入后，我们如何将其写入文本字段？,javascript,Javascript,其思想是，若第一个文本框输入一个数字，并且选中复选框，则第二个文本框显示数字的平方，当第二个文本框输入一个数字时，第一个文本框显示数字的平方根 function myFunction() { var sq = document.getElementById("square"); var tf1 = document.getElementById("text1"); var tf2 = document.getElementById("text2"); alert(sq.check

其思想是，若第一个文本框输入一个数字，并且选中复选框，则第二个文本框显示数字的平方，当第二个文本框输入一个数字时，第一个文本框显示数字的平方根

function myFunction() {
  var sq = document.getElementById("square");
  var tf1 = document.getElementById("text1");
  var tf2 = document.getElementById("text2");
  alert(sq.checked+tf1.value+tf2.value);
  if(sq.checked==true){
    if(tf1.value!=""){
      tf2.value = tf1*tf1;
    }
    else if (tf2.value!=""){
      tf1.value = Math.sqrt(tf2);
    }
  }
}


/// Here is the html

<input type="text" id="text1"/>
<input type="checkbox" id="square"> square </input>
<input type="text" id="text2"/>
<button type="button" onclick="myFunction()">Submit</button>

函数myFunction（）{
var sq=document.getElementById（“square”）；
var tf1=document.getElementById（“text1”）；
var tf2=document.getElementById（“text2”）；
警报（sq.checked+tf1.value+tf2.value）；
如果（sq.checked==真）{
如果（tf1.value！=“”）{
tf2.value=tf1*tf1；
}
else if（tf2.value！=“”）{
tf1.value=Math.sqrt（tf2）；
}
}
}
///这是html
广场
提交

无论哪种方式代码都不起作用

您是在DOM对象上进行算术运算，而不是在它们的值上。像这样：

tf1*tf1

。。。应该是：

tf1.value*tf1.value

Math.sqrt（tf2）

：应该使用

tf2.value

其他一些评论：

验证布尔值时，不需要添加
```
===true
```
。您只需执行以下操作：
```
  if(sq.checked){
```
不要使用
```
alert
```
进行调试。改用
```
console.log
```
。顺便说一句：控制台有很多功能来帮助调试
我不确定预期的行为是什么，但我认为如果。。。否则结构/嵌套会有所不同。可能如下所示：

函数myFunction（）{
var sq=document.getElementById（“square”）；
var tf1=document.getElementById（“text1”）；
var tf2=document.getElementById（“text2”）；
log（sq.checked，tf1.value，tf2.value）；
如果（平方检查）{
如果（tf1.value！=“”）{
tf2.value=tf1.value*tf1.value；
}
}else if（tf2.value！=“”）{
tf1.value=Math.sqrt（tf2.value）；
}
}


广场
提交

您正在对DOM对象执行算术运算，而不是对其值执行算术运算。像这样：

tf1*tf1

。。。应该是：

tf1.value*tf1.value

Math.sqrt（tf2）

：应该使用

tf2.value

其他一些评论：

验证布尔值时，不需要添加
```
===true
```
。您只需执行以下操作：
```
  if(sq.checked){
```
不要使用
```
alert
```
进行调试。改用
```
console.log
```
。顺便说一句：控制台有很多功能来帮助调试
我不确定预期的行为是什么，但我认为如果。。。否则结构/嵌套会有所不同。可能如下所示：

函数myFunction（）{
var sq=document.getElementById（“square”）；
var tf1=document.getElementById（“text1”）；
var tf2=document.getElementById（“text2”）；
log（sq.checked，tf1.value，tf2.value）；
如果（平方检查）{
如果（tf1.value！=“”）{
tf2.value=tf1.value*tf1.value；
}
}else if（tf2.value！=“”）{
tf1.value=Math.sqrt（tf2.value）；
}
}


广场
提交

在我们开始讨论之前，这里有几件小事要指出。你的变量名很差。使用描述性变量名是一种更好的做法，而不是用只有你自己知道的缩写来缩短事情，每次阅读时你都必须在头脑中转换这些缩写。在投入生产之前，它们会被缩小器缩短，所以这样的缩短只会损害可读性而没有任何好处，所以我改变了这一点

接下来，您进行了这样的检查，使您的意图不明确：

 if(sq.checked==true) { ... }

如果使用松散相等（

）检查某个内容是否可以强制转换为true（而不是使用强相等（

==

）来测试某个内容是否实际包含布尔值

true

），则可以改为：

如果（sq.checked）{…}

这里的原理是一样的，在这里进行空检查：

 if(tf1.value!=null){ ... }

可以这样写：

 if(tf1.value){ ... }

除了在语法上更短之外，在这种特殊情况下，它也是一个逻辑错误，因为空字符串永远不会松散地等于null

由于必须多次使用字段的值，因此最好将这些值缓存在函数顶部的局部变量中

但是，您遇到的主要问题是，您正在对指向字段的指针而不是字段的值进行数学运算。我还发出了警报，因为我以为你在那里做了测试。大多数人使用console.log（）来休息值，而不是提醒。要查看控制台，请右键单击并检查页面，然后转到控制台，它是一个实时JavaScript解释器。CTRL+SHIFT+I是Chrome中的键盘快捷键

下面是更新后的代码：

function myFunction() {
  var squareNumCbx = document.getElementById('square'),
      txtField1 = document.getElementById('text1'),
      txtField2 = document.getElementById('text2'),
      txtFieldVal1 = txtField1.value,
      txtFieldVal2 = txtField2.value;

  if (squareNumCbx.checked) {
    if (txtFieldVal1) {
      txtField2.value = txtFieldVal1 * txtFieldVal1;
    } else if (txtFieldVal2) {
      txtField1.value = Math.sqrt(txtFieldVal2);
    }
  }
}

你可能想考虑的是，如果用户在两个字段中都有一个数字，那么你想要发生什么。

< P>这里有几个小事情要指出，在我们了解它的本质之前。你的变量名很差。使用描述性变量名是一种更好的做法，而不是用只有你自己知道的缩写来缩短事情，每次阅读时你都必须在头脑中转换这些缩写。在投入生产之前，它们会被缩小器缩短，所以这样的缩短只会损害可读性而没有任何好处，所以我改变了这一点