將內容放入“彈出”框中。 HTML CSS和JS

Question

我一直在嘗試編寫我的第一個javascript，它似乎可以正常工作，但是我找不到如何將HTML內容放入腳本創建的彈出窗口中。 請提供一些幫助來查找問題，或者也許我應該如何重寫代碼。

我有兩個按鈕可以工作，但是當我嘗試其他任何操作時，它只是無法使用。

整個HTML：

 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/style.css" type="text/css"/> </head> <body> <center><img id="header" src="../img/hemsidotitle.png"></img></center> <div id="shadow"> <div id="navbar"> <a id="navbar-button" href="../index.html" style="border-radius: 5px 0px 0px 0px">Hem</a> <a id="navbar-button" href="../donera.html">Donera</a> <a id="navbar-button" href="#">Kits</a> <a id="navbar-button" href="#" style="border-radius: 0px 5px 0px 0px">Kontakta</a> </div> <div id="main-container"> <a onclick="myFunction()" id="kit-drake" class="kit">click me</a> <div> <script> function submit(){ document.getElementById('demo').innerHTML = '<div id="kit-drake-popup" class="pay"><input type="button" id="cancel-button" value="Köp Nu" onClick="submit()"></input> </div>'; } </script> <div id="demo"></div> <script> function myFunction() { document.getElementById("demo").innerHTML = '<div id="kit-drake-popup" ><input type="button" id="cancel-button" value="Avbryt" onClick="submit()"><a id="pay-button" href="#">Köp Nu</a> </div>'; } </script> </div> </div> <div id="content-center"> </div> </body> </html>

Answer 1

您必須在標記之外做HTML，因為它是內聯Javascript而不是HTML。 可以使用多個不同的標簽來實現，但我將為您提供一個開始打印“ Hello world！”的標簽：

<a onclick="myFunction()" id="kit-drake" class="kit"></a>
<div id="demo">   
<p>Hello world!</p>  
<script>
    function submit(){
        document.getElementById('demo').innerHTML = '<div id="kit-drake-popup" class="pay"><input type="button" id="cancel-button" value="Köp Nu" onClick="submit()"></input> </div>';

    }
</script>
<div id="demo"></div>
<script>
    function myFunction() {
        document.getElementById("demo").innerHTML = '<div id="kit-drake-    popup" ><input type="button" id="cancel-button" value="Avbryt" onClick="submit()"><a id="pay-button" href="#">Köp Nu</a> </div>';
    }
</script>
</div>

Answer 2

是你想要的嗎？ 我也嘗試清理您的代碼。

<a id="kit-drake" class="kit" href="#">Click me ! </a>
<div id="demo"></div>

function myFunction(){
    document.getElementById("demo").innerHTML = '<div id="kit-drake-popup" ><input type="button" id="cancel-button" value="Avbryt" onClick="submit()"><a id="pay-button" href="#">Köp Nu</a> </div>';
    document.getElementById ("kit-drake-popup").addEventListener("click",submit, false);
}
 function submit(){
                document.getElementById('demo').innerHTML+= '<div id="kit-drake-popup" class="pay"><input type="button" id="cancel-button" value="Köp Nu" onClick="submit()"></input> </div>';    



            }
document.getElementById ("kit-drake").addEventListener("click",myFunction, false);

https://jsfiddle.net/yvs38upf/

將內容放入“彈出”框中。 HTML CSS和JS

問題描述

2 個解決方案

解決方案1
0 2015-04-01 18:29:44

解決方案2
0 2015-04-01 18:56:19

將內容放入“彈出”框中。 HTML CSS和JS

問題描述

2 個解決方案

解決方案1 0 2015-04-01 18:29:44

解決方案2 0 2015-04-01 18:56:19

解決方案1
0 2015-04-01 18:29:44

解決方案2
0 2015-04-01 18:56:19