Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test Javascript</title>
<style>
    .web_image {
        display: block;
        text-align:center;
    }
    .next_image {
        display: none;
        text-align:center;
    }
    ul {
        background-color: #a9b9c9;
        text-align:left;
        margin:0;
        padding:0;
    }
    li {
        list-style-type:none;
        display:inline-block;
        padding:20px;
        border:1px solid red;
    }
</style>
</head>
<body>
    <h1 class="abc def ghi jkl">Header 1</h1>
    <p id="oldpar"><input class="myText" type="text" maxlength="450"/><br/><input type="submit" value="Submit My Value"/></p>
    <p id="newpar"></p>
    <div class="web_image"><img src="http://placehold.it/350x150" />    </div>
    <div class="next_image"><img width="350px" src="http://img06.deviantart.net/1b60/i/2013/225/5/6/shiva_by_christasvengel-d6hyf9n.jpg" /> </div>
    
    <ul>
        <li>List 1</li>
        <li>List 2</li>
        <li>List 3</li>
        <li>List 4</li>
        <li>List 5</li>
    </ul>
        <div id="ilu"></div>
<script>
    (function() {
        function htmlEntities(str) {
    return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 }
 inputPar = document.querySelector("#oldpar .myText");
 oldPar = document.querySelector("#oldpar");    
 newPar = document.querySelector("#newpar");
 function writePar(e) {
    newPar.innerHTML = htmlEntities(inputPar.value) + '<br/>' + '<button class="myBtn">Click Me</button>';
    newPar.style.display="block";
    oldPar.style.display = "none";
    //var myBtn = document.getElementsByClassName("myBtn");
    //myBtn[0].addEventListener("click", revertMe);
    e.stopPropagation();
 }
    function    revertMe(e) {
    oldPar.style.display="block";
    newPar.style.display="none";
    e.stopPropagation();
 }   
    newPar.addEventListener("click", function(e){
  if (e.target && e.target.matches(".myBtn")) {
    revertMe(e);
   }
 });
​
    var submitPar = document.getElementById("oldpar").querySelector('input[type="submit"]');
    submitPar.addEventListener("click", writePar); 
​
    function writeMeOn(i) {
                var p = document.createElement("p");
                p.innerHTML = "List " + (i + 1);
                ilu = document.getElementById("ilu");
                ilu.appendChild(p);
                if (ilu.getElementsByTagName("p").length === 5) {
                                ilu.innerHTML = "";
        }
    }
        var li = document.getElementsByTagName("li");
        tellMe = null;
        for(let i=0;i<li.length;i++) {
            li[i].addEventListener("click", function(e) {
                            if (this.style.backgroundColor == "yellow") {
                                    this.style.backgroundColor = "";
                                    ilu.innerHTML = "";
                                    document.getElementsByTagName("h1")[0].innerHTML = "Header 1";
                                    clearInterval(tellMe);
                            } else {
                                ilu.innerHTML = "";
                                for(j=0;j<li.length;j++) {
                                    li[j].style.backgroundColor = "";
                                    if (tellMe) {
                                        clearInterval(tellMe);
                                    }
                                }
                                this.style.backgroundColor = "yellow";
                                document.getElementsByTagName("h1")[0].innerHTML = "List " + (i + 1);
                                    tellMe = setInterval(writeMeOn, 1000, i);
                            }
                e.stopPropagation();
                });
            }
        var div = document.querySelectorAll("div");
        div[0].addEventListener("click", function(e) {
            div[0].style.display = "none";
            div[1].style.display = "block";
            e.stopPropagation();
        });
        div[1].addEventListener("click", function(e) {
            div[1].style.display = "none";
            div[0].style.display = "block";
            e.stopPropagation();
        });
    })();
</script>
</body>
</html>
 
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
schttrjpro
0viewers