Question

这可能是一个愚蠢的问题，但为什么我会在函数test（）启动时丢失所有格式？我应该在代码中更改什么？我真的很感谢你的帮助！

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
   body {
         background: #E6E6FA;
         font-family: book antiqua;
   }
   h1, h2 {
      color: grey;
   }
</style>

</head>
<h3>Title</h3>
<body bgcolor="#E6E6FA">
    <input type="text" id="userInput"></input>
    <button onclick="test()">Submit</button>
    <p id="Demo"></p>
    <p id="Beg"></p>
    <p id="Fin"></p>
    <script>
        function test()
        {
            var nam= document.getElementById("userInput").value;
            var l = nam.length;
            var pocz = nam.slice(0,1);
            var kon = nam.slice(-1);
            document.getElementById("Demo").innerHTML = document.write("Your secret code: " + l + pocz + kon);
            var one = nam.slice(-1)
            if (one == "a") {
               document.write(nam.slice(0,-1) + "bbb");
            } else {
               document.write(nam + "ccc"); 
            }         


        }
    </script>
</body>
</html>

Answer 1

如果在之后调用document.write，则替换文档。您也错误地使用document.write，它不会返回任何内容。只要省略它就可以正常工作。

document.getElementById("Demo").innerHTML = "Your secret code: " + l + pocz + kon;

对于其他用途，请执行相同的操作，并通过innerHTML将值分配给元素。

请在使用不熟悉的功能之前阅读documentation。

Answer 2

永远不要使用document.write。永远。只是不要使用它。这完全是过时的。

Felix Kling的答案将适用于第一部分，因为您直接将html分配给元素。但后来的调用是在文档中添加更多内容，而不是替换内容，因此您必须将新内容添加到文档中，或者创建另一个占位符（如演示）。以下是添加新内容的方法：

function test()
    {
        var nam= document.getElementById("userInput").value;
        var l = nam.length;
        var pocz = nam.slice(0,1);
        var kon = nam.slice(-1);
        document.getElementById("Demo").innerHTML = "Your secret code: " + l + pocz + kon;
            var one = nam.slice(-1);
            if (document.getElementsByClassName("spantext").length===0)
            {
            var text=document.createElement("span");
    text.setAttribute("class","spantext");
            document.getElementsByTagName("body")[0].appendChild(text);
            }
            else {
            var text=document.getElementsByClassName("spantext")[0];
            }

            if (one == "a") {
               text.innerHTML=nam.slice(0,-1) + "bbb";
            } else {
               text.innerHTML=nam + "ccc"; 
            }      

    }

fiddle

运行javascript后为什么会丢失格式？

2 个答案: