Menu
I am making a box using a div tag. User input will be taken from a prompt-box and will be displayed in a div tag of fixed dimensions. If no input has been given then the div will not be displayed at all.
However, when I do not enter anything in the prompt-box, the empty div is still displayed, even though I have specified an else condition in which its visibility is set to hidden.
I think the program is not entering the else condition of the if statement to set the visibility of the div as hidden.
JavaScript:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> css//the js file..
var person1;
function getdata()
{
person1=prompt("Please enter your data 1","Sample 1",max="5");
}
function displayResult()
{
var table1=document.getElementById("table1");
table1.innerHTML=person1;
if(person1.value!="")
{
$("#table1").css({"border-color": "#000000",
"border-width":"1px",
"border-style":"solid",
"visibility" : "visible",
//"position" :"fixed",
//"resize":"both",
"overflow":"auto",
"width":"60px",
//"maxlength":"10",
"height": "80px",
"top": "30px",
"left" : "80px"});
}
else
{
alert("hello");
("#table1").css({"border-color": "#000000",
"border-width":"0px",
"border-style":"solid",
"visibility" : 'hidden',
//"position" :"fixed",
"resize":"both",
"overflow":"auto",
"width" :"60px",
"height" : "80px",
"top": "30px",
"left" : "80px"});
}
}
HTML:
<body>
<form>
<div id="table1" width="1%" height="10%" style="visibility:hidden"></div>
</form>
<button type="button" id="button" onclick="getdata()">Insert data</button>
</body>
here is jsfiddle
261
This is a modification of your code that handles empty input correctly. You specified width and height for the "unvisible" div so there is an "unvisible space" in that case. Modify the CSS definitions for your needs.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="PATH-TO-jQuery"></script>
<script type="text/javascript">
$(function() {
$("#table1").css({"visibility":"hidden", "width":"1%", "heigth":"10%"});
$("#testButton").click(function() {
displayResult();
});
});
var person1;
function getdata()
{
person1=prompt("Please enter your data 1","Sample 1",max="5");
}
function displayResult()
{
$("#table1").text(person1);
if(person1.length)
{
$("#table1").css({"border-color": "#000000",
"border-width":"1px",
"border-style":"solid",
"visibility" : "visible",
//"position" :"fixed",
//"resize":"both",
"overflow":"auto",
"width":"60px",
//"maxlength":"10",
"height": "80px"//,
// "top": top1, // undefined
// "left" : left1 // undefined
});
}
else
{
alert("hello");
("#table1").css({"border-color": "#000000",
"border-width":"0px",
"border-style":"solid",
"visibility" : 'hidden',
//"position" :"fixed",
"resize":"both",
"overflow":"auto",
"width" :"60px",
"height" : "80px",
"top": "30px",
"left" : "80px"});
}
}
</script>
<style type="text/css">
</style>
</head>
<body>
<button id="testButton">displayResult</button>
<form>
<div id="table1"></div>
</form>
<button type="button" id="button" onclick="getdata()">Insert data</button>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
