تعليمة switch في لغة JavaScript

Asma'a · 8 ديسمبر 2020

<!DOCTYPE html>
<html>
    <head>
        <title>Asma'a</title>
        <style>
            body
            {
                width:100%;
                height:100% ; 
            }
            div
            {   margin:70px auto ;
                width:23%;
                height:90% ;
                border: 2px solid lightseagreen;
                border-radius:10% ;
                background-color: cyan;
                padding:20px;

            }
            input[type="text"]
            { 
                color: rgb(12, 106, 122);
                font-size: 20px;
                background-color: rgb(218, 248, 246);
            }
            ::placeholder
            {
                color: blueviolet;
                text-align: center;
            }
            textarea
            {
                border: 2px soild #ddd;
                resize: none;
            }
            
            
        </style>
        <script>
            function f1()
            {"use strict";
            var num=document.getElementById( "number").value;
            var result=num*600;
            var message=document.getElementById("m");
            switch(num){
            case 1 :
            message.innerHTML="1/1/2020";
            break;
            case 2 :
            message.innerHTML="2/2/2020";
            break;
            case 1 :
            message.innerHTML="3/3/2020";
            break;
            case 1 :
            message.innerHTML="4/4/2020";
            break;case 1 :
            message.innerHTML="5/5/2020";
            break;
        }}
        </script>
    </head>
    <body>
        <div>
            
<input type="text"  id="number" placeholder="Enter number" value="" required>

            <button onclick="f1()"> submit</button><br><br>
           <textarea cols="40" rows="2" id="m"></textarea>
    </div>
    </body>
    </html>

لماذا لاتعمل هنا الدالة حسب الشروط المطلوبة

تم التعديل في 8 ديسمبر 2020 بواسطة عبود سمير
تعديل العنوان

سمير عبود · 8 ديسمبر 2020

مرحباً بك،

بتاريخ 42 دقائق مضت قال Asma'a:

لماذا لاتعمل هنا الدالة حسب الشروط المطلوبة

في الحقيقة تعليمة switch تعمل بشكل صحيح و ذلك لأن أي قيمة يتم إرجاعها في المتغير num عبارة عن سلسلة نصية (string) و بالتالي لم تُطابق أي حالة من الحالات الموجودة (cases) في تعليمة switch. إضافة إلى ذلك لا توجد تعليمة default فإذا لم تتحقق أي حالة من الحالات سيتم تنفيذها:

default:
	message.innerHTML = "anything";
break;

بإمكانك تحويل النوع من string إلى int بحيث مثلا: حالياً إذا أدخل المُستخدم 2 فإن القيمة التي ستُخزن في المُتغير num ستكون "2" لكن يُمكننا تحويلها إلى 2 عن طريق إستخدام الدالة parseInt كما هو موضح أدناه:

var num = parseInt(document.getElementById("number").value);

ليُصبح الكود في النهاية بهذا الشكل:

function f1() {
  "use strict";
  var num = parseInt(document.getElementById("number").value);
  var result = num * 600;
  var message = document.getElementById("m");
  switch (num) {
    case 1 :
      message.innerHTML = "1/1/2020";
      break;
    case 2 :
      message.innerHTML = "2/2/2020";
      break;
    case 3 :
      message.innerHTML = "3/3/2020";
      break;
    case 4 :
      message.innerHTML = "4/4/2020";
      break;
    case 5 :
      message.innerHTML = "5/5/2020";
      break;
    default:
      message.innerHTML = "anything";
      break;
             }
}

بالتوفيق.

محمد الملواني · 8 ديسمبر 2020

<!DOCTYPE html>
<html>
    <head>
        <title>Asma'a</title>
        <style>
            body
            {
                width:100%;
                height:100% ; 
            }
            div
            {   margin:70px auto ;
                width:23%;
                height:90% ;
                border: 2px solid lightseagreen;
                border-radius:10% ;
                background-color: cyan;
                padding:20px;

            }
            input[type="text"]
            { 
                color: rgb(12, 106, 122);
                font-size: 20px;
                background-color: rgb(218, 248, 246);
            }
            ::placeholder
            {
                color: blueviolet;
                text-align: center;
            }
            textarea
            {
                border: 2px soild #ddd;
                resize: none;
            }
            
            
        </style>
        <script>
            function f1()
            {"use strict";
            var num=document.getElementById( "number").value;
            var result=num*600;
            var message=document.getElementById("m");
            switch(num){
            case "1" : 
            message.innerHTML="1/1/2020";
            break;
            case "2" :
            message.innerHTML="2/2/2020";
            break;
            case "3" :
            message.innerHTML="3/3/2020";
            break;
            case "4" :
            message.innerHTML="4/4/2020";
            break;case 1 :
            message.innerHTML="5/5/2020";
            break;
        }}
        </script>
    </head>
    <body>
        <div>
            
<input type="text"  id="number" placeholder="Enter number" value="" required>

            <button onclick="f1()"> submit</button><br><br>
           <textarea cols="40" rows="2" id="m"></textarea>
    </div>
    </body>
    </html>

case تحتاج البحث عن string وليس int

		function f1()
            {"use strict";
            var num=document.getElementById( "number").value;
            var result=num*600;
            var message=document.getElementById("m");
            switch(num){
            /* 
            تم تعديل الكود من رقم 1
            الى القيمة النصية 1
            في المثال الذي قمتي بإرساله كان يقوم بمقارنة الرقم واحد كنوع بيانات
            integer
            والصحيح ان القيمة الموجودة في
            num 
            والتي يتم جلبها من الصندوق النصي تكون من نوع بيانات
            string 
            */
            case "1" : 
            message.innerHTML="1/1/2020";
            break;
            case "2" :
            message.innerHTML="2/2/2020";
            break;
            case "3" :
            message.innerHTML="3/3/2020";
            break;
            case "4" :
            message.innerHTML="4/4/2020";
            break;case 1 :
            message.innerHTML="5/5/2020";
            break;
        }}