change background color randomly

Pankaj-Str · Pankaj-Str · commit 6f6fa274540f · 2024-02-28T11:01:21.000+05:30
How to change background color randomly in a javascript function
diff --git a/Example/Loop/Color.html b/Example/Loop/Color.html
@@ -4,97 +4,57 @@
 <head>
 	<meta charset="utf-8">
 	<title>
-		How to Change Background Color
-		of a Div on Mouse Move Over
-		using JavaScript ?
+        @codeswithpankaj.com How to change background color randomly in a javascript function
 	</title>
 
 	<style>
-	  li{
-            list-style: none;
-            border: solid 1px black;
-            height: 25px;
-            width: 25px;
-            border-radius: 100px;
-            text-align: center;
-            float: left;
-            padding: 25px;
-            margin: 5px;
-            background-color: aqua;
-        }
+		li {
+			list-style: none;
+			border: solid 1px black;
+			height: 25px;
+			width: 25px;
+			border-radius: 100px;
+			text-align: center;
+			float: left;
+			padding: 25px;
+			margin: 5px;
+			background-color: aqua;
+		}
 	</style>
 </head>
 
 <body>
-   	
-   
-    <lable>Enter Number : </lable>
-    <input type="text" id="box_no">
-    <button onclick="changeColor()">Result</button>
 
-        <ul id="print">        
-        </ul>
+	<label>Enter Number: </label>
+	<input type="text" id="box_no">
+	<button onclick="changeColor()">Result</button>
 
-	<script type="text/javascript">
-	
-        
-const hexCharacters = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]
-
-
-
-function getCharacter(index) {
-	return hexCharacters[index]
-}
-
-function generateNewColor() {
-	let hexColorRep = "#"
-
-	for (let index = 0; index < 6; index++){
-		const randomPosition = Math.floor ( Math.random() * hexCharacters.length ) 
-    	hexColorRep += getCharacter( randomPosition )
-	}
-	
-	return hexColorRep
-}
-
-
-
- function changeColor(){
-           
-    //     let color_box = document.getElementById("box"); 
+	<ul id="print">
+	</ul>
 
-    //        for(let i = 0 ; i < 10 ; i++){
-
-    //    // let color = document.getElementById("box").style.backgroundColor = generateNewColor();   
-    //         color_box.innerHTML += "<li>"+generateNewColor()+"</li>";
-
-           
-    //     }
-         list = document.getElementById("box_no").value;
-
-           let print_data = document.getElementById("print");
-
-            for(let i = 0; i <= list ; i++){
-
-               
-                // print_data.style.backgroundColor += generateNewColor();
-                print_data.innerHTML += "<li>"+i+"</li>";
-               
-               
-
-
-       
-               // 
-              
-       
-
-       }
-    }
-    
-    </script>
+	<script type="text/javascript">
 
-</ul>
-   
+		function generateNewColor() {
+			const hexCharacters = '0123456789ABCDEF';
+			let hexColorRep = "#";
+			for (let i = 0; i < 6; i++) {
+				hexColorRep += hexCharacters[Math.floor(Math.random() * 16)];
+			}
+			return hexColorRep;
+		}
+
+		function changeColor() {
+			let list = parseInt(document.getElementById("box_no").value);
+			let print_data = document.getElementById("print");
+			print_data.innerHTML = ''; // Clear previous content
+			for (let i = 0; i < list; i++) {
+				let listItem = document.createElement('li');
+				listItem.style.backgroundColor = generateNewColor();
+				listItem.textContent = i + 1;
+				print_data.appendChild(listItem);
+			}
+		}
+	</script>
 
 </body>
 
