CODEWITHSUNDEEP
javascriptjqueryhtml
Yasmine Feriel OLDACHE
Yasmine Feriel OLDACHE

Reputation: 41

jQuery append adds more than one item

I'm trying to create a div automatically when clicking on a button, I have an issue here, for each time I click on the button its incremented the display of the div. Could you please help with this 

$(document).ready(function() {
  $("#btn2").click(function() {
    $("div").append("<div>Appended item</div>");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div></div>
<button id="btn2">cliquer</button>

I followed your suggestion and test it in my own code but I still have the same issue

please find below my code

JavaScript

function DisplayOffer(){

    $("button").click(function() {
    var id_button =this.id;
    console.log("id_button:"+ id_button);
    var value_button =$('#'+ id_button).text();
    console.log("value_button:"+ value_button);
    $('#row').append('<p id=aaa>'+ value_button + '</p>');

});

}

In my JS I have 4 buttons, when I click on a button it should create two new div for each one i'll display a name of the button and a description for the first step I just wanted to display the buttons's name but it is displayed wrong ( not one time only like I told you in the beginning of my question ) 

function bot() {
    var input = document.getElementById("input").value;
    output.innerHTML = '<div id="a2" class="msj macro"><div class="avatar"><img class="img-circle" style="width:100%;" src="'+ me.avatar +'" /></div></div><div class="title1">Bonjour ' + input + '&nbsp;,vous voulez des informations sur quelle offre ? </br> <button type="button" id="h" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Hourly</button>&nbsp;<button type="button" id="d" class="btn btn-danger btn_hdwm bt " onclick=DisplayOffer()>Daily</button>&nbsp;<button type="button" id="w" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Weekly</button>&nbsp;<button type="button" id="m" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Monthly</button></div>';

HTML : 

    <div class="container" id="id_div_hide">
    <div id="row" class="chattt col-sm-3 col-sm-offset-4 frame a">
        <div id="test_id"></div>
        <div id="output" class="ma"> </div>
        <div id="outputh2" class="output2"></div>
        <div id="outputh3" class="output3"></div>
    </div>
    <div id="az1" class="text text-r az1_class" style="background:whitesmoke !important">
        <input id="input" class="mytext" placeholder="Type a message" /> 
    </div>
</div>

Full JS : 

var me = {};
me.avatar = "https://lh6.googleusercontent.com/-lr2nyjhhjXw/AAAAAAAAAAI/AAAAAAAARmE/MdtfUmC0M4s/photo.jpg?sz=48";

$('#outputh2').hide();
$('#outputh3').hide();


var timedQuestion=0;
var questionNum = 0;                                                    
var question = '<div class="text-chat1">Bonjour cher client, moi c est Djezzy bot, tu t appelles comment?</h1></div>';                 

var output = document.getElementById('output');             
output.innerHTML = question; 


function bot() {
    var input = document.getElementById("input").value;
    output.innerHTML = '<div id="a2" class="msj macro"><div class="avatar"><img class="img-circle" style="width:100%;" src="'+ me.avatar +'" /></div></div><div class="title1">Bonjour ' + input + '&nbsp;,vous voulez des informations sur quelle offre ? </br> <button type="button" id="h" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Hourly</button>&nbsp;<button type="button" id="d" class="btn btn-danger btn_hdwm bt " onclick=DisplayOffer()>Daily</button>&nbsp;<button type="button" id="w" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Weekly</button>&nbsp;<button type="button" id="m" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Monthly</button><div id="zmar"></div></div>';
    setTimeout(timedQuestion, 2000);    
    console.log("num question est :"+ questionNum);

}


function DisplayOffer(){


    var date = formatAMPM(new Date());
    $("button").click(function() {
    var id_button =this.id;
    console.log("id_button:"+ id_button);

    var value_button =$('#'+ id_button).text();
    console.log("value_button:"+ value_button);
    //$('#row').append( value_button);
    $('#row').append('<span class=aaa>'+value_button+ '</span>');
});
}



// to get the time 
function formatAMPM(date) {
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12;
    hours = hours ? hours : 12; // the hour '0' should be '12'
    minutes = minutes < 10 ? '0'+minutes : minutes;
    var strTime = hours + ':' + minutes + ' ' + ampm;
    return strTime;
}    

// to hide and display the chat
function toggle_div(img, id) { 
  var div = document.getElementById(id); 
  if(div.style.display=="none") { 
    div.style.display = "block";

  } else { 
    div.style.display = "none"; 

  }
}



$(document).keypress(function(e) {
  if (e.which == 13) {
    bot();   

    questionNum++;                                                                      
  }
});

CSS : 

.chat{
    background-color:#fff4f6;
    overflow-y:scroll;
    width: 280px;
    height: 370px;
    position: fixed;
    //float:right;
    bottom: 0px;
    right: 0px;
}

.title1{
    font-size: 12px;
    color: #183f88;

}

.btn_hdwm1{


    padding-left: 20px;
    padding-right: 15px;
    border-radius: 8px;
    padding-bottom: 5px;
    background: #e11e26;
    color: #fff;
}


.btn_hdwm{
    padding: 7px 12px
    display: inline-block;
    margin: 5px;
    background: #fff;
    //color: #06c5a6;
    color:#c52206;
    cursor: pointer;
    border-radius: 20px;
    font-size: 0.9rem;
    //border: 1px solid rgba(6,153,184,0.3);
    border: 1px solid rgba(184, 6, 6, 0.3);
}




.mytext{
    border:0;padding:10px;background:whitesmoke;
    position: fixed;
    /*margin: 10px;*/
    height: 4%;
    width: 15%;
    /*margin: 67px 0px 0px -57px;*/
    margin: 5px 0px 0px -11px;
}
.text{
    width:75%;display:flex;flex-direction:column;
}
.text > p:first-of-type{
    width:100%;margin-top:0;margin-bottom:auto;line-height: 13px;font-size: 12px;
}
.text > p:last-of-type{
    width:100%;text-align:right;color:silver;margin-bottom:-7px;margin-top:auto;
}
.text-l{
    float:left;padding-right:10px;
}        
.text-r{
    float:right;padding-left:10px;
}
.avatar{
    display:flex;
    justify-content:center;
    align-items:center;
    width:25%;
    float:left;
    padding-right:10px;
}
.macro{
    margin-top:5px;width:85%;border-radius:5px;padding:5px;display:flex;
}
.msj-rta{
    float:right;background:whitesmoke;
}
.msj{
    float:left;background:white;
}
.frame{
    background:#e0e0de;
    height:372px;
    overflow:hidden;
    padding:0;
}
.frame > div:last-of-type{
    position:absolute;bottom:5px;width:100%;display:flex;
}
ul {
    width:100%;
    list-style-type: none;
    padding:18px;
    position:absolute;
    bottom:32px;
    display:flex;
    flex-direction: column;

}
.msj:before{
    width: 0;
    height: 0;
    content:"";
    top:-5px;
    left:-14px;
    position:relative;
    border-style: solid;
    border-width: 0 13px 13px 0;
    border-color: transparent #ffffff transparent transparent;            
}
.msj-rta:after{
    width: 0;
    height: 0;
    content:"";
    top:-5px;
    left:14px;
    position:relative;
    border-style: solid;
    border-width: 13px 13px 0 0;
    border-color: whitesmoke transparent transparent transparent;           
}  
input:focus{
    outline: none;
}        
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #d4d4d4;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #d4d4d4;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #d4d4d4;
}
:-moz-placeholder { /* Firefox 18- */
    color: #d4d4d4;
}


.a{
    /*margin-top: 199px;*/
    float: right;

}



.boutonHourely{
    padding: 7px 12px

    display: inline-block;
    margin: 5px;
    background: #fff;
    color: #06c5a6;
    cursor: pointer;
    border-radius: 20px;
    font-size: 0.9rem;
    border: 1px solid rgba(6,153,184,0.3);
}

.text_chat1{
    font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
    font-size: 11px;
    }

#output{

    font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
    font-size: 11px;
    width: 65%;
    background-color: #fff;
    margin-left: 9px;
    border-radius: 20px;
    font-size: 12px;
    padding: 0px -8px 4px 0px;
    margin: 12px;
    padding-right: 5px;
    padding-left: 12px;
    padding-top: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;

}


.bt{
    width: 30px;
 }


 .output:before {
    width: 0;
    height: 0;
    content: "";
    top: -5px;
    left: -14px;
    position: relative;
    border-style: solid;
    border-width: 0 13px 13px 0;
    border-color: transparent #ffffff transparent transparent;

    }

.logo-bule{
    width: 50px;
    height:50px;
    border-radius: 40px;
    /*float: right;*/
    position: fixed;
    right: 6%;
    bottom: 0px;
}


.logo-bule:after{

   /* position:relative;
    float:right;
    bottom:0px;*/

}

.chattt{
    margin-top: 6.3%;
    overflow-y: scroll;
}

.output2,.output4,.output5, .output7, .output9, .aaa{
    font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
    font-size: 11px;
    width: 21%;
    background-color: #b2d0e5;
    margin-left: 9px;
    border-radius: 20px;
    font-size: 12px;
    padding: 0px -8px 4px 0px;
    margin: 12px;
    padding-right: -3px;
    padding-left: 12px;
    padding-top: 5px;
    /* margin-left: auto; */
    /* margin-right: auto; */
    margin-top: 2%;
    float: right;
    padding-bottom: 5px;
}

.output3{

    font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
    font-size: 11px;
    width: 65%;
    background-color: #fff;
    margin-left: 9px;
    border-radius: 20px;
    font-size: 12px;
    padding: 0px -8px 4px 0px;
    margin: 12px;
    padding-right: 5px;
    padding-left: 12px;
    padding-top: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
    font-size: 12px;
    color: #183f88;

}


.output5{
font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
    font-size: 11px;
    width: 21%;
    background-color: #b2d0e5;
    margin-left: 9px;
    border-radius: 20px;
    font-size: 12px;
    padding: 0px -8px 4px 0px;
    margin: 12px;
    padding-right: -3px;
    padding-left: 12px;
    padding-top: 5px;
    /* margin-left: auto; */
    /* margin-right: auto; */
    margin-top: 2%;
    float: right;
    padding-bottom: 5px;
}

.output6, .output8, .output10{

    font-family: Roboto,"Helvetiva Neue","Segoe UI",sans-serif;
    font-size: 11px;
    width: 65%;
    background-color: #fff;
    margin-left: 9px;
    border-radius: 20px;
    font-size: 12px;
    padding: 0px -8px 4px 0px;
    margin: 12px;
    padding-right: 5px;
    padding-left: 12px;
    padding-top: 5px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
    font-size: 12px;
    color: #183f88;

}

Thank you

Upvotes: 3

Views: 187

Answers (1)

Soolie
Soolie

Reputation: 1820

The problem with this approach is, the inserted element is also <div>. Give a unique way of identification for the master <div>.

$("#btn2").click(function(){
  $("body > div").append("<div>Appended item</div>");
});

For this current example, I have used body > div selector, as the <div> is directly under <body>. The better way is to use a class for the <div> and use this way:

<div class="master"></div>

$("#btn2").click(function(){
  $(".master").append("<div>Appended item</div>");
});

Full Code

$(document).ready(function() {
  $("#btn2").click(function() {
    $("body > div").append("<div>Appended item</div>");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div></div>
<button id="btn2">cliquer</button>

Upvotes: 6

Related Questions