الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

تغيير لون خلفية الصفحة عن طريق button

بدأه mano0ora في 3 أبريل 2011 · 8 رد · 4,150 مشاهدة · في قسم البرمجة بــ Javascript
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع

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

عندي مشكله و اتمنى تساعدوني ,,

ابي احط ازرار بحيث كل زر يغيرلي لون الخلفيه بلون مختلف ,,

مثلا الديفولت ابيض اضغط على زر يحول الخلفية ازرق و هكذا

هذا الكود اللي عملته و ما اشتغل :(

اتمنى تفيدوني بالتصحيح ,,

هذا الربط من خلال الـ html

<p align="center">
<input type="button" value="  Blue  " onClick="changeBGC(blue)"; style="background-color:#CCF" border="2">
<input type="button" value="  Pink  " onClick="changeBGC(pink)"; style="background-color:#FCC" border="2">
<input type="button" value="  White " onClick="changeBGC(white)"; style="background-color:#FFF" border="2">
<input type="button" value=" Yellow " onClick="changeBGC(yellow)"; style="background-color:#FF9" border="2">
<input type="button" value="  Green " onClick="changeBGC(green)"; style="background-color:#0F9" border="2">
</p>

و هذا ملف الجافا سكربت

function changeBGC(color){
switch(color){
case "blue":
document.bgColor = "#CCF";
break;
case "pink":
document.bgColor = "#FCC";
break;
case "white":
document.bgColor = "#FFF";
break;
case "yellow":
document.bgColor = "#FF9";
break;
case "green":
document.bgColor = "#0F9";
break;
defult:
document.bgColor = "#FCC";
break;
}
}
#2

وعليكم السلام

يتم وضع الكود في الصفحة المطلوبة 

<form name="changeColor"> 
<p><font size="2" face="Verdana,Arial,Helvetica,Sans Serif">Choose 
a Background Color: <br> <br> <input type="button" name="colr" 
value=" BLUE " onclick="document.bgColor='#0000FF'"> <input 
type="button" name="colr" value=" RED " onclick="document.bgColor='#FF0000'"> 
<input type="button" name="colr" value=" GREEN " 
onclick="document.bgColor='#00FF00'"> <input type="button" 
name="colr" value=" WHITE " onclick="document.bgColor='#FFFFFF'"> 
<input type="button" name="colr" value=" BLACK " 
onclick="document.bgColor='#000000'"></font> </p> </form>

صورة
صورة

حسابي في الفيس بوك
http://goo.gl/XIzwL

حسابي في تويتر
http://goo.gl/6p4e3

 

 
 
#3

اخوي ما اشتغل الكود عندي :(

هل هذا الكود كافي ولا يحتاج جافا سكربت ماشوف اي ربط ؟

#4

جربت الكود على اللوكل هوست وإشتغل بدون أي مشاكل

صورة
صورة

حسابي في الفيس بوك
http://goo.gl/XIzwL

حسابي في تويتر
http://goo.gl/6p4e3

 

 
 
#5

جربت هذا الكود واشتغل بدون اخطاء

<html>
<head>
	<title>Color changer</title>
	<script language="JavaScript">
		function changeBGC(color){
			switch(color){
				case "blue":
					document.bgColor = "#CCF";
					break;
				case "pink":
					document.bgColor = "#FCC";
					break;
				case "white":
					document.bgColor = "#FFF";
					break;
				case "yellow":
					document.bgColor = "#FF9";
					break;
				case "green":
					document.bgColor = "#0F9";
					break;
				defult:
					document.bgColor = "#FCC";
					break;
			}
		}
	</script>
</head>
<body>
	<p align="center">
		<input type="button" value="  Blue  " onClick="changeBGC('blue')" style="background-color:#CCF" border="2">
		<input type="button" value="  Pink  " onClick="changeBGC('pink')" style="background-color:#FCC" border="2">
		<input type="button" value="  White " onClick="changeBGC('white')" style="background-color:#FFF" border="2">
		<input type="button" value=" Yellow " onClick="changeBGC('yellow')" style="background-color:#FF9" border="2">
		<input type="button" value="  Green " onClick="changeBGC('green')" style="background-color:#0F9" border="2">
	</p>
</body>
</html>
#6

*_*

اشتغل على الوندوز اكسبلورر و لا براوزر ثاني ؟

انا شغلته على الوندوز اكسبورر و ما اشتغل

#7
mano0ora كتب:

*_*

اشتغل على الوندوز اكسبلورر و لا براوزر ثاني ؟

انا شغلته على الوندوز اكسبورر و ما اشتغل

اشتغل على Firefox 4 و Chromium 10

تم تعديل هذه المشاركة بواسطة choclatboy في 4 أبريل 2011 في 00:01

#8

بعد التجريب على IE تبين أنه لايدعم الثلاثة قيم بعد العلامة # ، مثلا

document.bgColor = "#CCF";

بدلا عن ذلك يجب استعمال

document.bgColor = "blue";
أو
document.bgColor = "#CCCCFF";
1
#9

جربت نفس الكود بصفحه مستقله واشتغل

لكن لما انفذه على تطبيقي الرئيسي لا يتنفذ

ماعرف شالمشكله ؟!!

---------

بس عرفت شالمشكله *_*

المشكله اني كنت محدده لون خلفيه للصفحه من الأساس

يوم الغيت لون الخلفيه اشتغل الكود عشره على عشره

معني ماشوف انه مشكله من الاساس !!

بس المهم انه تطبق بعد ما شلت كود الخلفيه فالستايل شيت

كل الشكر لكم اخواني

تم تعديل هذه المشاركة بواسطة mano0ora في 4 أبريل 2011 في 23:54

مواضيع مشابهة