for loop in Javascript

خميس الشمري · 21 أبريل 2020

السلام عليكم و رحمة الله و بركاته ...

أحبتي .. أنا أتمرن على الجافاسكربت و مما خطر في بالي أردت أن أعمل Div و أعطيه ستايل و حجم و لون ...و أزرار للتحكم في لون الديف ...

في الجافا سكربت عملت مصفوفة من عدة ألوان .. من الغامق إلى الفاتح .. أردت عمل Function و بواسطة onclick() يتم تبديل اللون في كل ضغطة زر يتغير اللون .. و لكن اللون يقفز من الأول في المصفوفة إلى الأخير ...

و لم أعرف السبب ... أرجوكم أفيدوني أفادكم الله ... مثالي كالتالي تقريباً .. مع العلم اني عملتها بملفات خارجية لكن من أجل الاختصار جمعت لكم المثال ...

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <title></title>
  </head>
    
    
  <body>
      
      
      <div class="dDi">
 <button type="button" class="btn2" name="button" onclick="brightNess();">↓</button>
          &nabla;&nabla;&nabla;
          <button type="button"  name="button" onclick="bR();">↑ </button>
             </div>
          
             
    
     
<div id="myDiv">
    
</div>
      
      
      
<style>
      #myDiv{

  width: 100%;
  height: 800px;
  background-color: #000715;
}

.dDi{
    width: 200x;
    margin: auto;
}
      </style>
      
      

    <script type="text/javascript">
        
        var collorCombo = ['#011338','#01205f','#032e84','#0440b8','#0552ec']



    function bR() {
            var f=0 ;
            var DivBright = document.getElementById('myDiv').style;
    
			 for(f==0 ; f< collorCombo.length; f++){
            
				DivBright.backgroundColor=collorCombo[f];
			}
        
        }   
    </script>
  </body>
►</html>

Nabil Tayeh · 21 أبريل 2020

السلام عليكم
هنا تم عمل دالة next وأخرى back, ومربع نص مخفي قيمته الاولى 0 لإستخدامه كعداد رقمي, عند إستدعاء الدالة next تزيد قيمته واحد ويتم تغيير اللون حسب قيمة مربع النص, وكذلك في إستدعاء الدالة back يتم إنقاص قيمة مربع النص وتغيير اللون حسب القيمة.
كود مختصر جداً دائماً ما يستخدم مبرمجين الجافا سكريبت و JQuery هذه المنهجية, حيث يتم إنشاء مربع نص مخفي وعند النقر على رابط ما, يتم تغيير قيمة مربع النص, ومن ثم إستدعاء دالة ما او حدوث أمر ما بناءاً على قيمة المربع.

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
    
<body>
    
<div class="dDi">
    <button type="button" class="btn2" name="button" onclick="next();">↓</button>
    &nabla;&nabla;&nabla;
    <button type="button"  name="button" onclick="back();">↑ </button>

    <input type="hidden" id="counter" value="0">
</div>

          
             
<div id="myDiv">
    
</div>
      
      
<style>
#myDiv{
  width: 100%;
  height: 800px;
  background-color: #000715;
}

.dDi{
    width: 200x;
    margin: auto;
}
</style>
      
      

<script type="text/javascript">
        
    var collorCombo = ['#011338','#01205f','#032e84','#0440b8','#0552ec'];


    function next() {
        var counter = document.getElementById('counter').value;
        counter++;
        document.getElementById('counter').value = counter++;

        var DivBright = document.getElementById('myDiv').style;
		DivBright.backgroundColor=collorCombo[counter++];     
    }   

    function back() {
        var counter = document.getElementById('counter').value;
        counter--;
        document.getElementById('counter').value = counter--;

        var DivBright = document.getElementById('myDiv').style;
		DivBright.backgroundColor=collorCombo[counter--];     
    }   
</script>

  </body>
►</html>

تم التعديل في 21 أبريل 2020 بواسطة Nabil Tayeh

عزام عبد الحافظ · 21 أبريل 2020

و عليكم السلام و رحمة الله و بركاته @خميس الشمري .

السبب أنه مع إستعمال for loop يتم تفعيل جميع الألوان سريعاً إلى أخر لون , و يبدو كأنه ذهب إلى أخر لون فقط.

جرب هذه النسخة تعمل جيداً لكلا الزرين .

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <title></title>
  </head>
    
    
  <body>
      
      
      <div class="dDi">
 <button type="button" class="btn2" name="button" onclick="brightNess();">↓</button>
          &nabla;&nabla;&nabla;
          <button type="button"  name="button" onclick="bR();">↑ </button>
             </div>
          
             
    
     
<div id="myDiv">
    
</div>
      
      
      
<style>
      #myDiv{

  width: 100%;
  height: 800px;
  background-color: #000715;
}

.dDi{
    width: 200x;
    margin: auto;
}
      </style>
      
      

    <script type="text/javascript">
        
        var collorCombo = ['#011338','#01205f','#032e84','#0440b8','#0552ec']


        var f=0 ;
    function bR() {          
            var DivBright = document.getElementById('myDiv').style;
            f++;
            DivBright.backgroundColor=collorCombo[f];
        }   
        
    function brightNess(){
        var DivBright = document.getElementById('myDiv').style;
            f--;
            DivBright.backgroundColor=collorCombo[f];
    }
    </script>
  </body>
►</html>

أطيب تحياتي.

تم التعديل في 21 أبريل 2020 بواسطة عزام عبد الحافظ

Othmane Othwsav · 21 أبريل 2020

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

المشكل كان في كتابة خصائص الfor loop حيث أنك كتبتها بهذا الشكل:

for(f==0; f < collorCombo.length; f++)

و الخطأ في الخاصية الأولى, لذلك عليك تغيير الكود أعلاه للكود التالي:

for(f=0 ; f< collorCombo.length; f++)

و شكرا.

خميس الشمري · 21 أبريل 2020

بتاريخ 6 ساعات قال Nabil Tayeh:

السلام عليكم
هنا تم عمل دالة next وأخرى back, ومربع نص مخفي قيمته الاولى 0 لإستخدامه كعداد رقمي, عند إستدعاء الدالة next تزيد قيمته واحد ويتم تغيير اللون حسب قيمة مربع النص, وكذلك في إستدعاء الدالة back يتم إنقاص قيمة مربع النص وتغيير اللون حسب القيمة.
كود مختصر جداً دائماً ما يستخدم مبرمجين الجافا سكريبت و JQuery هذه المنهجية, حيث يتم إنشاء مربع نص مخفي وعند النقر على رابط ما, يتم تغيير قيمة مربع النص, ومن ثم إستدعاء دالة ما او حدوث أمر ما بناءاً على قيمة المربع.


<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
    
<body>
    
<div class="dDi">
    <button type="button" class="btn2" name="button" onclick="next();">↓</button>
    &nabla;&nabla;&nabla;
    <button type="button"  name="button" onclick="back();">↑ </button>

    <input type="hidden" id="counter" value="0">
</div>

          
             
<div id="myDiv">
    
</div>
      
      
<style>
#myDiv{
  width: 100%;
  height: 800px;
  background-color: #000715;
}

.dDi{
    width: 200x;
    margin: auto;
}
</style>
      
      

<script type="text/javascript">
        
    var collorCombo = ['#011338','#01205f','#032e84','#0440b8','#0552ec'];


    function next() {
        var counter = document.getElementById('counter').value;
        counter++;
        document.getElementById('counter').value = counter++;

        var DivBright = document.getElementById('myDiv').style;
		DivBright.backgroundColor=collorCombo[counter++];     
    }   

    function back() {
        var counter = document.getElementById('counter').value;
        counter--;
        document.getElementById('counter').value = counter--;

        var DivBright = document.getElementById('myDiv').style;
		DivBright.backgroundColor=collorCombo[counter--];     
    }   
</script>

  </body>
►</html>

بتاريخ 5 ساعات قال عزام عبد الحافظ:

و عليكم السلام و رحمة الله و بركاته @خميس الشمري .

السبب أنه مع إستعمال for loop يتم تفعيل جميع الألوان سريعاً إلى أخر لون , و يبدو كأنه ذهب إلى أخر لون فقط.

جرب هذه النسخة تعمل جيداً لكلا الزرين .


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
   
    <title></title>
  </head>
    
    
  <body>
      
      
      <div class="dDi">
 <button type="button" class="btn2" name="button" onclick="brightNess();">↓</button>
          &nabla;&nabla;&nabla;
          <button type="button"  name="button" onclick="bR();">↑ </button>
             </div>
          
             
    
     
<div id="myDiv">
    
</div>
      
      
      
<style>
      #myDiv{

  width: 100%;
  height: 800px;
  background-color: #000715;
}

.dDi{
    width: 200x;
    margin: auto;
}
      </style>
      
      

    <script type="text/javascript">
        
        var collorCombo = ['#011338','#01205f','#032e84','#0440b8','#0552ec']


        var f=0 ;
    function bR() {          
            var DivBright = document.getElementById('myDiv').style;
            f++;
            DivBright.backgroundColor=collorCombo[f];
        }   
        
    function brightNess(){
        var DivBright = document.getElementById('myDiv').style;
            f--;
            DivBright.backgroundColor=collorCombo[f];
    }
    </script>
  </body>
►</html>

أطيب تحياتي.

جزاكم الله خير أخواني و بارك الله فيكم و زادكم من فضله ...

بتاريخ 2 ساعات قال Othmane Othwsav:
السلام عليكم,

المشكل كان في كتابة خصائص الfor loop حيث أنك كتبتها بهذا الشكل:
for(f==0; f < collorCombo.length; f++)
و الخطأ في الخاصية الأولى, لذلك عليك تغيير الكود أعلاه للكود التالي:
for(f=0 ; f< collorCombo.length; f++)
و شكرا.

جزاك الله خير أخي و بارك الله فيك .... لم يكن هذا السبب حيث أني كنت قد كتبتها كما تفضلت .

الحل كما تفضلو الأخوة في الأعلى .

جزاك الله خير .

Nabil Tayeh · 21 أبريل 2020

حياكم الله, الطريقة التي كتبت فيها الدوال أنا, حاول تطبيقها وفهمها جيداً سوف تساعدك في تعلم JQuery بشكل كبير.

for loop in Javascript

السؤال

خميس الشمري

رابط هذا التعليق

شارك على الشبكات الإجتماعية

5 أجوبة على هذا السؤال

Recommended Posts

Nabil Tayeh

رابط هذا التعليق

شارك على الشبكات الإجتماعية

عزام عبد الحافظ

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Othmane Othwsav

رابط هذا التعليق

شارك على الشبكات الإجتماعية

خميس الشمري

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Nabil Tayeh

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية