使用javascript的两个数字的乘积

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

首先删除</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;
}

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

Answer 2

我调整了您的代码，主要使用了人们在注释中的内容和一般的编码最佳实践。

• 将输入元素更改为自动关闭，而不是使用textarea标记关闭它们。我不知道你是从哪里学会的，但现在忘掉它吧
• 不要给多个元素相同的ID。按ID引用元素也比按名称引用元素容易得多，所以我将名称改为ID
• 把框架做成一个段落，而不是一个输入，因为你不希望人们试图在那里输入一些东西。如果必须将其作为输入，请禁用它并使用CSS进行适当的样式设置
• 增加了错误检查，因此除非两个值都是正数，否则不会进行计算
• 我把你的变量设为全局变量，因为我喜欢这样做，如果我不这样做，我的强迫症会变得疯狂，但你的方式也没关系

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>