堆棧內存溢出
  簡體   English   中英

我的innerHTML命令沒有更改任何內容，我不知道為什么

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

 原文  2015-01-23 10:06:52  2   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