Mesusjk
4 سال پیش توسط Mesusjk مطرح شد
4 پاسخ

چطور یه فانشن ساخت و حذف المنت بسازیم

سلام دوستان. یه فانشنی ساختم که یه ورودی به عنوان آیدی میگیره و هردفعه که فراخوانی میشه یه input با همون آیدی که فانشن بصورت ورودی گرفته، می سازه. اما میخوام طوری این کار رو انجام بده که با هربار فراخوانی، اول input قبلی ای که ساخته رو از صفحه html حذف کنه و یه جدیدی رو بسازه.
چطور این کار رو انجام بدم؟
js:

function getInput(textInputId) {
    textInput = document.createElement("input");
    textInput.setAttribute("id", textInputId);
    btn.parentElement.appendChild(textInput);
}

html:

<body>
    <button type="button" id="btn" onclick="getInput('#textInput');">Get input</button>
</body>

@ali.bayat @milad @mhyeganeh @abedim910 @muhammad


ثبت پرسش جدید
علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 4 سال پیش مطرح شد
1

با آی دی یا کلاس اول المان رو پیدا کن
حذفش کن

document.querySelector("#textInputId").remove()

و بعد دوباره المان رو بساز


Mesusjk
تخصص : برنامه نویس جنگو و پایتون
@Mesusjk 4 سال پیش مطرح شد
0

اگه منظورتون این کار پایینه، خب هرچی میکنم المنت رو پیدا نمیکنه و کلا null برمیگردونه

function getInput(textInputId) {
    let btn = document.querySelector("#btn");

    let textInput = document.querySelector(textInputId);
    console.log(textInput) // returns null
    if (textInput) { textInput.remove(); }

    textInput = document.createElement("input");
    textInput.setAttribute("id", textInputId);
    btn.parentElement.appendChild(textInput);
}

@ali.bayat


علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 4 سال پیش مطرح شد
1

به این قسمت از کدت دقت کن


textInput.setAttribute("id", textInputId);

داری یه متغیر رو به عنوان id مقداری دهی میکنی
که مقدارش برابر با textInput# هست
در صورتی که باید برابر با textInput باشه
داری # رو هم پاس میدی
که باعث میشه المان پیدا نشه

textInput.setAttribute("id", "textInput");

Mesusjk
تخصص : برنامه نویس جنگو و پایتون
@Mesusjk 4 سال پیش مطرح شد
0

اوه اوه. واقعا اصلا متوجه این موضوع نشدم. حدود یک ساعت باهاش درگیر بودم. خیلی ممنونم که این نکته رو بهم اطلاع دادید. الان کاملا درست داره انجامش میده.
@ali.bayat


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

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