如何从计算器中删除 document.write()
如何使此计算器在 ' 符号之后的第一页上显示结果，=而不破坏页面上的所有 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>
慕村95488902回答
-
红颜莎娜
您可以使用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
正如您所发现的，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，并相应地更新计算函数！
随时随地看视频慕课网APP
相关分类
JavaScript