Question

代码如下：

    <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'）的东西时，它工作得很好。我在这里不知所措。

Answer 1

您需要将\（see Multiline String Variables in 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/

Answer 2

工作正常。你不能在这个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>');

working jsfiddle

Answer 3

字符串文字没有关闭，因为它的多行...为什么不隐藏它？

＆＃13;

<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>

＆＃13;

Answer 4

Javascript的innerHTML是一个属性，而不是一个方法，因此您只需为其分配一个值

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

innerHTML Explanation

您的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>

Explaination on Multi-Line Javascript Strings

Answer 5

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

<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>

Answer 6

试试这个

 <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>

Answer 7

<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>

Answer 8

我认为问题是因为要显示的内容跨越多行而没有正确连接。我按照以下方式重新修改了它;

<!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>

我认为这也使代码更清晰。

我的innerHTML命令没有改变任何东西，我无法弄清楚为什么

8 个答案: