Question

大家好我是javascript的新手我想知道为什么html按钮一旦点击它就会消失。浏览器显示文本但按钮消失。这是我的html看起来像

的方式

<html>
    <head>
        <script type="text/javascript">
            function funcname(){
                document.write("<br/>  <br/> <br/> some text");
            }
         </script>
    </head>
    <body>
        <form>
            <input type="button" name="something" value="touch me" onclick="funcname()"> 
        </form>
    </body>
</html>

Answer 1

write（）方法将HTML表达式或JavaScript代码写入文档。

write（）方法主要用于测试：如果在HTML文档完全加载后使用它，它将删除所有现有的HTML。

回答：source

Answer 2

   <html>
   <head>
   <script type="text/javascript">

   function funcname()
   {

       document.body.innerHTML += "Some Text";
   }

   </script>
   </head>
   <body>

   <form>
   <input type="button" name="something" value="touch me" onclick="funcname()"> 
   </form>

   </body>
   </html>

尝试上面的代码它会正常工作。如果你使用document.write（）覆盖正文，那么应该使用document.body.innerHTML。

Answer 3

当调用时，Document.write函数会覆盖文档内容，如Mozilla开发人员网络所述：

注意：当document.write写入文档流时，在已关闭（加载）的文档上调用document.write会自动调用document.open来清除文档。

来源：https://developer.mozilla.org/en-US/docs/Web/API/Document/write

Answer 4

document.write()将覆盖您的整个body元素。如果您只想覆盖特定部分，可以定义目标并使用innerHTML更改文本。

<html>
    <head>
        <script type="text/javascript">
            function funcname(){
                document.getElementById("someParagraph").innerHTML = "Paragraph changed!";
            }
        </script>
    </head>
    <body>
        <form>
            <input type="button" name="something" value="touch me" onclick="funcname()"> 
        </form>
        <p id="someParagraph">Hey<p>

    </body>
</html>

onclick（）事件后，html按钮消失

4 个答案: