Cannot display text from text box while button click?

Question

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>

</script> </script> no proper closing of script tag. Please verify this first — Teju MB
– Teju MB, Commented Nov 23, 2015 at 8:28

Teju MB · Accepted Answer · 2015-11-23 09:04:57Z

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>

Collectives™ on Stack Overflow

Cannot display text from text box while button click?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related