CODEWITHSUNDEEP
javascripthtmlcss
Robbac
Robbac

Reputation: 1

To put content into a JS popup div. Strange issues with the JS

I got issues to put content into the popup box. I got two buttons into it but no more, nothing else wont work, text for examples.

This is the whole html document

<!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 here</a>
        <div id="somethingelse">
        </div>
            <script>
                function submit(){
                    document.getElementById('demo').innerHTML = '<div id="kit-drake-popup" class="pay">TEST<input type="button" id="cancel-button" value="Köp Nu" onClick="submit()">TEST</input>test </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>
    <div id="content-center">
    </div>
</body>
</html>

So this is what it looks like when I press the anchor:

enter image description here

All I want is that the gray button close the popup, the green one just to be an anchor to another page and then be able to put other divs and content, such as text in the popup div (kit-drake-popup). Could this be done in a easy way?

Upvotes: 0

Views: 144

Answers (1)

Barmar
Barmar

Reputation: 780984

You can use string concatenation to put text into the popup.

function submit() {
  document.getElementById('demo').innerHTML = '<div id="kit-drake-popup" class="pay">TEST<input type="button" id="cancel-button" value="Köp Nu" onClick="submit()">TEST</input>test </div>';

}

function myFunction(text) {
  document.getElementById("demo").innerHTML = '<div id="kit-drake-popup" >' + text + '<br><input type="button" id="cancel-button" value="Avbryt" onClick="submit()"><a id="pay-button" href="#">Köp Nu</a > </div>';
}
<div id="shadow">
  <div id="main-container">
    <a onclick="myFunction('<div style=\'background-color: yellow; color: blue\'>This is blue text on yellow background.</div>'); return false;" id="kit-drake" class="kit">Click here</a>
    <div id="somethingelse">
    </div>
    <div id="demo"></div>


  </div>
</div>
<div id="content-center">
</div>

Upvotes: 1

Related Questions