How to get console messages in iframe with javascript? - javascript

I've gone through all the other asked questions but none of them work. I'm trying to do it on the code block below. How can I get console messages from within an iframe? I can get it from outside the iframe, but I can't add console messages inside the iframe to the html. I had some trouble adding the script tag.
function coderunfunc(cls, ind) {
let html = document.querySelector(`.${cls} .html-code-run-${ind} code`).textContent;
let css = document.querySelector(`.${cls} .css-code-run-${ind} code`).textContent;
let js = document.querySelector(`.${cls} .javascript-code-run-${ind} code`).textContent;
let sc1='script >';
let sc2='/script >';
let jsa = '<'+sc1 + js + '<' + sc2
let cdo =`${html} <style>${css}</style> ${jsa}`
var iframe = document.createElement('iframe');
iframe.classList.add('iframe-css');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(cdo);
if (document.querySelector(`.${cls} iframe`)) {
document.querySelector(`.${cls} iframe`).remove();
}
document.querySelector(`.${cls}`).appendChild(iframe);
}
main.main pre {
display: block;
background-color: #f6f6f6;
color: #000;
padding: 10px;
max-height: 350px;
overflow-y: scroll;
margin: 0;
border: 1px solid #212121;
}
main.main code {
background-color: #f6f6f6;
margin: 0;
padding: 0;
color: #000;
padding: 0px 5px;
}
.main pre code {
padding: 0;
margin: 0;
word-break: break-all !important;
}
.info-r-h {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 2px solid #212121;
border-bottom: 2px solid #212121;
padding-top: 2px;
padding-bottom: 2px;
}
.info-r-h button {
padding: 10px 20px;
background-color: #212121;
color: #fff;
outline: none;
border: none;
border-right: 2px solid #fff;
border-left: 2px solid #fff;
cursor: pointer;
}
.code-run-button {
display: block;
padding: 10px 20px;
margin-top: 10px;
font-size: 20px;
background-color: #0095ff;
border: none;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.iframe-css {
display: block;
width: 100%;
border: 1px solid #212121;
background-color: #fff;
margin-top: 10px;
height: auto;
}
<main class="main">
<div class="code-run-1" id="1">
<div class="info-r-h"><span>HTML</span><button onclick="copyelement('html-code-run-1')">Kopyala</button></div>
<pre class="html-code-run-1" spellcheck="false">
<code>asdasdasdas</code>
</pre>
<div class="info-r-h"><span>CSS</span><button onclick="copyelement('css-code-run-1')">Kopyala</button></div>
<pre class="css-code-run-1" spellcheck="false">
<code> *{
color:red;
}</code></pre>
<div class="info-r-h"><span>JAVASCRIPT</span><button onclick="copyelement('javascript-code-run-1')">Kopyala</button></div>
<pre class="javascript-code-run-1" spellcheck="false">
<code> console.log('asd');</code></pre>
<button class="code-run-button" id="1" onclick="coderunfunc('code-run-1',1)">RUN</button></div>
<div class="denem"></div>
</main>

You can add following to the iframe js code. This will replace the original window.console.log with a custom log method that also sends the data to the parent frame.
const originalLog = console.log;
console.log = (...args) => {
parent.window.postMessage({ type: 'log', args: args }, '*')
originalLog(...args)
};
And in your parent you can listen to these message events:
window.addEventListener('message', e => {
const data = e.data
if (data.type === 'log') {
console.log('received from child', data.args)
}
})
So here is a working example:
function coderunfunc(cls, ind) {
let html = document.querySelector(`.${cls} .html-code-run-${ind} code`).textContent;
let css = document.querySelector(`.${cls} .css-code-run-${ind} code`).textContent;
let js = document.querySelector(`.${cls} .javascript-code-run-${ind} code`).textContent;
js = `const originalLog = console.log;
console.log = (...args) => {
parent.window.postMessage({ type: 'log', args: args }, '*')
originalLog(...args)
};` + js
let sc1='script >';
let sc2='/script >';
let jsa = '<'+sc1 + js + '<' + sc2
let cdo =`${html} <style>${css}</style> ${jsa}`
var iframe = document.createElement('iframe');
iframe.classList.add('iframe-css');
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(cdo);
if (document.querySelector(`.${cls} iframe`)) {
document.querySelector(`.${cls} iframe`).remove();
}
document.querySelector(`.${cls}`).appendChild(iframe);
}
window.addEventListener('message', e => {
const data = e.data
if (data.type === 'log') {
console.log('received from child', data.args)
}
})
main.main pre {
display: block;
background-color: #f6f6f6;
color: #000;
padding: 10px;
max-height: 350px;
overflow-y: scroll;
margin: 0;
border: 1px solid #212121;
}
main.main code {
background-color: #f6f6f6;
margin: 0;
padding: 0;
color: #000;
padding: 0px 5px;
}
.main pre code {
padding: 0;
margin: 0;
word-break: break-all !important;
}
.info-r-h {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 2px solid #212121;
border-bottom: 2px solid #212121;
padding-top: 2px;
padding-bottom: 2px;
}
.info-r-h button {
padding: 10px 20px;
background-color: #212121;
color: #fff;
outline: none;
border: none;
border-right: 2px solid #fff;
border-left: 2px solid #fff;
cursor: pointer;
}
.code-run-button {
display: block;
padding: 10px 20px;
margin-top: 10px;
font-size: 20px;
background-color: #0095ff;
border: none;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
.iframe-css {
display: block;
width: 100%;
border: 1px solid #212121;
background-color: #fff;
margin-top: 10px;
height: auto;
}
<main class="main">
<div class="code-run-1" id="1">
<div class="info-r-h"><span>HTML</span><button onclick="copyelement('html-code-run-1')">Kopyala</button></div>
<pre class="html-code-run-1" spellcheck="false">
<code>asdasdasdas</code>
</pre>
<div class="info-r-h"><span>CSS</span><button onclick="copyelement('css-code-run-1')">Kopyala</button></div>
<pre class="css-code-run-1" spellcheck="false">
<code> *{
color:red;
}</code></pre>
<div class="info-r-h"><span>JAVASCRIPT</span><button onclick="copyelement('javascript-code-run-1')">Kopyala</button></div>
<pre class="javascript-code-run-1" spellcheck="false">
<code> console.log('asd');</code></pre>
<button class="code-run-button" id="1" onclick="coderunfunc('code-run-1',1)">RUN</button></div>
<div class="denem"></div>
</main>

Related

JavaScript chatbot - deleting the whole frame rather than just the message

I have the following webpage with chatbot inside. When you click a message it deletes it (pop up option) but this also happens (deletion option) when you try to click the outside of the frame and just inside the frame (not on a message) - which I want to prevent.
repl.it:
https://replit.com/#amalsheikh2309/WhisperedRelevantOutsourcing#index.html
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Chat Room</title>
<style>
body {
background-color: #f2f2f2;
}
#chatroom {
width: 500px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
overflow: scroll;
font-family: Arial, sans-serif;
color: #333;
border: 1px solid #ccc;
box-shadow: 2px 2px 2px #ccc;
}
#messages {
height: 350px;
overflow: scroll;
background-color: #fff;
padding: 10px;
border-radius: 3px;
}
#messages div {
margin-bottom: 10px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 3px;
}
#message-input {
padding: 10px;
border-radius: 3px;
border: 1px solid #ccc;
box-sizing: border-box;
width: 100%;
margin-bottom: 10px;
}
#send-button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 16px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="chatroom">
<div id="messages"></div>
<form>
<input type="text" id="message-input" placeholder="Type your message here...">
<button type="submit" id="send-button">Send</button>
</form>
</div>
<script>
const messageInput = document.getElementById('message-input');
const messagesContainer = document.getElementById('messages');
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const message = messageInput.value;
messageInput.value = '';
const messageElement = document.createElement('div');
messageElement.innerText = message;
messagesContainer.appendChild(messageElement);
messagesContainer.scrollTop = messagesContainer.scrollHeight;
});
document.getElementById("messages").addEventListener("click", function(e) {
if (e.target && e.target.nodeName == "DIV") {
var message = confirm("Are you sure you want to delete this message?");
if (message == true) {
e.target.remove();
}
}
});
</script>
</body>
</html>
I can see that the problem lies here
document.getElementById("messages").addEventListener("click", function(e) {
if (e.target && e.target.nodeName == "DIV") {
var message = confirm("Are you sure you want to delete this message?");
if (message == true) {
e.target.remove();
}
}
});
but I am not sure how to prevent it deleting the entire DIV and what to replace that part of the code with.
Thanks in advance.
ok so i figured it out
after you append messageElement text. add classlist of message
then in your if statement
if (e.target && e.target.classList.contains("message")) {
this should only activate click event when you click on a message
<!DOCTYPE html>
<html>
<head>
<title>Chat Room</title>
<style>
body {
background-color: #f2f2f2;
}
#chatroom {
width: 500px;
height: 400px;
border: 1px solid #ccc;
padding: 10px;
overflow: scroll;
font-family: Arial, sans-serif;
color: #333;
border: 1px solid #ccc;
box-shadow: 2px 2px 2px #ccc;
}
#messages {
height: 350px;
overflow: scroll;
background-color: #fff;
padding: 10px;
border-radius: 3px;
}
#messages div {
margin-bottom: 10px;
padding: 10px;
background-color: #f9f9f9;
border-radius: 3px;
}
#message-input {
padding: 10px;
border-radius: 3px;
border: 1px solid #ccc;
box-sizing: border-box;
width: 100%;
margin-bottom: 10px;
}
#send-button {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 16px;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="chatroom">
<div id="messages"></div>
<form>
<input type="text" id="message-input" placeholder="Type your message here...">
<button type="submit" id="send-button">Send</button>
</form>
</div>
<script>
const messageInput = document.getElementById('message-input');
const messagesContainer = document.getElementById('messages');
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
const message = messageInput.value;
messageInput.value = '';
const messageElement = document.createElement('div');
messageElement.innerText = message;
messagesContainer.appendChild(messageElement);
messageElement.classList.add("message");
messagesContainer.scrollTop = messagesContainer.scrollHeight;
});
document.getElementById("messages").addEventListener("click", function(e) {
if (e.target && e.target.classList.contains("message")) {
var message = confirm("Are you sure you want to delete this message?");
if (message == true) {
e.target.remove();
}
}
});
</script>
</body>
</html>
You have added event listener to #messages div that's why it removes all children from the #messages div. Instead of #messages div you should add click event listener to single message.

Reverse() is not working and so does unshift() in vanilla javascript

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();

Why won't these for loops work? To-Do list app [duplicate]

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>

Why the following button does not work?

This question is completely different due to the fact that this Time I am integrating the code from a jsfiddle with the answer of another question but I am asking about an error that I am getting in the process,
I am writing an small script to produce some tables, the main idea is to copy text into my first text area called:
<textarea cols="70" rows="15" id="text" ></textarea>
to the press the button called: Generate tables:
<button id="generate">Generate tables</button><br>
That calles the function called: generate
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function() {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g,
'"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
to produce the tables in the second text area called: out1
<div cols="3" rows="15" id="out1" ></div>
I don't know why when I copy text to the fist area an press the button nothing happens, I would like to appreciate any suggestion to fix the code, thanks in advance, I really appreciate the support,
<!DOCTYPE html>
<html>
<head>
<script>
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function() {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g,
'"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
</script>
</head>
<style>
table{background:#CCC;border:1px solid #000;}
table td{padding:15px;border:1px solid #DDD;}
textarea {
color:GreenYellow ;
background-color: black;
margin-top: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
}
body {background-color:#000C17;}
#out1 {
background-color: gray;
margin-top: 150px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
float:center;
width:700px;
overflow-y: auto;
height: 200px;
padding: 50px;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 15px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 25px;
padding: 25px;
width: 20%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
</style>
<body>
<textarea cols="70" rows="15" id="text" ></textarea>
<div cols="3" rows="15" id="out1" ></div>
<div class="wrapper">
<button id="generate">Generate tables</button><br>
</body>
</html>
Your javascript is fine.. The problem is your code is executed before the DOM loaded properly. Since your DOM is not loaded when the script executed, so your JS thrown error.
Look at my snippet, I've correcting your script.
<!DOCTYPE html>
<html>
<head>
<style>
table {
background: #CCC;
border: 1px solid #000;
}
table td {
padding: 15px;
border: 1px solid #DDD;
}
textarea {
color: GreenYellow;
background-color: black;
margin-top: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
}
body {
background-color: #000C17;
}
#out1 {
background-color: gray;
margin-top: 150px;
display: block;
margin-left: auto;
margin-right: auto;
border: 25px solid navy;
box-shadow: 0 8px 16px white;
float: center;
width: 700px;
overflow-y: auto;
height: 200px;
padding: 50px;
}
.wrapper {
text-align: center;
}
.button {
display: inline-block;
box-shadow: 0 8px 16px white;
border-radius: 15px;
background-color: red;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 25px;
padding: 25px;
width: 20%;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
</style>
</head>
<body>
<textarea cols="70" rows="15" id="text"></textarea>
<div cols="3" rows="15" id="out1"></div>
<div class="wrapper">
<button id="generate">Generate tables</button><br>
<script>
var generate = document.getElementById('generate');
var input = document.getElementById('text');
var output = document.getElementById('out1');
generate.onclick = function () {
var text = input.value;
text = text.replace(/(\S+)\s+(.*)/g
, '"RBD|facebook|W|google|C|$1~W~$2" "dasd.wbs"\n' +
'"RBD|facebook|I|google|C|$1~E~$2" "dasd.wbs"\n' +
'"RBD|facebook|O|google|C|$1~R~$2" "dasd.wbs"');
output.textContent = text;
};
</script>
</body>
</html>

Custom Javascript Prompt Dialog Box (how to retrieve value and store it as var)

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;
}

Categories