堆栈内存溢出
  繁体   English   中英

我的innerHTML命令没有更改任何内容，我不知道为什么

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

 原文  2015-01-23 10:06:52  0   8    javascript/ html/ function

问题描述

代码如下： 

    <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'）之类的东西时，则可以正常工作。 我在这里茫然。

8 个解决方案

解决方案1
 4 已采纳  2015-01-23 10:12:55

您需要在多行字符串的每一行末尾添加\\ （ 请参阅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/

解决方案2
 2  2015-01-23 10:15:22

工作正常。 您只是不能在此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

解决方案3
 1  2015-01-23 10:12:30

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

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

解决方案4
 1  2015-01-23 10:17:46

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

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

innerHTML解释

您的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字符串解释

解决方案5
 1  2015-01-23 10:21:18

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

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

解决方案6
 0  2015-01-23 10:12:47

尝试这个 

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

解决方案7
 0  2015-01-23 10:16:59

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

解决方案8
 0  2015-01-23 10:19:04

我认为问题是由原因引起的，因为要显示的内容跨越了几行而没有正确连接。 我做了如下修改： 

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

我认为这也使代码更简洁。

暂无
暂无

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

相关问题 无法弄清楚为什么我的JavaScript没有做任何事情 wp_add_inline_script没有向我的页面添加任何内容，无法弄清原因 我无法弄清楚为什么我添加事件处理程序的简单尝试无效 经典的元音练习。 我不知道为什么我的for循环无法正常工作 我不知道为什么我的石头，剪刀布游戏中的得分不起作用 无法弄清楚为什么我的对象中的值正在发生变化 我不知道为什么我的JavaScript无法正常工作…我正在将值动态传递给标签 无法弄清楚为什么我的Javascript没有使用Bulma框架更改CSS 无法弄清楚为什么JS插件无法正常工作 似乎无法弄清楚该脚本为何不起作用
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM