Allow div to be clicked with 'onblur' event on input text - javascript

After 500 milliseconds from the text inserted into the input text, I'm opening a div under the input text which contains a div with the inserted text on it. When inserted text is clicked it should console.log the text, but it is not able to do so because the onblur event occurs before the click. I want to keep my onblur event. But with the onblur event I can't make the div clickable. Please help
index.html:
var input_timeout = undefined;
document.getElementById("navigation").querySelector("INPUT").onkeyup = function () {
clearTimeout(input_timeout);
var val = this.value;
input_timeout = setTimeout(function () {
var to_add_to = document.querySelector("#navigation div");
to_add_to.innerHTML = "";
to_add_to.style.visibility = "visible";
var div_to_put = document.createElement("div");
div_to_put.style.visibility = "visible";
div_to_put.id = val;
div_to_put.innerHTML += "<font>" + val + "</font";
div_to_put.onclick = function () {
console.log(this.id);
}
to_add_to.appendChild(div_to_put);
}, 500);
}
document.getElementById("navigation").querySelector("INPUT").onblur = function () {
this.value = "";
document.querySelector("#navigation div").style.visibility = "hidden";
document.querySelector("#navigation div").innerHTML = "";
}
body {
margin: 0;
}
#navigation {
min-width: 620px;
background-color: silver;
width: 100%;
height: 50px;
position: fixed;
top: 0;
}
#navigation input {
height: 30px;
width: 200px;
font-size: 15px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
display: block;
margin: 10px 5% 0% auto;
padding: 0px 28px 0px 5px;
float: right;
}
#navigation div {
width: 200px;
height: 50px;
position: absolute;
top: 41px;
right: 5%;
color: orange;
background-color: white;
border: 1px solid orange;
border-radius: 5px;
visibility: hidden;
}
#navigation div div {
width: 100%;
height: 30px;
text-align: center;
font-size: 25px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<div id="navigation">
<input type="text" name="Search">
<div></div>
</div>
</body>
</html>


Unlike the onclick event, the onmousedown event is fired before the onblur event:
var input_timeout = undefined;
document.getElementById("navigation").querySelector("INPUT").onkeyup = function () {
clearTimeout(input_timeout);
var val = this.value;
input_timeout = setTimeout(function () {
var to_add_to = document.querySelector("#navigation div");
to_add_to.innerHTML = "";
to_add_to.style.visibility = "visible";
var div_to_put = document.createElement("div");
div_to_put.style.visibility = "visible";
div_to_put.id = val;
div_to_put.innerHTML += "<font>" + val + "</font";
div_to_put.onmousedown = function () {
console.log(this.id);
}
to_add_to.appendChild(div_to_put);
}, 500);
}
document.getElementById("navigation").querySelector("INPUT").onblur = function () {
this.value = "";
document.querySelector("#navigation div").style.visibility = "hidden";
document.querySelector("#navigation div").innerHTML = "";
}
body {
margin: 0;
}
#navigation {
min-width: 620px;
background-color: silver;
width: 100%;
height: 50px;
position: fixed;
top: 0;
}
#navigation input {
height: 30px;
width: 200px;
font-size: 15px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
display: block;
margin: 10px 5% 0% auto;
padding: 0px 28px 0px 5px;
float: right;
}
#navigation div {
width: 200px;
height: 50px;
position: absolute;
top: 41px;
right: 5%;
color: orange;
background-color: white;
border: 1px solid orange;
border-radius: 5px;
visibility: hidden;
}
#navigation div div {
width: 100%;
height: 30px;
text-align: center;
font-size: 25px;
color: orange;
border: 1px solid orange;
border-radius: 5px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
</head>
<body>
<div id="navigation">
<input type="text" name="Search">
<div></div>
</div>
</body>
</html>

Related

color changing button onclick

Okay so so far I have this page with a few buttons in it, whenever you click the button it turns red now i want to add that whenever you click it more times the color changes.
so for example: first the button is green, on the first click it turns red, on the third click it turns pink and so on.
I tried to do this with the set_onclick function I made and then multiple this code:
for (var a = 1; a < (amount + 1); a++) {
document.getElementById("button" + a).setAttribute("onclick", "onbuttonclicked(" + a + ")");
but i dont get it to work
page();
function onbuttonclicked(a) {
document.getElementById("button" + a).classList.remove("button")
document.getElementById("button" + a).classList.add("clickedbutton")
}
function set_onclick(amount) {
for (var a = 1; a < (amount + 1); a++) {
document.getElementById("button" + a).setAttribute("onclick", "onbuttonclicked(" + a + ")");
}
}
function page() {
document.body.style.backgroundColor = "grey";
//style page
createButtons(30);
}
function createButtons(amount){
for (var a = 1;a <(amount + 1); a++) {
var button = document.createElement("button");
button.classList.add("button")
button.id = "button" + a;
button.innerHTML = "button " + a;
container.appendChild(button);
}
set_onclick(amount);
}
body{
background-color: white;
}
#container{
top: 10px;
padding: 82px;
margin: auto;
width: 800px;
height: 350px;
background-color: grey;
position: relative;
}
#buttons{
margin-bottom: 30px;
}
button{
background-color: #4CAF50;
border: 1px solid black;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
width: 140px;
height: 50px;
}
body{
background-color: white;
}
#container{
top: 10px;
padding: 82px;
margin: auto;
width: 800px;
height: 350px;
background-color: grey;
position: relative;
}
#buttons{
margin-bottom: 30px;
}
button{
background-color: #4CAF50;
border: 1px solid black;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
width: 140px;
height: 50px;
}
.clickedbutton {
background-color: red;
}
.button {
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>buttons</title>
<link rel="stylesheet" type="text/css" href="buttons.css">
</head>
<body>
<div id="container"></div>
<script src="buttons.js"></script>
</body>
</html>

As you said the color of the button is dependent on how many times you clicked the button, and you will have to manage a local state for each button since there are many buttons
I think the the first thing you need is an object that will change the color like this, where the key is count and value is color
const obj = {
1 : "red",
2 : "blue"
3 : "pink"
4 : "skyblue"
...
...
...
}
and then change the color according to it
var colorMap = {
1 : "red",
2 : "blue",
3 : "pink",
4 : "hotpink",
5 : "brown",
6 : "yellow",
7 : "black"
}
page();
function page() {
document.body.style.backgroundColor = "grey";
createButtons(30);
}
document.body.addEventListener("click", (e)=>{
if(e.target.classList.contains("button")){
let currentbtnCount = parseInt(e.target.getAttribute("data-current-count")) + 1;
e.target.style.backgroundColor = colorMap[currentbtnCount] ? colorMap[currentbtnCount] : "black";
e.target.setAttribute("data-current-count", currentbtnCount);
}
})
function createButtons(amount){
for (var a = 1;a <(amount + 1); a++) {
var button = document.createElement("button");
button.classList.add("button")
button.setAttribute("data-current-count", "0")
button.id = "button" + a;
button.innerHTML = "button " + a;
container.appendChild(button);
}
}
body{
background-color: white;
}
#container{
top: 10px;
padding: 82px;
margin: auto;
width: 800px;
height: 350px;
background-color: grey;
position: relative;
}
#buttons{
margin-bottom: 30px;
}
button{
background-color: #4CAF50;
border: 1px solid black;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
width: 140px;
height: 50px;
}
body{
background-color: white;
}
#container{
top: 10px;
padding: 82px;
margin: auto;
width: 800px;
height: 350px;
background-color: grey;
position: relative;
}
#buttons{
margin-bottom: 30px;
}
button{
background-color: #4CAF50;
border: 1px solid black;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
width: 140px;
height: 50px;
}
.clickedbutton {
background-color: red;
}
.button {
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>buttons</title>
<link rel="stylesheet" type="text/css" href="buttons.css">
</head>
<body>
<div id="container"></div>
<script src="buttons.js"></script>
</body>
</html>
And if you want complete random colors then here is another one
function random_rgba() {
var o = Math.round, r = Math.random, s = 255;
return 'rgba(' + o(r()*s) + ',' + o(r()*s) + ',' + o(r()*s) + ',' + r().toFixed(1) + ')';
}
page();
function page() {
document.body.style.backgroundColor = "grey";
createButtons(30);
}
document.body.addEventListener("click", (e)=>{
if(e.target.classList.contains("button")){
e.target.style.backgroundColor = random_rgba();
}
})
function createButtons(amount){
for (var a = 1;a <(amount + 1); a++) {
var button = document.createElement("button");
button.classList.add("button")
button.setAttribute("data-current-count", "0")
button.id = "button" + a;
button.innerHTML = "button " + a;
container.appendChild(button);
}
}
body{
background-color: white;
}
#container{
top: 10px;
padding: 82px;
margin: auto;
width: 800px;
height: 350px;
background-color: grey;
position: relative;
}
#buttons{
margin-bottom: 30px;
}
button{
background-color: #4CAF50;
border: 1px solid black;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
width: 140px;
height: 50px;
}
body{
background-color: white;
}
#container{
top: 10px;
padding: 82px;
margin: auto;
width: 800px;
height: 350px;
background-color: grey;
position: relative;
}
#buttons{
margin-bottom: 30px;
}
button{
background-color: #4CAF50;
border: 1px solid black;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
width: 140px;
height: 50px;
}
.clickedbutton {
background-color: red;
}
.button {
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>buttons</title>
<link rel="stylesheet" type="text/css" href="buttons.css">
</head>
<body>
<div id="container"></div>
<script src="buttons.js"></script>
</body>
</html>

Make a function that will count clicks and change the color of the button depending on the amount of the clicks.
You can just change a class like this:
document.querySelector(".MyElement").className = "MyClass";
hope You know that when searching for a class with querySelector You need to use '.' in front of the name of the class. If You try to find by ID either use querySelector with '#' in front of an ID or use getElementById:
document.getElementById("MyElement").className = "MyClass";
Example:
let counter = 0
document.getElemenetById('button').onclick = function(){
counter += 1
}
if (counter = 0) {
document.getElementById('button').className = 'red'
} else if (counter = 1) {
document.getElementById('button').className = 'blue'
}
or
let counter = 0
document.getElementById("button").addEventListener("click", counter += 1);
if (counter = 0) {
document.getElementById('button').className = 'red'
} else if (counter = 1) {
document.getElementById('button').className = 'blue'
}
or
let counter = 0
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
counter += 1
}
if (counter = 0) {
document.getElementById('button').className = 'red'
} else if (counter = 1) {
document.getElementById('button').className = 'blue'
}
</script>

