وجیهه
1 سال پیش توسط وجیهه مطرح شد
0 پاسخ

جاوا اسکریپت

سلام دوستان من میخواستم مانند تصویر زیر را پیاده کنم تصویر
که هربا روی دکمه با کلاس addPositiveOption کلیک شد یک input و یک ایکون به div با کلاس productPositiveOption اضافه شد در واقع طبق زیر div با کلاس col-sm-6ساخته بشه

    <button class=" border-radius-5 primary__btn addPositiveOption">افزودن نقاط مثبت</button>
                                            <div class="productPositiveOption">
                                                <div class="col-sm-6 ">
                                                    <a class="remove ">
                                                        <svg xmlns="http://www.w3.org/2000/svg " width="16 " height="16 " fill="currentColor " class="bi bi-x-circle " viewBox="0 0 16 16 ">
                                                            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z "/>
                                                            <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z "/>
                                                          </svg>
                                                    </a>
                                                    <input type="text " class="checkout__input--field border-radius-5" placeholder="نقطه مثبت ">
                                                </div>
                                            </div>

و کد جاوا اسکریپت من به صورت زیر است ولی کار نمیکنه ممنون میشم راهنماییم کنید```


const addPositiveOption = document.querySelector(".addPositiveOption");
const productPositiveOption = document.querySelector(".productPositiveOption");
addPositiveOption.addEventListener("click", function(event) {
event.preventDefault();

const div1 = document.createElement("div");
div1.classList.add("col-sm-6");

const a1 = document.createElement("a");
a1.classList.add("remove");
a1.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px"fill="currentColor " class="bi bi-x-circle " viewBox="0 0 16 16 "><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z "/><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z "/></svg>'

const input1 = document.createElement("input");
input1.classList.add("checkout__input--field");
input1.classList.add("border-radius-5");
input1.setAttribute("type", "text");
input1.setAttribute("placeholder", "نقطه مثبت ");

div1.appendChild(a1);
div1.appendChild(input1);
productPositiveOption.appendChild(div1);
})

ثبت پرسش جدید

به همدیگه کمک کنیم

به وجیهه کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام