CODEWITHSUNDEEP
javascripthtml
N CR7
N CR7

Reputation: 41

Cannot display text from text box while button click?

I have created the button(click on me) using the html. When the button is clicked the textbox along with another button(show) is displayed on the screen. The value written in the textbox is shown when the show button is clicked. The textbox and show button is hidden. Again when i click (click on me ) button the textbox and show button is displayed. But when i write the text in textbox and click the show button this time text wont be displayed. That means first time text will be displayed but not after that. I want to display the text repeatedly. I am new to javascript so please help me. I also want to drag and drop the displayed text anywhere on the screen.

Try.html

<html>
<head>
</head>
<body>


<form name="frm">

<input type="button" value="Click on Me" id="button" onClick="display();">
</form>

<div id="responce"></div>

<script language="javascript" type="text/javascript">

var box="textBox"

function display()
{
document.getElementById('responce').innerHTML+='<center><input type="text" id="'+box+'" /></center>';
document.getElementById('responce').innerHTML+='<center><INPUT type="button" value="Show" id="btn2" onClick="visual();"/></center>';
}
</script>

<script>
function visual()
{   

var dis=document.getElementById(box).value ;
document.getElementById('responce').innerHTML+=document.getElementById(box).id;;
document.getElementById('responce').innerHTML+='<br><center>nilav '+dis+'</center></br>';
document.getElementById(box).style.visibility='hidden';
document.getElementById('btn2').style.visibility='hidden';


}
</script>

</script>
</body>

</html>

Upvotes: 0

Views: 1016

Answers (1)

Pradeep
Pradeep

Reputation: 3153

In the display function you are creating the text box & button every time you invoke the function, I just added a checking if the object is already present it'll just change the visibility.

<html>
<head>
</head>
<body>


<form name="frm">

<input type="button" value="Click on Me" id="button" onClick="display();">
</form>

<div id="responce"></div>

<script language="javascript" type="text/javascript">

var box="textBox"

function display()
{
    if(!document.getElementById(box)) {
        document.getElementById('responce').innerHTML+='<center><input type="text" id="'+box+'" /></center>';
        document.getElementById('responce').innerHTML+='<center><INPUT type="button" value="Show" id="btn2" onClick="visual();"/></center>';
    }
    else {
        document.getElementById(box).style.visibility='visible';
        document.getElementById('btn2').style.visibility='visible';
    }
}
</script>

<script>
function visual()
{   

var dis=document.getElementById(box).value ;
document.getElementById('responce').innerHTML+=document.getElementById(box).id;;
document.getElementById('responce').innerHTML+='<br><center>nilav '+dis+'</center></br>';
document.getElementById(box).style.visibility='hidden';
document.getElementById('btn2').style.visibility='hidden';


}
</script>

</body>

</html>

Upvotes: 3

Related Questions