How to make a toggle onclick to hide and show video player's UI?

I want to show and hide the video player's elements details, play_pause_button and controls_bar when the video player itself is clicked but not when its elements are clicked. I have made some progress but the video player's elements hide when I click on the elements which shouldn't happen. So how can I detect that the video player was clicked but not the video player's elements.
index.html:
var play_pause_button = document.getElementById("play_pause_button");
play_pause_button.style.visibility = "hidden";
var details = document.getElementById("details");
details.style.visibility = "hidden";
var controls_bar = document.getElementById("player_controller_bar");
controls_bar.style.visibility = "hidden";
document.getElementById("video_player_box").onclick = function () {
if (controls_bar.style.visibility == "hidden") {
play_pause_button.style.visibility = "visible";
details.style.visibility = "visible";
controls_bar.style.visibility = "visible";
} else {
play_pause_button.style.visibility = "hidden";
details.style.visibility = "hidden";
controls_bar.style.visibility = "hidden";
}
}
body {
margin: 0;
}
#video_player_box {
position: relative;
height: 100%;
width: 100%;
display: block;
font-family: Helvetica, Arial, sans-serif;
color: rgb(22,22,23);
}
#video_player_box video {
height: 100%;
width: 100%;
pointer-events: none;
}
#video_player_box img {
width: 50px;
height: 50px;
}
#video_player_box #details {
width: 100%;
height: 12.5%;
background-color: rgb(108, 171, 247);
position: absolute;
top: 0;
}
#video_player_box #play_pause_button {
background-color: rgb(108, 171, 247);
height: 100px;
width: 100px;
margin-top: -50px;
margin-left: -50px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
}
#video_player_box #play_pause_button img {
width: 50%;
height: 50%;
z-index: 1;
position: absolute;
left: 50%;
top: 50%;
margin: -25% 0px 0px -25%;
}
#video_player_box #player_controller_bar {
width: 100%;
height: 50px;
background-color: rgb(108, 171, 247);
position: absolute;
bottom: 0;
display: flex;
align-items: center;
}
.controller_bar_block1, .controller_bar_block3 {
text-align: center;
padding: 0px 5px 0px 5px;
margin: 5px 0px 5px 0px;
}
.controller_bar_block2 {
flex: 7;
text-align: center;
padding: 0px 5px 0px 5px;
}
#video_player_box #seek_bar {
padding-top: 3px;
background: rgb(108, 171, 247);
border: rgb(22, 22, 23) 1px solid;
border-radius: 50px;
width: 100%;
float: left;
-webkit-appearance: none !important;
height: 4px;
flex: 7;
}
#video_player_box #seek_bar::-webkit-slider-thumb {
-webkit-appearance: none !important;
background: rgb(22, 22, 23);
height: 1px;
width: 1px;
cursor: pointer;
border-radius: 100%;
}
<html>
<head>
<title></title>
</head>
<body>
<div id="video_player_box">
<div id="details"></div>
<div id="play_pause_button">
<img src="https://image.flaticon.com/icons/png/512/31/31128.png">
</div>
<video poster="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Big_buck_bunny_poster_big.jpg/220px-Big_buck_bunny_poster_big.jpg" src="https://dash.akamaized.net/akamai/bbb/bbb_640x360_60fps_1200k.mp4"></video>
<div id="player_controller_bar">
<div class="controller_bar_block1">00:00:00</div>
<div class="controller_bar_block2">
<input id="seek_bar" type="range" min="0" value="0" max="634">
</div>
<div class="controller_bar_block3">00:10:34</div>
</div>
</div>
</body>
</html>

You can use the event's target property. The target property references the element that was actually clicked, even when you attach the handler on a ascending element
(see https://developer.mozilla.org/en-US/docs/Web/API/Event/target)
you will receive the reference to the event as the first argument of your onClick handler
myElement.onclick = function (ev) {
if (ev.target.id === 'details') {
// the clicked element is the details element
}
}
you can also check if the target is the video element for example.
console.log(ev.target.nodeName === 'VIDEO')

Paint JS changing color onclick

I'm trying to make Paint in JS here's the code.
I want to change color of the trail from black to red by clicking on div "red" for example,and I'm out of ideas (without jQuery).
let active = false;
const draw = function(e) {
if (active == false) {
return;
}
const x = e.clientX;
const y = e.clientY;
let div = document.createElement("div");
div.style.top = y + "px";
div.style.left = x + "px";
document.body.appendChild(div);
}
const drawActive = function() {
active = !active
}
function changeColor() {
//div.classList.add("mainColor");
}
document.getElementById("red").onclick = changeColor;
document.body.addEventListener("mousemove", draw);
document.body.addEventListener("mousedown", drawActive);
document.body.addEventListener("mouseup", drawActive);
body {
height: 100vh;
margin: 0;
}
#containter {
width: 200px;
height: 200px;
border-radius: 0;
background-color: #fff;
position: fixed;
}
div {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #000;
position: absolute;
}
#red {
width: 25px;
height: 25px;
background-color: red;
border-radius: 0;
margin-top: 18%;
}
.blue {
width: 25px;
height: 25px;
background-color: blue;
border-radius: 0;
margin-top: 6%;
margin-left: 12%;
}
.yellow {
width: 25px;
height: 25px;
background-color: yellow;
border-radius: 0;
margin-top: 18%;
margin-left: 12%;
}
.green {
width: 25px;
height: 25px;
background-color: green;
border-radius: 0;
margin-top: 6%;
}
.first {
background-color: red !important;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
}
.mainColor {
background-color: red !important;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Paint</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="containter">
<div id="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
</div>
<script src="script.js"></script>
</body>
</html>
I tried to make it with setAttribute but I had some errors.
I don't know which details should I give.
I don't know which details should I give.ยด
#Edit from review: removed 6 more repetitions...

I used the querySelectorAll to find all div and added condition
if (!document.getElementById("containter").contains(item))
to except content within div id container.
document.querySelectorAll('div').forEach(function (item) {
if (!document.getElementById("containter").contains(item))
item.setAttribute('class', 'mainColor');
})
let active = false;
const draw = function(e) {
if (active == false || document.getElementById("containter").contains(e.target)) {
return;
}
const x = e.clientX;
const y = e.clientY;
let div = document.createElement("div");
div.style.top = y + "px";
div.style.left = x + "px";
document.body.appendChild(div);
}
const drawActive = function() {
active = !active
}
function changeColor() {
document.querySelectorAll('div').forEach(function(item) {
if (!document.getElementById("containter").contains(item))
item.setAttribute('class', 'mainColor');
})
}
document.getElementById("red").onclick = changeColor;
document.body.addEventListener("mousemove", draw);
document.body.addEventListener("mousedown", drawActive);
document.body.addEventListener("mouseup", drawActive);
body {
height: 100vh;
margin: 0;
}
#containter {
width: 200px;
height: 200px;
border-radius: 0;
background-color: #fff;
position: fixed;
}
div {
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #000;
position: absolute;
}
#red {
width: 25px;
height: 25px;
background-color: red;
border-radius: 0;
margin-top: 18%;
}
.blue {
width: 25px;
height: 25px;
background-color: blue;
border-radius: 0;
margin-top: 6%;
margin-left: 12%;
}
.yellow {
width: 25px;
height: 25px;
background-color: yellow;
border-radius: 0;
margin-top: 18%;
margin-left: 12%;
}
.green {
width: 25px;
height: 25px;
background-color: green;
border-radius: 0;
margin-top: 6%;
}
.first {
background-color: red !important;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
}
.mainColor {
background-color: red !important;
width: 5px;
height: 5px;
border-radius: 50%;
position: absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Paint</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="containter">
<div id="red"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="yellow"></div>
</div>
<script src="script.js"></script>
</body>
</html>

Javascript let user choose element

https://gyazo.com/aa49eb6d6849b3adabb8924aa9e40594
I have the elements in the diagram and I want to let the user choose in which element they are going to add the semi column to add text, but I dont know how to let them select a element and then add according to that selection.
var addDetail = document.getElementById('addDetail');
var clauseInput = document.getElementsByClassName('clause');
document.addEventListener('click', function(e) {
e = e || window.event;
var target = e.target || e.srcElement;
if(target == clauseInput[0] || target == clauseInput[1] ||
target == clauseInput[2] || target == clauseInput[3] ||
target == clauseInput[4] || target == addDetail) {
document.getElementById('addDetail').style.display='inline-block';
// createDetail();
console.log(target);
} else {
document.getElementById('addDetail').style.display='none';
}
}, false);

Update
Instead of searching through all clause elements every time when addDetail been clicked, there is e.relatedTarget that really suitable to your problem, detailed documentation, and the update snippet :
/*CREATE TOP AND BOTTOM CLAUSES*/
/*Top Clauses*/
const addClauseTop = document.querySelector('#addClauseTop');
var targetClauseElement;
var addDetail = document.getElementById('addDetail');
addDetail.addEventListener('focusin', function(e) {
createDetail(e.relatedTarget);
});
window.addEventListener('mouseup',function(e) {
if ( e.currentTarget != addDetail ) {
addDetail.style.display='none';
}
});
var firstTopClause = document.getElementsByClassName('clause')[0];
firstTopClause.addEventListener('click', function(e) {
addDetail.style.display='inline-block';
});
var firstBottomClause = document.getElementsByClassName('clauseDivReverse')[0];
firstBottomClause.addEventListener('click', function(e) {
addDetail.style.display='inline-block';
});
addClauseTop.addEventListener('click',function(e){
e.preventDefault();
//Get Divs-Overlay
const topDivs = document.querySelector('#topClauses');
const bottomDivs = document.querySelector('#bottomClauses');
// Create Elements
const clauseDiv = document.createElement('div');
const clauseText = document.createElement('input');
const clauseStroke = document.createElement('div');
// // //Give Style
clauseDiv.classList.add('clauseDiv');
clauseDiv.addEventListener('click', function(e) {
addDetail.style.display='inline-block';
});
clauseText.classList.add('clause');
clauseText.setAttribute("id", "clause");
clauseStroke.classList.add('strokeClause');
//
// // Append to document
clauseDiv.appendChild(clauseText);
clauseDiv.appendChild(clauseStroke);
topDivs.appendChild(clauseDiv);
document.body.appendChild(topDivs);
document.body.appendChild(bottomDivs);
})
/*BOTTOM Clauses*/
const addClauseBottom = document.querySelector('#addClauseBottom');
addClauseBottom.addEventListener('click',function(e){
e.preventDefault();
//Get Divs-Overlay
const topDivs = document.querySelector('#topClauses');
const bottomDivs = document.querySelector('#bottomClauses');
// Create Elements
const clauseDiv = document.createElement('div');
clauseDiv.addEventListener('click', function(e) {
targetClauseElement = e.currentTarget;
addDetail.style.display='inline-block';
});
const clauseText = document.createElement('input');
const clauseStroke = document.createElement('div');
// // //Give Style
clauseDiv.classList.add('clauseDivReverse');
clauseText.classList.add('clauseReverse');
clauseText.setAttribute("id", "clauseReverse");
clauseStroke.classList.add('strokeClauseReverse');
//
// // Append to document
clauseDiv.appendChild(clauseText);
clauseDiv.appendChild(clauseStroke);
bottomDivs.appendChild(clauseDiv);
document.body.appendChild(bottomDivs);
})
/***********/
//Create a addDetail
function createDetail(target){
var mainColumn = target.parentElement;
var strokeColumn = mainColumn.children[1];
// Create Elements
var levelOneDiv = document.createElement('div');
var levelOneText = document.createElement('input');
if ( mainColumn.classList.contains('clauseDiv') ) {
levelOneDiv.classList.add('levelOneClauseReverse');
levelOneText.classList.add('levelOneTextReverse');
//I thought you have not completed your style yet, like something levelOneClause class
} else {
levelOneDiv.classList.add('levelOneClauseReverse');
levelOneText.classList.add('levelOneTextReverse');
}
levelOneDiv.appendChild(levelOneText);
strokeColumn.appendChild(levelOneDiv);
}
#import url('https://fonts.googleapis.com/css?family=Vollkorn+SC');
body{
margin: 10%;
margin-right: 15%;
margin-left: 10%;
margin-top: 5%;
}
h1{
color: #3B3C3D;
font-family: 'Vollkorn SC', serif;
font-size: 2em;
text-align:center;
}
h2{
color: #3B3C3D;
font-family: 'Vollkorn SC', serif;
font-size: 1.5em;
text-align:center;
}
#bottomClauses{
clear: both;
float: right;
}
/*CONTROL-PANEL*/
#controlPanel{
float: inline-block;
margin-top: 5%;
margin-left: 20%;
margin-right: 20%;
margin-bottom: 15%;
padding-bottom: 2%;
border-radius: 10%;
border-bottom: 0.1vw solid #3B3C3D;
}
.addClause{
background-color: #2c3e50;
margin-top: 5%;
font-size: 0.75em;
padding: 0.5em;
border: 0;
color: #FFF;
}
.addClause:hover{
cursor: pointer;
background-color: #000;
}
.addDetail{
display: none;
background-color: #2c3e50;
margin-top: 5%;
font-size: 0.75em;
padding: 0.5em;
border: 0;
color: #FFF;
}
.addDetail:hover{
cursor: pointer;
background-color: #000;
}
/*FISHBONE*/
#fishBone{
position: relative;
float:right;
top: 19.75vw;
width: 100%;
height: 0.2vw;
background-color: #34495e;
}
#finalResult{
position: absolute;
/*float:right;*/
left: 83.5vw;
top: 44.25vw;
width: 7.5vw;
height: 7.5vw;
padding: 1vw;
text-align: center;
color: #FFF;
background-color: #7f8c8d;
border-radius: 50%;
border: 0.15vw solid #34495e;
}
/*NEW CLAUSE*/
.clauseDiv{
display: inline-block;
float:right;
width: 5vw;
margin-right: 12.5vw;
}
.clause{
float: inline-block;
position: relative;
top: -3.5vw;
right: 2vw;
text-align: center;
width: 5.8vw;
height: 1.5vw;
padding: 0.2vw;
color: #FFF;
background-color: #3498db;
border-radius: 0.15vw;
border: 0;
}
.strokeClause{
position: relative;
top: -5.75vw;
transform: rotate(-25deg);
background-color: #34495e;
width: 0.1vw;
height: 25vw;
margin-left: 7.5vw;
border: 0.05vw solid #34495e;
border-radius: 0.1vw;
float: inline-block;
z-index: -1;
}
/*NEW CLAUSE REVERSE*/
.clauseDivReverse{
float: inline-block;
float:right;
width: 5vw;
margin-right: 12.5vw;
}
.clauseReverse{
position: relative;
top: 15.5vw;
right: 2.5vw;
float: inline-block;
text-align: center;
width: 5.8vw;
height: 1.5vw;
padding: 0.2vw;
color: #FFF;
background-color: #3498db;
border-radius: 0.15vw;
border: 0;
}
.strokeClauseReverse{
position: relative;
top: -9.75vw;
transform: rotate(25deg);
background-color: #34495e;
width: 0.1vw;
height: 25vw;
margin-left: 7.5vw;
border: 0.05vw solid #34495e;
border-radius: 0.1vw;
float: inline-block;
z-index: -1;
}
/*NEW LEVEL ONE*/
.levelOneClauseReverse{
margin-bottom: 5vw;
}
.levelOneTextReverse{
border: 0;
position: relative;
font-size: 0.75vw;
width: 13vw;
top: 4.5vw;
right: 12.75vw;
border-bottom: 0.1vw solid #34495e;
transform: rotate(-25deg);
}
<body>
<h1>Diagram Editor</h1>
<div id='controlPanel'>
<h2>Control Panel</h2>
<input type='submit' name='addClause' value='Clause on TOP' class='addClause' id='addClauseTop'>
<input type='submit' name='addClause' value='Clause on BOTTOM' class='addClause' id='addClauseBottom'>
<input type='submit' name='addClause' value='Add Detail' class='addDetail' id='addDetail'>
</div>
<div id='fishBone'></div>
<input type='text' name='clause' id='finalResult'>
<div id='topClauses'>
<div class='clauseDiv'>
<input class='clause' id='clause'>
<div class='strokeClause'>
</div>
</div>
</div>
<div id='bottomClauses'>
<div class='clauseDivReverse' >
<input class='clauseReverse clause'>
<div class='strokeClauseReverse'>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
<div class='levelOneClauseReverse'>
<input class='levelOneTextReverse'>
</div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>

Pause a document - HTML, CSS, JavaScript

I am making a styled HTML version of the typical JS 'alert()' box.
It is simply a nice that uses 'display: none;' and 'display: block;' to toggle the box.
However, this doesn't have the functionality of a JS 'alert()' box, as doing
for(var c = 0; c < 10; c++){ //like the joke? (c++)
cool.alert('You have seen '+c+' alerts');
}
will not create 10 successive alert boxes, but make the box's display 'block' 10 times.
Is there any way to pause the document until the alert box is closed so that the loop would be paused?
Here's all the relevant code:
<button onclick="cool.alert('Hi')">Alert box</button><div id='block'></div>
<div id='box'>
<p id='text'></p><hr id='hr'>
<div id='Ok' onclick='cool.alertclear()'>Ok</div>
</div>
<script>
var cover = document.getElementById('block');
var box = document.getElementById('box');
var text = document.getElementById('text');
var ok = document.getElementById('Ok');
var hr = document.getElementById('hr');
var cool = {
alert: function(input){
cover.style.display = 'block';
box.style.display = 'block';
ok.style.display = 'block';
text.innerHTML = input;
},
alertclear: function(){
cover.style.display = 'none';
box.style.display = 'none';
ok.style.display = 'none';
}
}
</script>
<style>
#block{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.6);
display: none;
z-index: 100;
}
#box{
position: absolute;
top: 25%;
left: 35%;
height: 30%;
width: 30%;
border-radius: 10px;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.2);
display: none;
z-index: 101;
color: #000;
padding: 10px;
cursor: default;
}
#text{
height: 60%;
word-break: break-all;
overflow-x: hidden;
overflow-y: auto;
}
#Yes{
position: absolute;
bottom: 5%;
right: 25%;
height: 15%;
width: 18%;
border-radius: 5px;
background: linear-gradient(left top, #00FF00, #00DD00);
background: -webkit-linear-gradient(left top, #00FF00, #00DD00);
cursor: hand;
text-align: center;
font-size: 1.5em;
color: white;
display: none;
}
#No{
position: absolute;
bottom: 5%;
right: 5%;
height: 15%;
width: 18%;
border-radius: 5px;
background: linear-gradient(left top, #ff6c6c, #ff4e4e);
background: -webkit-linear-gradient(left top, #ff6c6c, #ff4e4e);
cursor: hand;
text-align: center;
font-size: 1.5em;
color: white;
display: none;
}
#Ok, #Go{
position: absolute;
bottom: 5%;
right: 5%;
height: 15%;
width: 18%;
border-radius: 5px;
background: grey;
cursor: hand;
text-align: center;
font-size: 1.5em;
color: white;
display: none;
}
#Prompt{
position: absolute;
top: 30%;
left: 5%;
height: 40%;
width: 90%;
resize: none;
overflow-x: hidden;
overflow-y: auto;
word-break: break-all;
display: none;
}
#hr{
position: relative;
bottom: 0%;
}
</style>

You could keep track of the alerts like this:
var inputArr = [];
var showing = false;
var cool = {
alert: function(input){
if(!showing) {
cool.show(input);
showing = true;
} else {
inputArr.push(input);
}
},
alertclear: function(){
cover.style.display = 'none';
box.style.display = 'none';
ok.style.display = 'none';
if(inputArr.length>0) {
input = inputArr.shift();
cool.show(input);
} else {
showing = false;
}
},
show: function(input) {
cover.style.display = 'block';
box.style.display = 'block';
ok.style.display = 'block';
text.innerHTML = input;
}
}

Categories