Question

我使用JavaScript确定了两个数字的乘积，但无法获得输出 **<input type="number" id="custom-message" name="frames"></textarea>**.请帮助我发现错误。

function calculate() {
   var myBox1 = document.getElementsByName("height")[0].value;	
  var myBox2 = document.getElementsByName("width")[0].value;
  var frames = document.getElementsByName('frames');	
  var myResult = myBox1 * myBox2;
  frames.value = myResult;
}

<input type="number" id="custom-message" name="height" oninput="calculate()"></textarea>
    <input type="number" id="custom-message" name="width" oninput="calculate()"></textarea>
    <input type="number" id="custom-message" name="frames"></textarea>

Answer 1

首先删除id 6标记

</textarea>

function calculate() {
  var myBox1 = document.getElementsByName("height")[0].value;	
  var myBox2 = document.getElementsByName("width")[0].value;
  var frames = document.getElementsByName('frames')[0];	
  var myResult = myBox1 * myBox2;
  frames.value = myResult;
}

Answer 2

我主要根据人们的评论和通用的编码最佳实践来调整您的代码。

将输入元素更改为自动关闭，而不是使用textarea标签关闭它们。我不知道您从哪里学到的，但是现在不学习。
不要为多个元素提供相同的ID。通过ID引用元素比通过名称引用元素也容易得多，因此我将名称更改为IDs。
将框架制成段落而不是输入，因为您不希望人们尝试在此处输入内容。如果必须将其用作输入，请禁用它并使用CSS对其进行适当的样式设置。
添加了错误检查功能，因此除非两个值都是正数，否则不进行计算。
我使您的变量成为全局变量，因为我喜欢那样做，如果我不喜欢，我的OCD会发疯，但是您的状态也可以。

var myBox1 = document.getElementById("height");
var myBox2 = document.getElementById("width");
var frames = document.getElementById("frames");	
function calculate() {
  if (Number(myBox1.value) > 0 && Number(myBox2.value) > 0) {
  	var myResult = myBox1.value * myBox2.value;
  	frames.innerHTML = myResult;
  } else {
    frames.innerHTML = "";
  }
}

#frames {
  font-size: 2em
}

<input type="number" placeholder="height" id="height" name="height" oninput="calculate()" />
<input type="number" placeholder="width" id="width" name="width" oninput="calculate()" />
<p id="frames"></p>

使用javascript的两个数的乘积

2 个答案: