3
ボタンをクリックすると自動的にdivを作成しようとしていますが、ここで問題が発生します。ボタンをクリックするたびにdivの表示が増えます。あなたはこのjQuery appendは複数の項目を追加します
$(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>を助けてもらえます私はあなたの提案に続いて、私自身のコードでそれをテストするが、私はまだ同じ問題を持っている
私のコードの下に見つけてください
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>');
});
}
JSには4つのボタンがあります。ボタンをクリックすると、それぞれの2つの新しいdivが作成されます。ボタンの名前と最初のステップの説明が表示されます。しかし、それは間違っている（私は私の質問の最初にあなたに言っただけのようではない1時間）が表示され
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 + ' ,vous voulez des informations sur quelle offre ? </br> <button type="button" id="h" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Hourly</button> <button type="button" id="d" class="btn btn-danger btn_hdwm bt " onclick=DisplayOffer()>Daily</button> <button type="button" id="w" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Weekly</button> <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>
全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 + ' ,vous voulez des informations sur quelle offre ? </br> <button type="button" id="h" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Hourly</button> <button type="button" id="d" class="btn btn-danger btn_hdwm bt " onclick=DisplayOffer()>Daily</button> <button type="button" id="w" class="btn btn-danger btn_hdwm bt" onclick=DisplayOffer()>Weekly</button> <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;
}
は、このアプローチの問題は、挿入された要素も<div>である、であるあなたに
ねえヤスミンは、あなたがチェックすることができます私の答えがあなたのために働くなら？ – Soolie
IDが 'input'の入力がありません。完全なHTMLを追加できますか？ – Soolie
'bot（）'関数をどこで呼びますか？ – Soolie