وجیهه
2 سال پیش توسط وجیهه مطرح شد
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);
})