مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

کاربر سایت

yoosefdavoodi

عضویت از 1401/02/20

ایجاد آرایه در جاوااسکریپت

  • سه شنبه 20 اردیبهشت 1401
  • 16:12
تشکر میکنم
برای تغییر یک تصویر با onclick دریک loop با جاوااسکریپت نوشته ام , حالا میخواهم کل این action را برای تعداد35 متغیر توسط یک آرایه ( رشته عددی ) درست کنم. احتیاج به راهنمایی دارم. فایل را ضمیمه کرده 
ام

 

<!DOCTYPE html>
<html>
<head>

<script>

	var counter = 0
	    lightbox = ["images/graycircle.png" , "images/greencircle.png" , "images/redcircle.png"],
	    rotateimage = function () {document.getElementById("checkbox").src = lightbox[counter];
		counter++;
		if (counter >= lightbox.length) {
		counter = 0;
     }
  }

</script>

</head>
<body>

<p style="text-align:center">

<table style="text-align:center;width:100%;padding-top:34px;padding-left:50px;padding-right:50px;color:white">
    <tr style="background-color:#000066">
	<th style="padding:8px">IN PUT</th>
	
    </tr>
</table>

<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
    <tr style="background-color:#000099">
	<td style="padding:8px">A1
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A2 
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A3
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A4
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A5
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A6
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
        </td>
	<td style="padding:8px">A7 
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A8 
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A9 
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A10 
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A11 
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A12 
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
        </td>
	<td style="padding:8px">A13
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A14 
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A15 
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A16 
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A17 
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A18 
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	</td>
    </tr>
</table>

<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
    <tr style="background-color:#0000CC">
	<td style="padding:8px">A1
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A2 
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  
    </td>
	<td style="padding:8px">A3
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A4
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  	
    </td>
	<td style="padding:8px">A5
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A6
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  </td>
    </tr>
</table>

<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
    <tr style="background-color:#0000FF">
	<td style="padding:8px">A1
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	</td>
	<td style="padding:8px">A2
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	</td>
	
    </tr>
</table>


<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
    <tr style="background-color:#336600">
	<th style="padding:8px">OUT PUT</th>
	
    </tr>
</table>

<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
    <tr style="background-color:#00CC00">
	<td style="padding:8px">A1
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A2
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	</td>
	<td style="padding:8px">A3
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	  <br>A4
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	</td>
    </tr>
</table>

<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
    <tr style="background-color:#00CC33">
	<td style="padding:8px">A1
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	</td>
	<td style="padding:8px">A2
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	</td>
	<td style="padding:8px">A3
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	</td>
    </tr>
</table>

<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
    <tr style="background-color:#00CC66">
	<td style="padding:8px">A1
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	</td>
    </tr>
</table>

<table style="text-align:center;width:100%;padding-top:18px;padding-left:50px;padding-right:50px;color:white">
    <tr style="background-color:#00CC66">
	<td style="padding:8px">A1
	 <img src="images/graycircle.png" id="checkbox" onclick="rotateimage()" style="width:18px;height:18px"/>
	</td>
    </tr>
</table>

</p>

<!--
<p style="text-align:center;font-family:tahoma;color:white;background-color:blue;margin:50px;padding:34px;">
 CONTROL LED: ON
<br><br>
<a href="Onpage.html"><button id="Bon" style="color:green;background-color:orange;text-align:center;border:none;width:50px;">ON</button></a>
<a href="Offpage.html"><button id="Boff" style="color:orange;background-color:green;text-align:center;border:none;width:50px;">OFF</button></a><br />
</p>
-->

</body>
</html>

 

فایل های ضمیمه

پاسخ های این پرسش

تعداد پاسخ ها : 2 پاسخ
کاربر سایت

محمد شعبانی (مدرس)

عضویت از 1399/07/27

  • چهارشنبه 21 اردیبهشت 1401
  • 22:43

سلام دوست من

lightbox = ["images/graycircle.png" , "images/greencircle.png" , "images/redcircle.png"],
var modify = document.getElementById("checkbox");

for(var i = 0; i < 35; i++) {
	modify.src = lightbox[i];
}

چون گفته بودید 35 تا عکس دارین این حلقه باید 35 بار گردش کنه، کد بالا رو می تونین استفاده کنید که برای یک img چندین تصویر نمایش بدین

موفق باشین :)

کاربر سایت

yoosefdavoodi

عضویت از 1401/02/20

  • پنجشنبه 22 اردیبهشت 1401
  • 00:30

آقای شعبانی عزیز ، ممنون از جوابی که دادین و راهنماییتون ، ولی منظور من این بود که این سه تصویر که با onclick با هم جایگزین مشن ( در واقع نشان on . Off . Disable هستند ) باید در این صفحه برای ۳۵ گزینه ، به همان شکل عمل کنند. یعنی فانکشن onclick  که برای img شماره ۱ نوشته شده باید به ترتیب برای ۳۵ مورد دیگر همانطور عمل کند.

کاربرانی که از این پست تشکر کرده اند

هیچ کاربری تا کنون از این پست تشکر نکرده است

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید

با ما تماس بگیرید تا در این مسیر همراهتان باشیم :)