اذهب إلى المحتوى

السؤال

نشر

أحاول إنشاء صفحة سلة مع إمكانية استخدام أزرار الإضافة أو الطرح لتقليل قيمة الإدخال أو زيادتها ، لكن يبدو أن الحدث لا يعمل وقد جربت العديد من الحلول المختلفة ولم أنجح

{% extends "base.min.html" %}

{% block body_block %}

{% load static %}


<div class='container'>
    <a class='back-link' href="/"> Back to Catalog</a>
    <h1 class='cart-h1'>Cart </h1>
    <div class='cart'>
        <div class='requests'>
            <div class='request'>
                <img src='https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png' alt='request image'>
                <div class='request-info'>
                    <p class='request-name'>Request: {{ requestName }}</p>
                    <p class='request-details'>Details: {{ requestDetails }}</p>
                    <p class='request-qty'>Qty: {{ requestQty }}
                        <div class='qty-container'>
                        <input type='button' value='+' class='qtyplus' id='plus' field='quantity' />
                        <input type='text' name='quantity' value='0' class='qty' id='inputQty' />
                        <input type='button' value='-' class='qtyminus' id='minus' field='quantity' />
                        </div>
                    </p>    
                    <p class='qty-remove'></p>
                    <span class='remove'>Remove</span>
                </div>

            </div>

        </div>

    </div>

</div>

</br>

<div class='hidden-container'>

    <p>Checkout Confirmation #: {{confirmNum}}</p>

</div>




<script type="module" src="{% static '\js\supplyshop\pageload\RequestManagementLoad.min.js'  %} " type ="text/javascript"></script>

{% endblock %}
const plusBtn = document.querySelector('#plus')
const minusBtn = document.querySelector('#minus')
const inputQty = document.querySelector('#inputQty')


// increment/decrement value on input field
// add eventlisteners on +/- buttons to update the value field


plusBtn.addEventListener('click', e => {
    e.preventDefault()
    inputQty.value = parseInt(inputQty.value) + 1

})

minusBtn.addEventListener('click', e => {
    e.preventDefault()

    if (inputQty.value <= 0) {
        inputQty.value = 0
    }

    inputQty.value = parseInt(inputQty.value) - 1
})

حاولت استخدام زيادة / إنقاص قيمة حقل الإدخال الذي يحمل قيمة الكمية. لقد حاولت أيضا استخدام وظيفة onclick في html  ، لكنني قد أكون قد أستخدمها بطريقة خاطئة حيث لا يوجد شيء يعمل بشكل صحيح. السلوك الذي أتوقعه هو النقر فوق زر علامة الجمع أو الطرح وسيزداد الرقم الموجود في حقل الإدخال بمقدار واحد أو ينقص بمقدار واحد إذا تم النقر على زر الإضافة / الطرح. أريد أيضا التأكد من أن القيمة لا يمكن أن تقل عن 0, هل يمكنكم مساعدتي؟

Recommended Posts

  • 0
نشر

لديك بعض الأخطاء في الكود، إذا لم تعمل الأحداث الخاصة بالزر، فمن المحتمل أن يكون هناك مشكلة في تحديد عنصر HTML بشكل صحيح، ويجب أن تتحقق من العناصر الخاصة بك بأنها متاحة عندما يتم تحميل الصفحة.

يمكنك استخدام الكود التالي لتحقق من الأخطاء وإصلاحها:

قم بتحويل الكود الخاص بالأحداث إلى دالتين منفصلتين، لتحديد العناصر وتعيين الأحداث.

قم بوضع الكود الخاص بتحديد العناصر وتعيين الأحداث داخل حدث DOMContentLoaded.

قم بالتحقق من أن العناصر التي تحاول تحديدها متاحة عندما يتم تحميل الصفحة.

تحقق من أنك تقوم بتشغيل الكود الخاص بالأحداث في نفس الملف الذي توجد به عناصر HTML الخاصة بك.

قم بتغيير الكود الخاص بك إلى ما يلي:

document.addEventListener('DOMContentLoaded', () => {
  const plusBtn = document.querySelector('#plus');
  const minusBtn = document.querySelector('#minus');
  const inputQty = document.querySelector('#inputQty');

  plusBtn.addEventListener('click', e => {
    e.preventDefault();
    inputQty.value = parseInt(inputQty.value) + 1;
  });

  minusBtn.addEventListener('click', e => {
    e.preventDefault();
    if (inputQty.value <= 0) {
      inputQty.value = 0;
    }
    inputQty.value = parseInt(inputQty.value) - 1;
  });
});

هذا الكود سيحدد العناصر المناسبة ويعين الأحداث داخل حدث DOMContentLoaded. إذا كانت هناك مشكلة في تحديد العناصر، فسيتم طباعة رسالة خطأ في وحدة تحكم المتصفح، يمكنك الاطلاع عليها لتحديد المشكلة.

بعد تغيير الكود، سوف تتمكن من زيادة وتقليل قيمة الإدخال بشكل صحيح عند النقر على زر الإضافة والطرح، وسيتم التحقق من أن القيمة لا يمكن ان تكون بالسالب.

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...