آفلاین
user-avatar

مشکل در جاوا اسکریپت هنگام استفاده از innerHtml

11 ماه پیش
توسط میلاد-م آپدیت شد
آفلاین
user-avatar
Mohammadreza Ghomi ( 40214 تجربه )
11 ماه پیش
تخصص : لاراول

من یک فانکشن نوشتم در صورت افزودن محصول به سبد خرید مقدار سبد خرید تغییر کنه و توسط innerHTML کد های خودمو تزریق میکنم به دیو مورد نظر خودم ولی مشکل اینجاست بعد تغییر کردم فانکش اون کد هارو نمیشناسه :

   (function (){
        const classname = document.querySelectorAll('.product-box_action');
  Array.from(classname).forEach(function (element) {
                const classnam = element.querySelector('.add-to-cart');
                const input = element.querySelector("input");
                const classup = element.querySelector('.bootstrap-touchspin-up');
                const classdown = element.querySelector('.bootstrap-touchspin-down');

                if(classnam != null)
                {
                    classnam.addEventListener('click' , function () {
                        const id = classnam.getAttribute('data-productid');
                        axios.post(`/cart/add`, {
                            quantity: this.value,
                            id : `${id}`,
                        })

                            .then(function (response) {

                                var data = " <div class='input-group bootstrap-touchspin bootstrap-touchspin-injected'>\n" +

                                    " <span class='input-group-btn input-group-prepend'>\n" +
                                    " <button class='btn btn-primary bootstrap-touchspin-down' type='button'>-</button>\n" +
                                    " </span>\n" +
                                    " <input type='text' readonly='readonly' value='۱' class='numberpicker form-control' data-max='۴' data-stop='۰' data-productid="+`${id}`+" data-storeid='۱۹۶۲' data-supplier='false'>\n" +
                                    " <span class='input-group-btn input-group-append'>\n" +
                                    " <button class='btn btn-primary bootstrap-touchspin-up' type='button'>+</button>\n" +
                                    " </span>\n" +
                                    " </div>";
                                element.innerHTML = data;
                                console.log(response.data);
                                document.querySelector('.topCartCount').innerHTML = response.data;
                                Toast.fire({
                                    icon: 'success',
                                    title: 'محصول با موفقیت به سبد خرید اضافه شد'
                                })
                                // location.reload();

                            })
                            .catch(function (error) {
                                Toast.fire({
                                    icon: 'warning',
                                    title: 'متاسفانه محصول به سبد خرید اضافه نشد'
                                })
                            })

                    })

تمام کد قرار ندادم مقداری از اون قرار دادم تا اونجایی که مشکل دارم

آفلاین
user-avatar
علی بیات ( 375638 تجربه )
11 ماه پیش
تخصص : توسعه دهنده ارشد وب

درود

خط ۱۱ داخل کدها یه خطای تایپی دارید: classname رو نوشتید classnam
دقیقا جایی که از addEventListener استفاده کردید. چک کنید ببینید برطرف میشه

آفلاین
user-avatar
میلاد-م ( 212834 تجربه )
11 ماه پیش
تخصص : طراح رابط کاربری - Front-End

@hesammousavi
پنجره ی نمایش کدها ایراد داره. شما به کدی که دوست مون در بالا قرار داده نگاه کنید، نوار افقی از ابتدا پیدا نیست.
من باید برم پایین ترین قسمت کد، بعدش نوار افقی ظاهر میشه و میشه برم سمت راست کدهای بالا رو ببینم. اونوقت دوباره باید برم بالا تا بشه کدها رو ببینم.
در حالی که وقتی اندازه کدهامون بصورت افقی زیاد شده، از همون ابتدا باید نوارهای افقی و عمودی پنجره پیدا بشه.

آفلاین
user-avatar
علی بیات ( 375638 تجربه )
11 ماه پیش
تخصص : توسعه دهنده ارشد وب

@milad
عملکردش تقریبا درسته ..
فکر میکنم باید position اون اسکرول بار افقی یه جوری fixed بشه

آفلاین
user-avatar
میلاد-م ( 212834 تجربه )
11 ماه پیش
تخصص : طراح رابط کاربری - Front-End

@ali.bayat
نه عملکردش درست نیست. شما فرض کنید ۵۰ خط کد باشه و خط پنجم از کدها بلند باشه.
اونوقت من باید ابتدا برم ته پنجره یعنی برم خط ۵۰, نوار رو بکشم جلو، سپس برگردم به خط پنج و کدها رو ببینم. اونوقت باید مجدد برم خط 50 و نوار رو به عقب بکشم و دوباره برم بالا و خط 6 به بعد رو ببینم.

این ایراد واللا کوچیک نیست.

آفلاین
user-avatar
علی بیات ( 375638 تجربه )
11 ماه پیش
تخصص : توسعه دهنده ارشد وب

@milad

منظور بنده از عملکرد اینه که اسکرول افقی با دکمه وسط ماوس کار میکنه اما در نمایش اسکرول افقی مشکل وجود داره

آفلاین
user-avatar
میلاد-م ( 212834 تجربه )
11 ماه پیش
تخصص : طراح رابط کاربری - Front-End

@ali.bayat
سلامت باشید،
صحیح، موشواره من چرخ افقی نداره. به این حالت دقت نکردم ولی بازم به نظرم نباید نادیده گرفته بشه و باید درستش کرد.

برای ارسال پاسخ باید وارد سایت شوید