I need your help.
Normally one can use the:
var x = prompt("Please enter your name:","John Smith")
alert(x)
I'd similarly like to mimic the code above with my existing custom dialog/prompt box, but I cannot seem to get it to work and retrieve the value of x:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function testit() {
var x = alertBox('Enter your firstname','prompt','John Smith')
alert(x)
}
function alertBox(text, type, ptext) {
var button = '<div id="alertBox_button_div" ><input id="alertBox_button" class="button" style="margin: 7px;" type="button" value="Close" onclick="alertBox_hide()"></div>'
var field = '<div><input id="ptext" class="field" type="text"></div>'
if (type == "err") {
document.getElementById('alertBox_text').innerHTML = text + button
document.getElementById('alertBox_text').style.color = "#FF0000"
document.getElementById('alertBox_text').style.top = "50%"
}
else if (type == "ok") {
document.getElementById('alertBox_text').innerHTML = text + button
document.getElementById('alertBox_text').style.top = "50%"
}
else if (type == "prompt") {
document.getElementById('alertBox_text').innerHTML = text + field + button
document.getElementById('alertBox_text').style.top = "25%"
document.getElementById('alertBox_button').value = "OK"
if (ptext) { document.getElementById('ptext').value = ptext }
}
else {
document.getElementById('alertBox_text').innerHTML = text
}
document.getElementById('alertBox_container').style.visibility = 'visible'
}//end function
function alertBox_hide() {
document.getElementById('alertBox_container').style.visibility = 'hidden'
}
</script>
<style type="text/css">
.field {
border: 1px solid #808080;
width: 475px;
font-family: Arial;
font-size: 9pt;
padding-left: 3px;
font-weight: bold;
margin: 1px;
}
#alertBox {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: Arial;
font-size: 9pt;
visibility: hidden;
}
#alertBox_container {
border: 1px solid #808080;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
color: rgb(11,63,113);
}
#alertBox_titlebar {
cursor: pointer;
height: 22px;
width: 100%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
line-height:22px;
font-weight: bold;
}
#alertBox_close {
line-height: 10px;
width: 17px;
margin-top: 2px;
margin-right: 2px;
padding: 1px;
position:absolute;
top:0;
right:0;
font-size: 10px;
font-family: tahoma;
font-weight: bold;
color: #464646;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color:#ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
}
#alertBox_close:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
#alertBox_text {
position: absolute;
width: 100%;
height: auto;
top: 50%;
text-align: center;
}
.button {
color: #464646;
font-family: Arial;
font-size: 9pt;
height: 23px;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color: #ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
width: 67px;
}
}
.button:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
</style>
</head>
<body>
<input type="button" value="testme" onclick="testit()">
<br>
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text"></div>
</div>
</div>
</body>
</html>
Since the value of x is not known until a future event, you need an async callback. So instead of this:
var x = alertBox('Enter your firstname','prompt','John Smith');
alert(x);
You need something like this instead:
alertBox('Enter your firstname','prompt','John Smith', function(x) {
alert(x);
// call other code here, pass "x" as parameter
});
The alertBox function should have one extra parameter callback, which you invoke when the value is ready, for example:
function alertBox(text, type, ptext, callback) {
// ...
document.getElementById('alertBox_button').addEventListener("click", function() {
callback(document.getElementById('ptext').value);
});
}
Here is a Fiddle demo.
Related
The issue is only there when I'm trying to reverse the user input, reverse() is returning the string as it is and so does the unshift().
what I'm looking for is if the user enters input - 1234 the output should be 4,3,2,1, but I'm getting is output - 1,2,3,4.
const pahere = [];
const revephare = [];
let donereve = [];
let dff = document.getElementById("Udt1");
function tex(){
if(dff. value == "") {
console.log("enter text")
}
else {
pahere.push(dff.value);
console.log(dff.value);
console.log(pahere);
console.log(pahere.length);
for(let i = 0; i < pahere.length; i++){
revephare.push(pahere[i].split(""));
pahere.pop();
}
}
console.log("I should be splited",revephare);
donereve = revephare.reverse();
console.log("I should be reversed",donereve);
}
* {
box-sizing: border-box;
}
body{
background: #333;
margin: 0;
}
h1{
margin: 15px;
color: white;
}
.holder{
margin-left: 12px;
width: 34em;
height: 37em;
border: 2px solid rgba(255, 51, 153,1);
display: flex;
}
#Udt1 {
width: 56%;
height: 2em!important;
text-align: center;
}
span {
color: white;
margin-top: 5px;
}
.anshold {
width: 154px;
height: 34px;
margin-left: 43em;
position: relative;
top: -592px !important;
border: 2px solid rgba(255, 51, 153,1);
text-align: center;
}
#udans{
color: white;
text-align: center;
margin: 0;
padding: 4px;
}
.btn {
width: 16%;
height: 2em!important;
text-align: center;
margin-left: 14px;
}
<body>
<h1>Palidrom Checker</h1>
<div class="holder">
<span>Word goes here-</span>
<input type="text" name="textin" label ="textin" id="Udt1" placeholder="Eg-Racecar">
<button class="btn" onclick="tex()"> Check</button>
</div>
<div class="anshold"><p id="udans"> </p>
</div>
</body>
Your trying to spliting Array pahere[i].split("")
const pahere = [];
const revephare = [];
let donereve = [];
let dff = document.getElementById("Udt1");
function tex(){
if(dff. value == "") {
console.log("enter text")
}
else {
pahere.push(dff.value);
console.log(dff.value);
console.log(pahere);
console.log(pahere.length);
for(let i = 0; i <dff.value.length; i++){
revephare.push(dff.value[i]);
pahere.pop();
}
}
console.log("I should be splited",revephare);
donereve = revephare.reverse();
console.log("I should be reversed",donereve);
}
* {
box-sizing: border-box;
}
body{
background: #333;
margin: 0;
}
h1{
margin: 15px;
color: white;
}
.holder{
margin-left: 12px;
width: 34em;
height: 37em;
border: 2px solid rgba(255, 51, 153,1);
display: flex;
}
#Udt1 {
width: 56%;
height: 2em!important;
text-align: center;
}
span {
color: white;
margin-top: 5px;
}
.anshold {
width: 154px;
height: 34px;
margin-left: 43em;
position: relative;
top: -592px !important;
border: 2px solid rgba(255, 51, 153,1);
text-align: center;
}
#udans{
color: white;
text-align: center;
margin: 0;
padding: 4px;
}
.btn {
width: 16%;
height: 2em!important;
text-align: center;
margin-left: 14px;
}
<body>
<h1>Palidrom Checker</h1>
<div class="holder">
<span>Word goes here-</span>
<input type="text" name="textin" label ="textin" id="Udt1" placeholder="Eg-Racecar">
<button class="btn" onclick="tex()"> Check</button>
</div>
<div class="anshold"><p id="udans"> </p>
</div>
</body>
This is because you're using Array.prototype.push incorrectly which gives you an array of arrays as a result
revephare.push(pahere[i].split("")); // this line is incorrect
Replace it by the following to make it work
// use spread operator to pass each element as a separate argument
revephare.push(...pahere[i].split(""));
Hi i know you fixed the issue, you can achieve your output by this single line code, just try if you can
let reversed=(pahere.toString()).split("").map(Number).reverse();
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
Event binding on dynamically created elements?
(23 answers)
Closed last year.
I can't figure out why the for loops won't iterate. I had them working at one point inside of the printInput function, but not outside. BTW, I'm still working on the code portion of the for both loops. One is supposed to close the object by removing it. The other is supposed to make the html element editable.
// close button
var closes = document.getElementsByClassName("closes");
for (var i = 0; i < closes.length; i++){
closes[i].onclick = function (){
var l = closes[i];
l.remove();
}
}
// edit button
var edit = document.getElementsByClassName("edit");
for(var i = 0; i < edit.length; i++){
edit[i].onclick = function (){
var x = this.parentElement;
x.contentEditable = true;
}
}
// Submits input by hitting enter
document.addEventListener("keyup", function(e) {
if (e.keyCode === 13) {
printInput();
}
});
// Toggles checked class for finished chores
let selection = document.querySelector('ul');
selection.addEventListener("click", function(event) {
if (event.target.tagName === 'LI') {
event.target.classList.toggle('checked');
}
}, false);
// This creates a new list object.
function printInput() {
let input = document.getElementById('todotext').value;
if (input === "" || null){
alert("You haven't written anything!");
} else {
const newItem = document.createElement('li');
const newNode = document.createTextNode(input);
newItem.className = "closes";
newItem.appendChild(newNode);
document.getElementById("list").appendChild(newItem);
const img = document.createElement("img");
img.src = 'edit.png';
img.className = "edit";
const newSpan = document.createElement("span");
const xBtn = document.createTextNode("x");
newSpan.className = "close";
newSpan.appendChild(xBtn);
newItem.appendChild(img);
newItem.appendChild(newSpan);
document.getElementById("todotext").value = "";
}
}
body {
min-width: 850px;
font-family: sans-serif;
background-color: #ece0d9;
}
h1.title {
width: auto;
margin: auto;
padding: 25px;
text-align: center;
-webkit-text-stroke: 1px #460a1e; /* width and color */
font-family: sans-serif; color: white;
}
div.form {
display: flex;
padding: 10px;
width: 50%;
margin: auto;
}
input {
width: 75%;
padding: 10px 14px 11px 14px;
margin: 0;
border-radius: 0;
border-width: thin;
font-size: inherit;
}
input:focus {
border-radius: 0;
outline: none;
}
span.addTo {
width: 25%;
padding: 8px 14px 10px 14px;
margin: 0;
border-style: solid;
border-width: thin;
border-color: black;
border-left: none;
text-align: center;
background-color: rgb(236, 235, 235);
}
span.addTo:hover {
background-color: #e0e0e0;
cursor: pointer;
}
ul.list{
width: 50%;
display: table;
text-align: left;
padding: 0;
margin: auto;
}
ul.list li{
padding: 10px 10px;
background-color: snow;
clear: right;
margin: 0;
position: relative;
cursor: pointer;
}
ul.list li:nth-child(2n){
background-color: rgb(240, 239, 239);
}
ul.list li.checked:nth-child(2n){
text-decoration: line-through;
background-color: rgb(170, 168, 168);
}
ul li.checked {
text-decoration: line-through;
background-color: rgb(170, 168, 168);
}
img.edit {
position: absolute;
right: 40px;
top: 0;
padding: 1px;
width: 34px;
height: 36.4px;
cursor: pointer;
background-color: transparent;
color: rgb(75, 71, 71);
}
img.edit:hover {
padding: 0;
width: 34px;
height: 36.4px;
transition-property: background-color;
transition-duration: .3s;
border-style: ridge;
border-color: black;
border-width: 1px;
}
span.close {
position: absolute;
right: 0;
top: 0;
padding: 10px 14px 10px 14px;
cursor: pointer;
background-color: transparent;
color: rgb(75, 71, 71);
}
span.close:hover {
color: black;
padding: 9px 13px 9px 13px;
transition-property: background-color;
transition-duration: .3s;
border-style: ridge;
border-color: black;
border-width: 1px;
}
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<meta charset="en">
<link rel="stylesheet" href="main.css">
</head>
<body>
<h1 class="title">To-Do List</h1>
<div class="form">
<input type="text" id="todotext">
<span onclick="printInput()" id="addTo" class="addTo">Add</span>
</div>
<ul style="list-style-type:none;" class="list" id="list">
<li hidden id="close">Clean room<img src="edit.png" class="edit"><span class="close">x</span></li>
</ul>
<script src="main.js">
</script>
</body>
</html>
My code makes this shape keep changing from green Hi to blue Hello with a button I want to make it change automatically
<html>
<head>
<script>
function functionl() {
Array.from(document.getElementsByClassName('L1')).forEach(e => helper(e));
Array.from(document.getElementsByClassName('L2')).forEach(e => helper(e));
}
helper = (e) => {
if (e.innerText == 'Hi') {
e.style.backgroundColor = 'blue';
e.innerText = 'Hello';
} else {
e.style.backgroundColor = 'green';
e.innerText = 'Hi';
}
}
</script>
<style>
.L1
{
padding: 0px;
border: 1px;
border-radius: 200% 0px 200% 0px;
border-color: green;
background-color: green;
font-size: 50px;
color: white;
width: 50%;
height: 47%;
}
.L2
{
padding: 0px;
border: 1px;
border-radius: 0px 200% 0px 200%;
border-color: green;
background-color: green;
font-size: 50px;
color: white;
width: 50%;
height: 47%;
}
.button1
{
height=5%;
font-size: 35;
background-color: Red;
color: blue;
border-radius: 30px 30px 30px 30px;
}
</style>
</head>
<body>
<button class="L2">Hi</button><button class="L1">Hi</button><br>
<button class="L1">Hi</button><button class="L2">Hi</button>
<center><button class="button1" onclick="functionl()">Click me</button></center>
</body>
</html>
It works with a button I want it to work as a gif to keep looping between green Hi and the blue Hello automatically (and please consider adding how could I stop this looping or start it with a button)
Use window.setInterval like below. You can change the number (500) to change the time. The time is in milliseconds.
function functionl() {
Array.from(document.getElementsByClassName('L1')).forEach(e => helper(e));
Array.from(document.getElementsByClassName('L2')).forEach(e => helper(e));
}
helper = (e) => {
if (e.innerText == 'Hi') {
e.style.backgroundColor = 'blue';
e.innerText = 'Hello';
} else {
e.style.backgroundColor = 'green';
e.innerText = 'Hi';
}
}
window.setInterval(functionl, 500);
.L1 {
padding: 0px;
border: 1px;
border-radius: 200% 0px 200% 0px;
border-color: green;
background-color: green;
font-size: 50px;
color: white;
width: 50%;
height: 47%;
}
.L2 {
padding: 0px;
border: 1px;
border-radius: 0px 200% 0px 200%;
border-color: green;
background-color: green;
font-size: 50px;
color: white;
width: 50%;
height: 47%;
}
.button1 {
height=5%;
font-size: 35;
background-color: Red;
color: blue;
border-radius: 30px 30px 30px 30px;
}
<html>
<head>
</head>
<body>
<button class="L2">Hi</button><button class="L1">Hi</button><br>
<button class="L1">Hi</button><button class="L2">Hi</button>
<center><button class="button1" onclick="functionl()">Click me</button></center>
</body>
</html>
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>
I frantically need your help,
The variable "x" can normally be set using the following method (default)
var x = prompt("Please enter your name:","John Smith")
I'd very much similarly like to mimic the same idea and writting it such that it will work with my existing dynamic/custom dialog/prompt box. To this end, I am very not much familiar with asynchronous javascript and have little experience in that impossible department.
Expected result:
var x = alertBox('Enter your firstname','prompt','John Smith')
Here is the HTML/CSS and Javascript Markup:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function testit() {
var x = alertBox('Enter your firstname','prompt','John Smith')
alert(x)
}
function alertBox(text, type, ptext) {
var button = '<div id="alertBox_button_div" ><input id="alertBox_button" class="button" style="margin: 7px;" type="button" value="Close" onclick="alertBox_hide()"></div>'
var field = '<div><input id="ptext" class="field" type="text"></div>'
if (type == "err") {
document.getElementById('alertBox_text').innerHTML = text + button
document.getElementById('alertBox_text').style.color = "#FF0000"
document.getElementById('alertBox_text').style.top = "50%"
}
else if (type == "ok") {
document.getElementById('alertBox_text').innerHTML = text + button
document.getElementById('alertBox_text').style.top = "50%"
}
else if (type == "prompt") {
document.getElementById('alertBox_text').innerHTML = text + field + button
document.getElementById('alertBox_text').style.top = "25%"
document.getElementById('alertBox_button').value = "OK"
if (ptext) { document.getElementById('ptext').value = ptext }
}
else {
document.getElementById('alertBox_text').innerHTML = text
}
document.getElementById('alertBox_container').style.visibility = 'visible'
}//end function
function alertBox_hide() {
document.getElementById('alertBox_container').style.visibility = 'hidden'
}
</script>
<style type="text/css">
.field {
border: 1px solid #808080;
width: 475px;
font-family: Arial;
font-size: 9pt;
padding-left: 3px;
font-weight: bold;
margin: 1px;
}
#alertBox {
height: 100px;
width: 500px;
bottom: 50%;
right: 50%;
position: absolute;
font-family: Arial;
font-size: 9pt;
visibility: hidden;
}
#alertBox_container {
border: 1px solid #808080;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128,128,128);
height: 100%;
position: relative;
color: rgb(11,63,113);
}
#alertBox_titlebar {
cursor: pointer;
height: 22px;
width: 100%;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#cdcdcd");
line-height:22px;
font-weight: bold;
}
#alertBox_close {
line-height: 10px;
width: 17px;
margin-top: 2px;
margin-right: 2px;
padding: 1px;
position:absolute;
top:0;
right:0;
font-size: 10px;
font-family: tahoma;
font-weight: bold;
color: #464646;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color:#ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
}
#alertBox_close:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
#alertBox_text {
position: absolute;
width: 100%;
height: auto;
top: 50%;
text-align: center;
}
.button {
color: #464646;
font-family: Arial;
font-size: 9pt;
height: 23px;
border: 1px solid;
border-color: #999 #666 #666 #999;
background-color: #ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#E7E7E7');
width: 67px;
}
}
.button:hover {
background-color: #ddd;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd');
color: #000000;
}
</style>
</head>
<body>
<input type="button" value="testme" onclick="testit()">
<br>
<div id="alertBox">
<div id="alertBox_container">
<div id="alertBox_titlebar"><span style="padding-left: 3px;">IMTS</span></div>
<div><input id="alertBox_close" type="button" value="X" onclick="alertBox_hide()"></div>
<div id="alertBox_text"></div>
</div>
</div>
</body>
</html>
add a return value to your alertBox() function.
function alertBox(arg1,arg2,arg3)
{
// do your stuff here
var ishallreturn = document.getElementById("ptext").value;
return ishallreturn;
}