Saifu Dazzlings Saifu Dazzlings - 4 months ago 7
HTML Question

When clicking a button all texts are showing on the same div, i want it differentely

I have a page, when I am doing a small task for study, it is not working. The problem is,

I have created an input box and a button, also a div for showing the texts that typed on the input box. When I typed some texts and clicked on the button, it is working.

It means the text is showing in a small div. When I typed another text and pressed the button, the div is restarting. I want a duplicate div and it should be from the below of the first. I have listed the jsfiddle below.

JQuery Code is

$(window).ready(function () {
$(".result-box").hide();

});

$("#button4").click(function () {

$(".result-box").show();

$(".result-box").animate({
top: '12%',
left: '8%'
});

var vof = $("#box1").val();
$(".result-box").text(vof);

$("#button4").val("Next");
});


Js Fiddle

Answer

You can do it this way:

$(window).ready(function(){
$(".result-container").hide();
});
$("#button4").click(function(){
var vof=$("#box1").val();
var newDiv ='<div class="result-box">'+vof+'</div>';
$(".result-container").append(newDiv);
$(".result-container").show();
$("#button4").val("Next");
});
.small-box{
position:relative;
left:30%;
top:30%;
width:400px;
height:400px;
padding:30px;
border:5px solid #404040;
background:#f2f2f2;

}
.result-box{
position:relative;
left:9%;
top:10%;
border:3px solid #404040;
padding:10px;

font-family:verdana;
color:#fff;
width:80%;
background:#4d4d4d;


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="small-box">
<input type="text" id="box1" placeholder="Enter the value ?" />
<input type="button" name="button"  value="Click Me !"id="button4" /> 

<div class="result-container">
</div>
</div>

Comments