Hi, what I’m trying to do is that in javascript I have an array of numbers and in html I want to take that array and draw a colored bar according to each element on it.
For example, if I have an array with this [1,2,3,4,5,6,7,8,9] what I want to see is something like this.
Or if the array is equal to [1,6,3,4,2,1,2,2] the bar would be something like this
ronpat
June 26, 2016, 10:54pm
3
That looks a lot like a JavaScript homework assignment
What have you written so far?
You can post a “working page” - one that starts with <!doctype html>
, contains the <head>
information, continues with the <body>
and HTML, then ends with </html>
. JavaScript should be included between <script>
tags just before the </body>
tag.
You could post a jsfiddle or CodePen, too.
Thanks for your answer,
I already did it , and no, it’s not homework, I did it with angularjs but I wanted to see if there was a way for doing it in javascript only, I’ll show you how I did it.
First I created a controller named Ctrl2. In this controller there are:
-An array of objects named statuses with the parameters value and text.
-A function named set_color that verifies the value, and according to it, gives a background color for the status.
$scope.statuses = [
{value: 1, text: 'status1'},
{value: 2, text: 'status2'},
{value: 3, text: 'status3'},
{value: 4, text: 'status4'},
{value: 5, text: 'status5'},
{value: 6, text: 'status6'},
{value: 7, text: 'status7'},
{value: 8, text: 'status8'},
{value: 9, text: 'status9'}
];
$scope.set_color = function (status) {
if (status.value== 1) {
return { background: "yellow" }
}
else if (status.value == 2) {
return {background:"red"}
}
else if (status.value == 3) {
return { background: "blue" }
}
else if (status.value == 4) {
return { background: "gray" }
}
else if (status.value == 5) {
return { background: "green" }
}
else if (status.value == 6) {
return { background: "brown" }
}
else if (status.value == 7) {
return { background: "black" }
}
else if (status.value == 8) {
return { background: "orange" }
}
else if (status.value == 9) {
return { background: "purple" }
}
}
In the HTML code I call an ng-repeat with for each element of the array it calls the set_color function sending the value of the status by using an ng-style
<div ng-controller="Ctrl2">
<table style="border-collapse:collapse;">
<tr ng-repeat="status in statuses">
<td>{{status.value}}</td>
<td style="width:125px; height:50px;" ng-style="set_color(status)"></td>
</tr>
</table>
</div>
The result that I get is this
2 Likes
ronpat
June 27, 2016, 1:35am
5
Great! Thanks very much for posting your solution. If you don’t mind, I will move this back into the JS category where angularJS is part of their focus. Someone there might be interested in your code.
Thank you again
1 Like
Hi there JuanP.Yep,
here is a basic random color example…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
#colors li{
width: 6em;
height: 2em;
margin-bottom:0.2em;
border: 0.1em solid #000;
}
#change {
cursor: pointer;
}
.color0{background:#ff0;}
.color1{background:#f00;}
.color2{background:#5b9cd6;}
.color3{background:#dcdcdc;}
.color4{background:#71af45;}
.color5{background:#c09000;}
.color6{background:#050505;}
.color7{background:#ffc100;}
.color8{background:#712ca1;}
</style>
</head>
<body>
<ol id="colors">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<button id="change">change colours</button>
<script>
(function() {
'use strict';
var c;
var l=document.getElementById('colors').getElementsByTagName('li');
document.getElementById('change').addEventListener('click', function() {
for(c=0;c<l.length;c++) {
l[c].className='color'+Math.floor(Math.random()*l.length);
}
},false);
}());
</script>
</body>
</html>
coothead
Hi there JuanP.Yep,
if you just want to randomise the positions, then try it like this…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
#colors li{
width: 6em;
height: 2em;
margin-bottom:0.2em;
border: 0.1em solid #000;
}
#change {
cursor: pointer;
}
.color1{background:#ff0;}
.color2{background:#f00;}
.color3{background:#5b9cd6;}
.color4{background:#dcdcdc;}
.color5{background:#71af45;}
.color6{background:#c09000;}
.color7{background:#050505;}
.color8{background:#ffc100;}
.color9{background:#712ca1;}
</style>
</head>
<body>
<ol id="colors">
<li class="color1"></li>
<li class="color2"></li>
<li class="color3"></li>
<li class="color4"></li>
<li class="color5"></li>
<li class="color6"></li>
<li class="color7"></li>
<li class="color8"></li>
<li class="color9"></li>
</ol>
<button id="change">change colours</button>
<script>
(function() {
'use strict';
var c;
var k;
var a;
var r;
var i;
var l=document.getElementById('colors').getElementsByTagName('li');
document.getElementById('change').addEventListener('click', function() {
a=[];
r=[];
rdm();
for(c=0;c<l.length;c++) {
l[c].className='color'+r[c];
}
},false);
function rdm() {
for(k=0;k<l.length;k++) {
a[k]=k+1;
}
while(a.length>0) {
i=Math.floor(Math.random()*a.length);
r.push(a[i]);
a.splice(i,1);
}
return r;
}
}());
</script>
</body>
</html>
coothead
1 Like
system
Closed
September 26, 2016, 9:27am
8
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.