如何使此计算器在 ' 符号之后的第一页上显示结果，=而不破坏页面上的所有 html document.write()？我知道这document.write()就是问题所在，但我不知道还有什么可以使用的。我对编码非常陌生，因此非常感谢任何帮助。我对除法部分也有一个问题，因为它将结果放在余数旁边，但是，一旦问题document.write()得到解决，我认为解决方案应该变得更加明显。谢谢你！<head> <script language="javascript" type="text/javascript"> function add() { var input1 = parseInt(document.getElementById("t1").value); var input2 = parseInt(document.getElementById("t2").value); var result = input1 + input2; document.write(result); } function divide() { var input1 = parseInt(document.getElementById("t3").value); var input2 = parseInt(document.getElementById("t4").value); var result = Math.floor(input1 / input2); var remainder = input1 % input2 document.write(result) document.write(remainder) } function multiply() { var input1 = parseInt(document.getElementById("t5").value); var input2 = parseInt(document.getElementById("t6").value); var result = input1 * input2; document.write(result); } function subtract() { var input1 = parseInt(document.getElementById("t7").value); var input2 = parseInt(document.getElementById("t8").value); var result = input1 - input2; document.write(result); } </script> <title>java</title></head><body> Addition <p> <input type="text" id="t1" name="t1"> + <input type="text" id="t2" name="t2"> <input type="button" id="add" value="=" onClick="add();"> </p> <p> Subtraction <p> <input type="text" id="t7" name="t7"> - <input type="text" id="t8" name="t8"> <input type="button" id="subtract" value="=" onClick="subtract();"></body></html>
2 回答
红颜莎娜
TA贡献1842条经验 获得超12个赞
您可以使用textContent或innerHTML。
这是一个使用的示例textContent：
function add() {
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1 + input2;
document.getElementById('add-result').textContent = result;
}
function divide() {
var input1 = parseInt(document.getElementById("t3").value);
var input2 = parseInt(document.getElementById("t4").value);
var result = Math.floor(input1 / input2);
var remainder = input1 % input2
document.getElementById('divide-result').textContent = result;
document.getElementById('divide-remainder').textContent = remainder;
}
function multiply() {
var input1 = parseInt(document.getElementById("t5").value);
var input2 = parseInt(document.getElementById("t6").value);
var result = input1 * input2;
document.getElementById('multiply-result').textContent = result;
}
function subtract() {
var input1 = parseInt(document.getElementById("t7").value);
var input2 = parseInt(document.getElementById("t8").value);
var result = input1 - input2;
document.getElementById('subtract-result').textContent = result;
}
<div>
<h1>Addition</h1>
<input type="text" id="t1" name="t1"> +
<input type="text" id="t2" name="t2">
<input type="button" id="add" value="=" onClick="add();">
<span id="add-result"></span>
</div>
<div>
<h1>Subtraction</h1>
<input type="text" id="t7" name="t7"> -
<input type="text" id="t8" name="t8">
<input type="button" id="subtract" value="=" onClick="subtract();">
<span id="subtract-result"></span>
</div>
<div>
<h1>Multiplication</h1>
<input type="text" id="t5" name="t5"> *
<input type="text" id="t6" name="t6">
<input type="button" id="multiply" value="=" onClick="multiply();">
<span id="multiply-result"></span>
</div>
<div>
<h1>Division</h1>
<input type="text" id="t3" name="t3"> ÷
<input type="text" id="t4" name="t4">
<input type="button" id="divide" value="=" onClick="divide();">
<span id="divide-result"></span> |
<span id="divide-remainder"></span>
</div>
withtextContent只能设置文本，withinnerHTML可以设置 HTML：
function add() {
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1 + input2;
document.getElementById('add-result').innerHTML = `<i style="color: blue">${result}</i>`;
}
function divide() {
var input1 = parseInt(document.getElementById("t3").value);
var input2 = parseInt(document.getElementById("t4").value);
var result = Math.floor(input1 / input2);
var remainder = input1 % input2
document.getElementById('divide-result').innerHTML = `<i style="color: blue">${result}</i>`;
document.getElementById('divide-remainder').innerHTML = `<i style="color: blue">${remainder}</i>`;
}
function multiply() {
var input1 = parseInt(document.getElementById("t5").value);
var input2 = parseInt(document.getElementById("t6").value);
var result = input1 * input2;
document.getElementById('multiply-result').innerHTML = `<i style="color: blue">${result}</i>`;
}
function subtract() {
var input1 = parseInt(document.getElementById("t7").value);
var input2 = parseInt(document.getElementById("t8").value);
var result = input1 - input2;
document.getElementById('subtract-result').innerHTML = `<i style="color: blue">${result}</i>`;
}
<div>
<h1>Addition</h1>
<input type="text" id="t1" name="t1"> +
<input type="text" id="t2" name="t2">
<input type="button" id="add" value="=" onClick="add();">
<span id="add-result"></span>
</div>
<div>
<h1>Subtraction</h1>
<input type="text" id="t7" name="t7"> -
<input type="text" id="t8" name="t8">
<input type="button" id="subtract" value="=" onClick="subtract();">
<span id="subtract-result"></span>
</div>
<div>
<h1>Multiplication</h1>
<input type="text" id="t5" name="t5"> *
<input type="text" id="t6" name="t6">
<input type="button" id="multiply" value="=" onClick="multiply();">
<span id="multiply-result"></span>
</div>
<div>
<h1>Division</h1>
<input type="text" id="t3" name="t3"> ÷
<input type="text" id="t4" name="t4">
<input type="button" id="divide" value="=" onClick="divide();">
<span id="divide-result"></span> |
<span id="divide-remainder"></span>
</div>
值得注意的是，innerHTML这里提到存在安全问题：
...有多种方法可以在不使用元素的情况下执行 JavaScript，因此每当您使用 innerHTML 来设置您无法控制的字符串时，仍然存在安全风险。例如：
const name = "<img src='x' onerror='alert(1)'>"; el.innerHTML = name; // shows the alert
因此，建议您在插入纯文本时不要使用innerHTML；相反，使用 Node.textContent。这不会将传递的内容解析为 HTML，而是将其作为原始文本插入。
以下是一些用于操作 DOM 的其他方法：
插入相邻元素
内部文本
插入相邻HTML
插入相邻文本
插入之前
附加子项
替换子项
删除子项
节点值
外部HTML
外部文本
消除
HUWWW
TA贡献1874条经验 获得超12个赞
正如您所发现的，document.write()它很棘手，因为它在使用时倾向于覆盖现有内容。
注意：由于 document.write() 写入文档流，因此在关闭（已加载）文档上调用 document.write() 会自动调用 document.open()，这将清除文档。
嗯，那我们还能做什么呢？幸运的是，可以定位页面的特定部分并仅替换这些元素中的内容。因此，例如，我们可以将<span>具有 id 等的元素#add-result添加#div-result到页面，其中将包含其各自操作的结果。document.write()然后，我们可以替换这些元素中的内容，而不是使用它来输出结果。
让我们添加一个<span>来包含我们的添加结果：
Addition<p>
<input type="text" id="t1" name="t1" /> +
<input type="text" id="t2" name="t2" />
<input type="button" id="add" value="=" onClick="add();" />
<span id="add-result></span>
</p>
（注意：记得用 关闭<input />标签/>！）
我们如何针对特定元素？与document.querySelector(). 文档
然后，我们可以通过更新属性轻松更改该元素内部的内容element.textContent，就像变量一样：
function add(){
var input1 = parseInt(document.getElementById("t1").value);
var input2 = parseInt(document.getElementById("t2").value);
var result = input1+input2;
// get the element with the #add-result ID
var element = document.querySelector("#add-result");
// update the content in that element
element.textContent = result;
}
现在，当您将两个数字相加并按 时=，结果将显示在<span id="add-result"></span>元素内部，而不是覆盖整个页面。看看是否也可以使其适用于其他输入。请记住，您需要为要在其中显示结果的每个元素提供唯一的ID，并相应地更新计算函数！
添加回答
举报
0/150
提交
取消