堆栈内存溢出
  简体   繁体   English

如何从我的计算器中删除 document.write()

[英]How do I delete document.write() out of my calculator

 原文  2020-12-01 22:25:23  2   2    javascript/ html/ dom

问题描述

How do I make this calculator display the result on the first page after the = 's sign without destroying all of the html on the page with document.write() ?如何使此计算器在=符号后的第一页上显示结果，而不用document.write()破坏页面上的所有 html ？

I know that document.write() is the problem, but I don't know of anything else to use.我知道document.write()是问题所在，但我不知道还有什么要使用的。 I'm very new to coding, so any help is greatly appreciated.我对编码非常陌生，因此非常感谢任何帮助。

I also have a problem with the division part because it is putting the result right next to the remainder, however, once the document.write() problem is resolved, I think that the solution should become more apparent.除法部分也有问题，因为它将结果放在余数旁边，但是，一旦解决了document.write()问题，我认为解决方案应该变得更加明显。 Thank You!谢谢你！ 

 <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();"> <p>Multiplication <p> <input type="text" id="t5" name="t5"> * <input type="text" id="t6" name="t6"> <input type="button" id="multiply" value="=" onClick="multiply();"> </p> <p>Division <p> <input type="text" id="t3" name="t3"> ÷ <input type="text" id="t4" name="t4"> <input type="button" id="divide" value="=" onClick="divide();"> </p> </body> </html>

2 个解决方案

解决方案1
 3 已采纳  2020-12-01 22:44:42

You can either use textContent or innerHTML .您可以使用textContent或innerHTML 。

Here's an example using textContent :这是一个使用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>

With textContent you can only set text, with innerHTML you can set HTML:使用textContent只能设置文本，使用innerHTML可以设置 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>

It's worth noting, with innerHTML there are security concerns as mentioned here:值得注意的是， innerHTML存在安全问题，如下所述：

...there are ways to execute JavaScript without using elements, so there is still a security risk whenever you use innerHTML to set strings over which you have no control. ...有一些方法可以在不使用元素的情况下执行 JavaScript，因此当您使用 innerHTML 设置您无法控制的字符串时，仍然存在安全风险。 For example:例如：

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // shows the alert

For that reason, it is recommended that you do not use innerHTML when inserting plain text;因此，建议您在插入纯文本时不要使用innerHTML； instead, use Node.textContent.相反，使用 Node.textContent。 This doesn't parse the passed content as HTML, but instead inserts it as raw text.这不会将传递的内容解析为 HTML，而是将其作为原始文本插入。

Here are some other methods used to manipulate the DOM:以下是用于操作 DOM 的其他一些方法：

See the full list here .在此处查看完整列表。

解决方案2
 0  2020-12-01 22:48:12

As you have discovered, document.write() is tricky because it has a tendency to overwrite the existing content when used.正如您所发现的， document.write()很棘手，因为它在使用时倾向于覆盖现有内容。 Let's see what thedocumentation has to say about it:让我们看看文档对此有何评论：

Note: Because document.write() writes to the document stream, calling document.write() on a closed (loaded) document automatically calls document.open(), which will clear the document.注意：因为 document.write() 写入文档 stream，所以在关闭（加载）的文档上调用 document.write() 会自动调用 document.open()，这将清除文档。

Hmm, well what else can we do?嗯，我们还能做什么呢？ Fortunately, it is possible to target specific parts of the page and replace content in those elements only.幸运的是，可以针对页面的特定部分并仅替换这些元素中的内容。 So, for example we could add <span> elements with ids like #add-result , #div-result etc to the page which will contain the results of their respective action.因此，例如，我们可以将 ID 为#add-result 、 #div-result等的<span>元素添加到包含它们各自操作的结果的页面中。 Then, instead of using document.write() to output the results, we can replace the content in those elements.然后，我们可以替换那些元素中的内容，而不是使用document.write()来 output 结果。

Let's add a <span> to contain our add result:让我们添加一个<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>

(Note: remember to close your <input /> tags with a /> !) （注意：记得用/> > 关闭你的<input />标签！）

How do we target a specific element?我们如何定位特定元素？ With document.querySelector() .使用document.querySelector() 。 Docs 文档

Then, we can easily change the content inside of that element by updating the element.textContent property, just like you would a variable:然后，我们可以通过更新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;
    }

Now when you add two numbers together and press = , the result will appear inside of the <span id="add-result"></span> element instead of overwriting the entire page.现在，当您将两个数字相加并按=时，结果将出现在<span id="add-result"></span>元素内，而不是覆盖整个页面。 See if you can get it working for the other inputs as well.看看你是否能让它也适用于其他输入。 Remember you will need a unique id for each element you want to display a result in, and update the calculation functions accordingly!请记住，对于要在其中显示结果的每个元素，您都需要一个唯一的ID，并相应地更新计算函数！

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 你如何用 document.write 写出 JavaScript 代码？ - How do you write out JavaScript code with document.write? 为什么我在document.write中链接我的jquery？ - Why do I link my jquery inside a document.write? 如何动态更改document.write中iframe的大小 - How do i dynamically change the size of my iframe within a document.write 如何使用document.write（）创建JavaScript来执行？ - How do I get JavaScript created with document.write() to execute? 如何在document.write中调用onclick函数？ - How do I call an onclick function within document.write? 如何替换 document.write？ - How can i replace document.write? 如何使用 document.write 更改文本并删除过去的文本 - How to change text with document.write and delete past text 除非事件已写入，否则如何使用document.write（）写入事件？ - How do I use document.write() to write an event unless it is already written? document.write我的网页后无法连接到扩展 - could not connect to extensions after I document.write my webpage 如何document.write引用？ - How to document.write a quote?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM