我的 innerHTML 命令没有改变任何东西，我不知道为什么

My innerHTML command isn't changing anything and i can't figure out why

本文关键字：我不知道 为什么 任何东 改变 innerHTML 命令 我的      更新时间：2023-09-26

代码如下：

    <div id="js"><button onclick="document.getElementById('js').innerHTML=('<form>
    <input type=text name=tick1></input>
    <input type=text name=tick2></input>
    <input type=text name=tick3></input>
    <input type=submit></input>
</form>')">Kaarten bestellen</button>
</div>

我真的不明白为什么它不起作用。当我将表单作为实际的html放在脚本之外时，它可以正常工作，当我使用更像.innerHTML（'test'）的东西时，它工作得很好。我在这里不知所措。

您需要

在多行字符串中的每一行末尾添加'（请参阅 JavaScript 中的多行字符串变量）：

<div id="js"><button onclick="document.getElementById('js').innerHTML=('<form>'
    <input type=text name=tick1></input>'
    <input type=text name=tick2></input>'
    <input type=text name=tick3></input>'
    <input type=submit></input>'
</form>')">Kaarten bestellen</button>
</div>

http://jsfiddle.net/o5tuqt1L/

它工作正常。您不能在此 js 代码中使用换行符。您可以使用 + 运算符来连接字符串。

document.getElementById('js').innerHTML=('<form>'
+'<input type=text name=tick1></input><input type=text name=tick2>'
+'</input><input type=text name=tick3></input><input type=submit>'
+'</input></form>');

工作中的 JSFIDDLE

字符串文字不是封闭的，因为它有多行...你为什么不把它藏起来呢？

<div id="js">
    <button onclick="document.getElementById('myForm').style.display='block';this.style.display='none';">
        Kaarten bestellen
    </button>
    <form id="myForm" style="display:none">
        <input type=text name=tick1></input>
        <input type=text name=tick2></input>
        <input type=text name=tick3></input>
        <input type=submit></input>
    </form>
</div>

Javascript的innerHTML是一个属性，而不是一个方法，所以你只是像这样给它赋值

document.getElementById('js').innerHTML = "Hello, World.";

内部网页解释

您的 HTML 语法无效：

<form>
<input type=text name=tick1></input>
<input type=text name=tick2></input>
<input type=text name=tick3></input>
<input type=submit></input>
</form>

您的type和name属性值需要用双引号括起来" .input元素也不需要内容，因此您可以使其自动关闭。检查这个：

<form>
<input type="text" name="tick1" />
<input type="text" name="tick2" />
<input type="text" name="tick3" />
<input type="submit" />
</form>

Javascript字符串不是多行的。所以你需要转义换行符，如下所示：

<form>'
<input type="text" name="tick1" />'
<input type="text" name="tick2" />'
<input type="text" name="tick3" />'
<input type="submit" />'
</form>

多行 JavaScript 字符串的解释

如果我以正确的方式理解您的问题，这也是一个答案。

<div id="js"><button onclick="document.getElementById('js').innerHTML='<form>'
    +'<input type=''text'' name=''tick1''></input>'
    +'<input type=''text'' name=''tick2''></input>'
    +'<input type=''text'' name=''tick3''></input>'
    +'<input type=''submit''></input>'
 +'</form>'">Kaarten bestellen</button>
</div>

试试这个

 <div id="js"><button onclick="document.getElementById('js').innerHTML='<form><input type=text name=tick1></input><input type=text name=tick2></input><input type=text name=tick3></input><input type=submit></input></form>'">Kaarten bestellen</button>
</div>

<div id="js"><button onclick="document.getElementById('js').innerHTML=''
    <form>'
        <input type=text name=tick1></input>'
        <input type=text name=tick2></input>'
        <input type=text name=tick3></input>'
        <input type=submit></input>'
    </form>'
'">Kaarten bestellen</button>
</div>

我认为问题的原因是因为要显示的内容跨越了几行而没有正确连接。我重新设计如下;

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>
    <script type="text/javascript">
        function loadForm(){
            var formContent ="<form>"
                            +"<input type='text' name='tick1'></input>"
                            +"<input type='text' name='tick2'></input>"
                            +"<input type='text' name='tick3'></input>"
                            +"<input type='submit'></input>"
                            +"</form>";
            document.getElementById('js').innerHTML =(formContent);
        }
    </script>
    <div id="js">
        <button onclick="loadForm()">Kaarten bestellen</button>
    </div>
</body>
</html>

我认为这也使代码更干净。

相关文章：