将内容放入“弹出”框中。 HTML CSS和JS
[英]Put content into my “popup” boxes. HTML CSS & JS
问题描述
I've been trying to write my first javascript and it seems to work fine but I can't find how to get HTML content into the popup that the script creates. 
我一直在尝试编写我的第一个javascript，它似乎可以正常工作，但是我找不到如何将HTML内容放入脚本创建的弹出窗口中。 Would appresiate some help to find the issue or maybe how I should rewrite the code. 请提供一些帮助来查找问题，或者也许我应该如何重写代码。
I got two buttons to work but when I try anything else it just wont. 我有两个按钮可以工作，但是当我尝试其他任何操作时，它只是无法使用。
The whole 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>
2 个解决方案
解决方案1
0 2015-04-01 18:29:44
You'll have to do your HTML outside of a tag since that's inline-Javascript and NOT Html. 您必须在标记之外做HTML，因为它是内联Javascript而不是HTML。 This can be achieved using multiple different tags but i'll give you one to start out with that prints out "Hello world!": 可以使用多个不同的标签来实现，但我将为您提供一个开始打印“ 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>
解决方案2
0 2015-04-01 18:56:19
is it what you want ? 是你想要的吗？ I tried to clean a bit your code too. 我也尝试清理您的代码。
<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/ https://jsfiddle.net/yvs38upf/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.