3

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

Improve this question

3 Answers 3

Reset to default
1

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Tried this program...it's working when i put some data..when i leave the prompt box empty then even though nothing is getting printed I am not getting an empty space between the two buttons(specifying the invisible div box) along with an error "#table1".css is not a function...
0

Just replace this:

if(person1.value!="")

With this:

if(person1 != "")

and try again...

Improve this answer

4 Comments

tried that...When i enter some data then the box is not getting displayed and when no data is entered then i'm getting the error "#table1".css is not a function with no output...
When is the displayResult() function being called?
when the user is clicking on either a button or a radio button as specified in the answer by Michael Besteck..
i have a question...in ur code if i specify the top,left position of the div box,it does not consider these values whereas i want to display the visible/hidden div at a position of my choice on a webpage..Please suggest how to do that??
0

The test you need is:

(person1 != null && person1 != "")

if the user hits the cancel button in the prompt box then person1 will be null, otherwise it is a string.

in the case when person1 is null then trying to access person1.value will give a runtime error

in the case when person1 is a string person1.value will always be null because it has no such property. In which case:

(person1.value != "")

is equivalent to:

(null != "")

which is always true.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.