مكه

محمد الحربي · 5 أبريل 2020

احتاج مساعده بجافا سكريبت html

السؤال : ستطلب من المستخدم ادخال عمره وجنسيتو
لو كان عمره فوق 18 وجنسيتو سعودي ستخرج له رسالة نعم بامكانك التصويت
عدا ذلك ستخرج له رسالة اسف لا تستطيع التصويت

Othmane Othwsav · 5 أبريل 2020

السلام عليكم,

يمكنني مساعدتك لكن يجب أن أعرف إن كان لديك HTML جاهز أم لا حتى أكتب السكربت بناء عليه.

و شكرا.

Adnane Kadri · 5 أبريل 2020

<form>
  Age : 
  <input type='number' class='ageField' />
  nationality : 
  <select class='nationalityField'>
    <option value='Saudian'>Saudian</option>
    <option value='American'>American</option>
    <option value='Algerian'>Algerian</option>
  </select>
  <input type='submit' class='submitBtn'>
</form>

var btn =document.querySelector('.submitBtn');

// function called when submitting the button 
function checkForUser(){
  // declaring variables 
var nationality=document.querySelector('.nationalityField'),
    age =document.querySelector('.ageField');
        
       // check : 
       if(nationality.value=='saudian' && age>=18){
         window.alert('Welcome');
          }else{
            window.alert('sorry');
          }
}

// Add event handler 
btn.addEventListener('click',checkForUser());

بعد ما يدخل المعلومات تأخذ قيم الفيلدس وتعمل اللي حابه بالجافاسكربت

Othmane Othwsav · 5 أبريل 2020

استعملت في هذا الكود HTML+CSS+JavaScript+Jquery و قد أرفقت الملف و الصور التي توضحه:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- page style -->
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        body>div, .form{
            display: flex;
            flex-direction: column;
            width: 50%;
            align-items: center;
        }
        .form > *:not(:last-child){
            margin-bottom: 15px;
            width: -webkit-fill-available;
        }
        
        .message{
            /* align-self: end; */
            display: none;
            flex-direction: column;
            width: -webkit-fill-available;
            padding: 15px;
            margin-top: 20px;
            border-radius: 5px;
            border: 1px solid gray;
        }
        .message p{
            margin-top: 0;
        }
        .message.error{
            background: #ffa0a0;
        }
        .message.correct{
            background: #a0ffa0;
        }
    </style>
</head>
<body>
    <div>
        <h3>المرجو إدخال عمرك و جنسيتك الحقيقيين</h3>
        <div class="form">
            <label>العمر :</label>
            <input type='number' class='age' min="1" max="200">
            <label>الجنسية :</label>
            <select class='natio'>
                <option value='Saud'>سعودي</option>
                <option>عراقي</option>
                <option>مغربي</option>
                <option selected>جنسية أخرى</option>
            </select>
            <input type="submit" value="هل بإمكاني التصويت">
        </div>
        <div class="message error age">
            <h4>آسف لا تستطيع التصويت</h4>
            <p>و ذلك راجع إلى عدم بلوغك لسن 18.</p>
        </div>
        <div class="message error nat">
            <h4>آسف لا تستطيع التصويت</h4>
            <p>و ذلك راجع لعدم توفرك للجنسية السعودية.</p>
        </div>
        <div class="message correct">
            <h4>نعم بإمكانك التصويت</h4>
            <p>و ذلك راجع لتوفر الشروط المناسبة</p>
        </div>
    </div>
    
    <!-- page script -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script defer>

        $(".form input[type=submit]").click(function (){
            if($(".natio").val() == "Saud"){
                if(Number($(".age").val()) >= 18)
                    $(".message.correct").slideDown().delay(2000).slideUp()
                else
                    $(".message.error.age").slideDown().delay(2000).slideUp()
            } else 
                $(".message.error.nat").slideDown().delay(2000).slideUp()
            
        })

    </script>
</body>
</html>