Question

我使用JSfiddle编写一些HTML和JS。当我将一个数字写入其中一个文本区域并按下按钮时，没有任何反应。代码有什么问题。 PS：我对JavaScript比较陌生，所以如果我这样做的话，我很抱歉。

HTML code：

Liter
<br>
<textarea></textarea>
<br> Gallon
<br>
<textarea></textarea>
<br>
<button onClick="myFunction()">
Convert!
</button>

Javascript代码：

var l = getElementsByTagName("textArea")[0].innerHTML;
var g = getElementsByTagName("textArea")[1].innerHTML;

function myFunction() {
if (g == "") {
g.innerHTML = l * 3.78541;
    } else if (l == "") {
l.innerHTML = g / 3.78541;
    } 
}

Answer 1

打开您的控制台，首先您会看到getElementsByTagName未定义。相反，您需要编写document.getElementsByTagName。

接下来，更改您的l和g声明以引用该元素，而不是其内容。请记住，当程序第一次开始运行时，innerHTML将会是空白的（并且您不会使用它，但我稍后将会这样做。）

var l = document.getElementsByTagName('textarea')[0];
var g = document.getElementsByTagName('textarea')[1];

最后，将您的g和l比较更改为使用g.value和l.value：

if (g.value == "") {
  ...
} else if (l.value == "") {
  ...
}

.value指的是＆＃34;值＆＃34; textarea，即什么，写在其中。因此，现在您将根据函数运行时的内容检查其内容，而不是在页面开始时。此外，您之前曾尝试在.innerHTML和l上设置g。由于您已将l和g分配给value，这是string，因此无法使用。 .innerHTML是DOM元素的属性。不要忘记更改计算，以便他们使用.value代替l和g。请记住，您需要textarea的值，而不是元素本身。

最后，由于您使用myFunction的方式，您希望确保将脚本放在头部并移动l和{{1}声明进入函数。

那将会让你大部分时间到来。在理解了DOM元素和字符串之间的区别之后，其余的就是简单的调试。

Answer 2

我试图让这个答案很容易理解：

Liter
  <br>
    <textarea id='liter'></textarea>
  <br> 

Gallon
  <br>
     <textarea id="gallon"></textarea>
  <br>

<button onClick="myFunction()"> Convert! </button>

使用id将有助于提高可扩展性，并减少混淆。

function myFunction() {

  var l = document.getElementById('liter');
  var liter = l.value;

  var g = document.getElementById("gallon");
  var gallon = g.value;

  if (gallon == "") {
    g.value = liter * 3.78541;
  } 

  else if (liter == "") {
    l.value = gallon / 3.78541;
  }

}

我之前使用过这种方法，这是我理解它的最简单方法。

你真的很接近正确的答案，只是一些语法的东西。希望这能帮到你！

尝试使用HTML按钮制作转换工具

2 个答案: