We Keep Coding

How to let JS code allow both input and textarea

I have some JS code that will turn my code bold, italicized, or underlined with user input, so if the user checks bold the text will be bolded.
Here is the code:
$('input[name="textStyle"]').change(function(){
if ($(this).val() == 'bold'){
if ($(this).is(':checked')) $('input[name="styledText"]').css('font-weight', 'bold');
else $('input[name="styledText"]').css('font-weight', 'normal');
}
else if ($(this).val() == 'italic'){
if ($(this).is(':checked')) $('input[name="styledText"]').css('font-style', 'italic');
else $('input[name="styledText"]').css('font-style', 'normal');
}
else if ($(this).val() == 'underline'){
if ($(this).is(':checked')) $('input[name="styledText"]').css('text-decoration', 'underline');
else $('input[name="styledText"]').css('text-decoration', 'none');
}
});
body {
background-color: #5f5959;
color: #000000;
}
textarea[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
textarea[type=submit] {
width: 100%;
background-color: #f9f9f9;
color: 000000;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
textarea[type=submit]:hover {
background-color: #908989;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
<form style="font-family: 'Poppins', sans-serif; color: #f9f9f9;">
Bold:<input name="textStyle" type="checkbox" value="bold"/>
<br>
Italic:<input name="textStyle" type="checkbox" value="italic"/>
<br>
Underline:<input name="textStyle" type="checkbox" value="underline"/>
</form>
<div style="margin-left: 240px; width: 1000px; height: 665px;">
<p><center style="font-family: 'Poppins', sans-serif; font-size: 13px;">When submit, your text will clear and your blog will be published!</center></p>
<textarea type="text" placeholder="Title" style="font-family: 'Poppins', sans-serif;"></textarea>
<form style="font-family: 'Poppins', sans-serif;">
<textarea name="styledText" type="text" style="font-family: 'Poppins', sans-serif; border-width: 2px; border-style: solid; outline: none; border: none; height: 445px;"></textarea>
<input style="height: 50px; width: 1000px; font-family: 'Poppins', sans-serif; border-radius: 7px;" value="Submit" type="submit">
</form>
</div>
It is giving me an error, and it is not bolding/italicized/underlined. I think this is because the JS code is checking for input, but the tag is textarea. Is there any way I can let it accept both? I want the large area that is blank to be bolded/italicized/underlined with user input. Thanks!

First instead of $('input[name="styledText"]') you should do $('textarea[name="styledText"]'). Secondly jquery .css also accepts an object, so create an object cssProps and add default properties. Then on toggling of the check box change the value of these keys. Once it is done then at the end use .css and pass the cssProps properties
let cssProps = {
'font-weight': '',
'font-style': '',
'text-decoration': ''
}
$('input[name="textStyle"]').change(function() {
const val = $(this).val()
if ($(this).is(':checked')) {
switch (val) {
case 'bold':
cssProps['font-weight'] = 'bold';
break;
case 'italic':
cssProps['font-style'] = 'italic';
break;
case 'underline':
cssProps['text-decoration'] = 'underline';
break;
}
} else {
switch (val) {
case 'bold':
cssProps['font-weight'] = '';
break;
case 'italic':
cssProps['font-style'] = '';
break;
case 'underline':
cssProps['text-decoration'] = '';
break;
}
}
$('textarea[name="styledText"]').css(cssProps)
});
body {
background-color: #5f5959;
color: #000000;
}
textarea[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
textarea[type=submit] {
width: 100%;
background-color: #f9f9f9;
color: 000000;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
textarea[type=submit]:hover {
background-color: #908989;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="font-family: 'Poppins', sans-serif; color: #f9f9f9;">
Bold:<input name="textStyle" type="checkbox" value="bold" />
<br> Italic:
<input name="textStyle" type="checkbox" value="italic" />
<br> Underline:
<input name="textStyle" type="checkbox" value="underline" />
</form>
<div style="margin-left: 240px; width: 1000px; height: 665px;">
<p>
<center style="font-family: 'Poppins', sans-serif; font-size: 13px;">When submit, your text will clear and your blog will be published!</center>
</p>
<textarea type="text" placeholder="Title" style="font-family: 'Poppins', sans-serif;"></textarea>
<form style="font-family: 'Poppins', sans-serif;">
<textarea name="styledText" type="text" style="font-family: 'Poppins', sans-serif; border-width: 2px; border-style: solid; outline: none; border: none; height: 445px;"></textarea>
<input style="height: 50px; width: 1000px; font-family: 'Poppins', sans-serif; border-radius: 7px;" value="Submit" type="submit">
</form>
</div>

$('[name="styledText"]') will access all tags with name="styledText"

Can you please check the below code? Hope it will work for you. We have used textarea element instead of input in javascript code becuase you used textarea as a field.
Please refer to this link: https://jsfiddle.net/yudizsolutions/o1msuL83/

Please refer below link. I have made one change in your HTML <textarea type="text" name="styledText" placeholder="Title" style="font-family: 'Poppins', sans-serif;"></textarea>. Also I have target name attribute like $('[name="styledText"]').
https://codepen.io/Umesh8965/pen/jOymyLo

Removing all todos bring them back when I add

I was building a todo app , everything is work very well until i decided to add a button to remove all todos(ul) in one click. When I click on the button of remove all todos is removed but when I click on add button they all come back at once.
const input = document.getElementById('input');
const addBtn = document.getElementById('btn');
const removeBtn = document.getElementById('removeBtn')
const todoList = document.getElementById('todoList');
var ulElement = document.createElement('ul');
let placeholderValue = '';
// This code is for clear placeholder value
input.addEventListener('focus' , () => {
placeholderValue = input.placeholder;
input.placeholder = '';
});
input.addEventListener('blur' , ()=> {
input.placeholder = placeholderValue;
});
// this function is for add to do to a list
function addTodo(){
let liElements = document.createElement('li');
todoList.appendChild(ulElement);
ulElement.appendChild(liElements);
liElements.classList.add('liElement')
liElements.innerHTML = input.value;
// this code is for remove todo from the list
liElements.addEventListener('contextmenu' , (e)=> {
e.preventDefault();
liElements.classList.add('done');
});
liElements.addEventListener('dblclick' , (e) => {
e.preventDefault()
liElements.remove()
});
};
addBtn.addEventListener('click' , addTodo)
removeBtn.addEventListener('click' , () => {
ulElement.remove()
});
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#1,600&display=swap');
*{
margin: 0;
box-sizing: border-box;
font-family: 'Playfair Display', serif;
}
body{
background-color: #DC86A9;
}
.mainInput {
display: flex;
justify-content: center;
margin-top: 15%;
}
.mainInput input + button {
margin-left: 10px;
}
.mainInput input {
width: 500px;
height: 50px;
border: none;
border-radius: 50px;
box-shadow: 4px 4px 60px white;
padding: 25px;
}
.mainInput input::placeholder{
font-size: 22px;
text-align: center;
}
.mainInput button {
border-radius: 10px ;
background-color: rgb(102, 102, 255);
margin-left: 10px;
border: none;
border-radius: 550px;
color: white;
font-weight: 900;
font-size: 32px;
width: 80px;
cursor: pointer;
box-shadow: 4px 4px 30px white;
}
.btn1 {
font-size: 14px !important;
background-color: rgb(252, 53, 53) !important;
padding-left: 5px;
}
span {
display: flex;
justify-content: center;
margin-top: 50px;
font-size: 30px;
color: white;
}
.todoList {
display:flex;
justify-content:center;
margin-top : 2%;
}
.todoList ul {
list-style-type: none;
margin-right: 30px;
color: white;
font-size: 26px;
font-weight: 500
}
.todoList ul li {
cursor: pointer;
}
.done {
color: rgb(190, 190, 190);
text-decoration: line-through
}
.note {
display: flex;
justify-content: center;
margin-top: 10px;
font-size: 14px;
color: white;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>TodoApp</title>
</head>
<body>
<div class="mainInput">
<input type="text" class="input" id="input" placeholder="Enter your todo : ">
<button class="btn" id="btn">+</button><button class="btn btn1" id="removeBtn">RemoveAll</button>
</div>
<span> Todo list : </span>
<div class="todoList" id="todoList"></div>
<span class="note">Right click to make todo done</span>
<span class="note">dbl click to remove todo</span>
<script src="js/main.js"></script>
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
</body>
</html>

Change your remove logic to this to empty everything inside your <ul>
removeBtn.addEventListener('click' , () => {
ulElement.innerHTML = "";
});

You can use remove the child to remove all child elements.
const input = document.getElementById('input');
const addBtn = document.getElementById('btn');
const removeBtn = document.getElementById('removeBtn')
const todoList = document.getElementById('todoList');
var ulElement = document.createElement('ul');
let placeholderValue = '';
// This code is for clear placeholder value
input.addEventListener('focus' , () => {
placeholderValue = input.placeholder;
input.placeholder = '';
});
input.addEventListener('blur' , ()=> {
input.placeholder = placeholderValue;
});
// this function is for add to do to a list
function addTodo(){
let liElements = document.createElement('li');
todoList.appendChild(ulElement);
ulElement.appendChild(liElements);
liElements.classList.add('liElement')
liElements.innerHTML = input.value;
// this code is for remove todo from the list
liElements.addEventListener('contextmenu' , (e)=> {
e.preventDefault();
liElements.classList.add('done');
});
liElements.addEventListener('dblclick' , (e) => {
e.preventDefault()
liElements.remove()
});
};
addBtn.addEventListener('click' , addTodo)
removeBtn.addEventListener('click' , () => {
while (ulElement.firstChild) ulElement.removeChild(ulElement.firstChild);
ulElement.remove()
});
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#1,600&display=swap');
*{
margin: 0;
box-sizing: border-box;
font-family: 'Playfair Display', serif;
}
body{
background-color: #DC86A9;
}
.mainInput {
display: flex;
justify-content: center;
margin-top: 15%;
}
.mainInput input + button {
margin-left: 10px;
}
.mainInput input {
width: 500px;
height: 50px;
border: none;
border-radius: 50px;
box-shadow: 4px 4px 60px white;
padding: 25px;
}
.mainInput input::placeholder{
font-size: 22px;
text-align: center;
}
.mainInput button {
border-radius: 10px ;
background-color: rgb(102, 102, 255);
margin-left: 10px;
border: none;
border-radius: 550px;
color: white;
font-weight: 900;
font-size: 32px;
width: 80px;
cursor: pointer;
box-shadow: 4px 4px 30px white;
}
.btn1 {
font-size: 14px !important;
background-color: rgb(252, 53, 53) !important;
padding-left: 5px;
}
span {
display: flex;
justify-content: center;
margin-top: 50px;
font-size: 30px;
color: white;
}
.todoList {
display:flex;
justify-content:center;
margin-top : 2%;
}
.todoList ul {
list-style-type: none;
margin-right: 30px;
color: white;
font-size: 26px;
font-weight: 500
}
.todoList ul li {
cursor: pointer;
}
.done {
color: rgb(190, 190, 190);
text-decoration: line-through
}
.note {
display: flex;
justify-content: center;
margin-top: 10px;
font-size: 14px;
color: white;
}
<div class="mainInput">
<input type="text" class="input" id="input" placeholder="Enter your todo : ">
<button class="btn" id="btn">+</button><button class="btn btn1" id="removeBtn">RemoveAll</button>
</div>
<span> Todo list : </span>
<div class="todoList" id="todoList"></div>
<span class="note">Right click to make todo done</span>
<span class="note">dbl click to remove todo</span>
<script src="https://kit.fontawesome.com/a81368914c.js"></script>

You needed to simplify.
Here there is a static UL and the button empties it
const input = document.getElementById('input');
const addBtn = document.getElementById('btn');
const removeBtn = document.getElementById('removeBtn')
const todoList = document.getElementById('todoList');
let placeholderValue = '';
// This code is for clear placeholder value
input.addEventListener('focus', () => {
placeholderValue = input.placeholder;
input.placeholder = '';
});
input.addEventListener('blur', () => {
input.placeholder = placeholderValue;
});
// this function is for add to do to a list
function addTodo() {
let liElement = document.createElement('li');
liElement.classList.add('liElement')
liElement.innerHTML = input.value;
todoList.appendChild(liElement);
// this code is for remove todo from the list
liElement.addEventListener('contextmenu', (e) => {
e.preventDefault();
liElement.classList.add('done');
});
liElement.addEventListener('dblclick', (e) => {
e.preventDefault()
liElement.remove()
});
};
addBtn.addEventListener('click', addTodo)
removeBtn.addEventListener('click', () => {
document.getElementById("todoList").innerHTML = "";
});
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#1,600&display=swap');
* {
margin: 0;
box-sizing: border-box;
font-family: 'Playfair Display', serif;
}
body {
background-color: #DC86A9;
}
.mainInput {
display: flex;
justify-content: center;
margin-top: 15%;
}
.mainInput input+button {
margin-left: 10px;
}
.mainInput input {
width: 500px;
height: 50px;
border: none;
border-radius: 50px;
box-shadow: 4px 4px 60px white;
padding: 25px;
}
.mainInput input::placeholder {
font-size: 22px;
text-align: center;
}
.mainInput button {
border-radius: 10px;
background-color: rgb(102, 102, 255);
margin-left: 10px;
border: none;
border-radius: 550px;
color: white;
font-weight: 900;
font-size: 32px;
width: 80px;
cursor: pointer;
box-shadow: 4px 4px 30px white;
}
.btn1 {
font-size: 14px !important;
background-color: rgb(252, 53, 53) !important;
padding-left: 5px;
}
span {
display: flex;
justify-content: center;
margin-top: 50px;
font-size: 30px;
color: white;
}
.todoList {
display: flex;
justify-content: center;
margin-top: 2%;
}
.todoList ul {
list-style-type: none;
margin-right: 30px;
color: white;
font-size: 26px;
font-weight: 500
}
.todoList ul li {
cursor: pointer;
}
.done {
color: rgb(190, 190, 190);
text-decoration: line-through
}
.note {
display: flex;
justify-content: center;
margin-top: 10px;
font-size: 14px;
color: white;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>TodoApp</title>
</head>
<body>
<div class="mainInput">
<input type="text" class="input" id="input" placeholder="Enter your todo : ">
<button class="btn" id="btn">+</button><button class="btn btn1" id="removeBtn">RemoveAll</button>
</div>
<span> Todo list : </span>
<div class="todoList">
<ul id="todoList"></ul>
</div>
<span class="note">Right click to make todo done</span>
<span class="note">dbl click to remove todo</span>
<script src="js/main.js"></script>
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
</body>
</html>

Text bar hover not working after it is clicked one time

I've just started doing some web dev on my own and trying to experiment with the basic HTML,CSS and JS. I'm trying to make search bar with changes color on hovering but after one click it does not changes its color. I have uploaded my code on CodePen. Need some guidance, thank you!
https://codepen.io/Usmaneeyy/pen/PoPwqgm
This is my HTML code for the SearchBar i want to create:
<body>
<div class="topBar">
<div id="logo">
<img src="images/logo.png" style="height: 40px;">
</div>
<div id="searchBar">
<input id="textBar" placeholder="Search.." onclick="expand();" type="text" name="searchedItem" onblur="reset();">
</div>
</div>
This is the CSS Code:
body {
margin: 0;
padding: 0;
background-color: white;
font-family: "Poppins", sans-serif;
}
body::-webkit-scrollbar {
width: 0.25rem;
}
body::-webkit-scrollbar-track {
background: white;
}
body::-webkit-scrollbar-thumb {
background: rgb(100, 100, 100);
}
.topBar {
background-color: black;
height: 41px;
width: auto;
text-align: center;
}
#logo {
float: left;
padding-left: 5px;
}
#searchBar input {
padding: 6px;
margin-top: 2px;
margin-right: 140px;
background-color: black;
font-size: 18px;
color: black;
/*border: none;*/
cursor: pointer;
border-radius: 10px;
border: 2px solid white;
width: 150px;
transition: width 0.5s;
}
#searchBar input:hover {
background-color: white;
}
And this is my JS code:
function expand() {
var x = document.getElementById("textBar");
x.style.backgroundColor = "white";
x.style.width = "300px";
x.style.borderRadius = "10px";
x.style.outline = "none";
}
function reset() {
var x = document.getElementById("textBar");
x.value = "";
x.style.width = "150px";
x.style.backgroundColor = "black";
x.style.borderRadius = "10px";
x.style.outline = "none";
}

How to display multiple user input

I'm trying to get user input and display it back to the user but it keeps resetting after the user inputs something e.g. start with 1000 then input 10 cash and it comes up with 990 but after you do it again and put in 20 it doesn't save the 990 you input and instead starts over and outputs 980
You can see what I mean here
https://codepen.io/scottajames/pen/mddreXz
// Hides everything in the Content-2 Div-
document.getElementById("Content-2").hidden = true;
// Unhides everything in the content-2 div and hides everything in the content-1 div and saves the input of the monthly id
function FirstButton() {
var a = document.getElementById("Monthly").value;
document.getElementById("Monthly-Amount").innerHTML = a;
document.getElementById("Content-2").hidden = false;
document.getElementById("Content-1").hidden = true;
}
// adds the content-2 inputs together and takes away the price from the total
function SecondButton() {
var b = document.getElementById("Item").value;
var c = document.getElementById("Price").value;
document.getElementById("Item-Price").innerHTML = b + ' ' + c;
var d = document.getElementById("Monthly").value;
document.getElementById("Monthly-Amount").innerHTML = d - c;
}
body {
background: #34EBC6;
}
#Content {
margin: 0 auto;
position: relative;
top: 200px;
width: 500px;
}
input {
width: 350px;
height: 60px;
outline: none;
font-size: 24px;
padding-left: 30px;
display: inline-block;
border-radius: 5px;
border: none;
background: #0e8b72;
color: white;
}
::placeholder {
color: white;
}
button {
position: relative;
height: 60px;
width: 100px;
font-size: 25px;
border-radius: 5px;
border: none;
color: white;
background: #0e8b72;
}
#Content-1 h1 {
position: relative;
left: 100px;
color: white;
font-size: 25px;
font-family: sans-serif;
font-weight: 400;
}
#Content-2 h1 {
color: white;
font-size: 25px;
font-family: sans-serif;
font-weight: 400;
}
#Monthly-Amount {
position: relative;
top: -10px;
left: 150px;
font-size: 40px;
font-family: sans-serif;
color: white;
font-weight: 400;
}
#Item-Price {
position: relative;
top: 50px;
border-top: 1px solid black;
padding-top: 25px;
padding-left: 25px;
}
<div id="Content">
<div id="Content-1">
<h1>Monthly Budget </h1><input type="text" id="Monthly" placeholder="0.00" required>
<button id="Button-1" onclick="FirstButton()">Next</button>
</div>
<h1 id="Monthly-Amount"></h1>
<div id="Content-2">
<h1>Item: </h1><input type="text" id="Item" placeholder="Item" required>
<h1>Price: </h1><input type="text" id="Price" placeholder="Price" required>
<button id="Button-2" onclick="SecondButton()">Next</button>
<h1 id="Item-Price"></h1>
</div>
</div>

Just incase anyone comes across this later and is having the same issue all you have to do is add a += instead of just = as the output
from
document.getElementById("Item-Price").innerHTML = b +' '+ c;
to
document.getElementById("Item-Price").innerHTML += b +' '+ c;
and
var d = document.getElementById("Monthly").value;
document.getElementById("Monthly-Amount").innerHTML = d - c;
gets changed to just
document.getElementById("Monthly-Amount").innerHTML -= c;

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