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/

将内容放入我的＆＃34; popup＆＃34;框。 HTML CSS＆amp; JS

2 个答案: