Grabbing value from a HTML eliment

October 25, 2016

Hi,
I have little skill with javascript and basic understanding on HTML hence why I am posting here.
So i have a website that grabs information from a database some how and what is does it produces a number for the students attendance level, so the students can keep track.
I have been asked to make the back ground change depending on what their attendance level is showing. So i think it was 95^ show X color, 50% ^ show y color, and 54% and lower show Z color.

The script i have got is :

Quote

var percent = */grab from <h2> </h2>value */

if (percent >= 95) {
document.body.style.backgroundColor = "#AA0000";/*red - if value is greater then 95 or equal to*/
} else if (percent >= 50) {
document.body.style.backgroundColor = "#3b0b60";/*purple* - if value is greater than 50*/
}else if (percent < 50) {
document.body.style.backgroundColor = "#66312a";/*brown - if value is less than 50*/
} else {
document.body.style.backgroundColor = "#d12e19";/*maron - if no value is found*/

the value changes within the <h2>....</h2> tags in HTML which i do not have the code on me at the time of making this thread.

If you need more information please let me know and i will try my best to answer.

Hazy125 · October 25, 2016

var percent document.getElementById('An ID you assign to the h2').innerHTML

So if your h2 is something like <h2 id="percentage"></h2>

You code will be var percent document.getElementById('percentage').innerHTML

October 25, 2016

Thank you very much. Now i will test it at work tomorrow to see if it works as my test version works fine.

Edit:
I just had a thought. If the output of <h1> shows % in it how do i make sure it will read the number even with the % in there. ... if that makes sense?

ie: <h1 id="percent">95%<h1>

dannytech357 · October 25, 2016

1 hour ago, Fallen Soul said:

Thank you very much. Now i will test it at work tomorrow to see if it works as my test version works fine.

Edit:
I just had a thought. If the output of <h1> shows % in it how do i make sure it will read the number even with the % in there. ... if that makes sense?

ie: <h1 id="percent">95%<h1>

I would suggest going further back the line: where is the 95 added to the DOM? When you find that, you can set the color there using the variable, which is much more reliable.

October 25, 2016

i am unsure how its added as when looking on the .HTML between the <h1></h1> tags it only shows three periods. ie: <h1>...</h1>

kirashi · October 25, 2016

1 hour ago, Fallen Soul said:

Hi,
I have little skill with javascript and basic understanding on HTML hence why I am posting here.
So i have a website that grabs information from a database some how and what is does it produces a number for the students attendance level, so the students can keep track.
I have been asked to make the back ground change depending on what their attendance level is showing. So i think it was 95^ show X color, 50% ^ show y color, and 54% and lower show Z color.

The script i have got is :

the value changes within the <h2>....</h2> tags in HTML which i do not have the code on me at the time of making this thread.

If you need more information please let me know and i will try my best to answer.

~~Please send me the code - either a post-rendered HTML copy of a completed attendance record, or enough code that I can see how it's rendered.~~

~~Obviously, I don't want any confidential data about the students or users please. I will have a jQuery solution for you.~~

~~Alternatively, if you can simply assign a class to each~~

Screw it. I was bored. Attached is a file for you to dissect. I'm going to bed now. You're welcome. Enjoy!

attendance.zip


<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Attendance</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <style type="text/css">
    
.divTable{
	display: table;
	width: 100%;
}
.divTableRow {
	display: table-row;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.divTableCell, .divTableHead {
	border: 1px solid #999999;
	display: table-cell;
	padding: 3px 10px;
}
.divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.divTableBody {
	display: table-row-group;
}
    
    </style>
  </head>
  <body>

<div class="divTable">
	<div class="divTableBody">
		<div class="divTableRow">
			<div class="divTableCell">ID</div>
			<div class="divTableCell">First Name</div>
			<div class="divTableCell">Last Name</div>
			<div class="divTableCell">Percent</div>
			<div class="divTableCell">Color</div>
		</div>
		<div class="divTableRow record">
			<div class="divTableCell">112233</div>
			<div class="divTableCell">Bobby</div>
			<div class="divTableCell">Tables</div>
			<div class="divTableCell">95</div>
			<div class="divTableCell">&nbsp;</div>
		</div>
		<div class="divTableRow record">
			<div class="divTableCell">112234</div>
			<div class="divTableCell">Timmy</div>
			<div class="divTableCell">Turner</div>
			<div class="divTableCell">29</div>
			<div class="divTableCell">&nbsp;</div>
		</div>
		<div class="divTableRow record">
			<div class="divTableCell">112235</div>
			<div class="divTableCell">Beth</div>
			<div class="divTableCell">Mackenzie</div>
			<div class="divTableCell">77</div>
			<div class="divTableCell">&nbsp;</div>
		</div>
		<div class="divTableRow record">
			<div class="divTableCell">112236</div>
			<div class="divTableCell">Little</div>
			<div class="divTableCell">Finger</div>
			<div class="divTableCell">69</div>
			<div class="divTableCell">&nbsp;</div>
		</div>
		<div class="divTableRow record">
			<div class="divTableCell">112237</div>
			<div class="divTableCell">Dragon</div>
			<div class="divTableCell">Queen</div>
			<div class="divTableCell">100</div>
			<div class="divTableCell">&nbsp;</div>
		</div>
		<div class="divTableRow record">
			<div class="divTableCell">112238</div>
			<div class="divTableCell">Tyrian</div>
			<div class="divTableCell">Lannister</div>
			<div class="divTableCell">0</div>
			<div class="divTableCell">&nbsp;</div>
		</div>
	</div>
</div>
<!-- DivTable.com -->
  
    <script>
jQuery(function ($) {
  console.log('script loaded');

  $('.record div:nth-child(4)').each(function() {
    var attendancePercent = $(this).text();
    if (attendancePercent >= 95) {
      $(this).css('background-color','#99ff99');
    } else if (attendancePercent >= 60) {
      $(this).css('background-color','#ffff99');
    }else if (attendancePercent <= 59 && attendancePercent >0 ) {
      $(this).css('background-color','#ff9999');
    } else {
      $(this).css('background-color','#99ffff');
    }
  });
});
    </script>
  </body>
</html>

Hazy125 · October 25, 2016

2 hours ago, Fallen Soul said:

Thank you very much. Now i will test it at work tomorrow to see if it works as my test version works fine.

Edit:
I just had a thought. If the output of <h1> shows % in it how do i make sure it will read the number even with the % in there. ... if that makes sense?

ie: <h1 id="percent">95%<h1>

var percent document.getElementById('percentage').innerHTML

var value = percent.slice(0, -1);

October 25, 2016

12 hours ago, Hazy125 said:

var percent document.getElementById('percentage').innerHTML

var value = percent.slice(0, -1);

That didn't do it for me. I have attached a copy of the whole web folder for this application. I have the kid who made the app coming out to work today and might as him if he can have a look but still would like assistance before then if you guys read it before then any way.

Attendence HTML.zip

kirashi · October 25, 2016

1 hour ago, Fallen Soul said:

That didn't do it for me. I have attached a copy of the whole web folder for this application. I have the kid who made the app coming out to work today and might as him if he can have a look but still would like assistance before then if you guys read it before then any way.

Attendence HTML.zip

Use the following regex.replace in your JS, or check my implementation at the following GitHub Repo: https://github.com/kirashi3/scripts

var value = percent.replace(/\D/g,'');;

This regex strips all non-numerical characters from your JS variable.

October 26, 2016

2 hours ago, kirashi said:
Use the following regex.replace in your JS, or check my implementation at the following GitHub Repo: https://github.com/kirashi3/scripts
var value = percent.replace(/\D/g,'');;
This regex strips all non-numerical characters from your JS variable.

I am not to sure what i am doing wrong but i can't seem to get it to work. I have even tried removing the % on the original test script and it still shows the blue background. where when i play with just the script in jfiddle it works.

Edit: ok i am making progress. Will keep you updated

October 26, 2016

Ok thanks to all that helped. At this stage i think this will do the job.

I used the following code:

jQuery(function ($) {
  console.log('script loaded');
  $('.login-form').each(function() {
    var attendancePercent = $(this).text().replace(/\D/g,''); //jQuery method
    if (attendancePercent <= 95) {
      $(this).css('background-color','green');
    } else if (attendancePercent >= 60) {
      $(this).css('background-color','yellow');
    }else if (attendancePercent <= 59 && attendancePercent >0 ) {
      $(this).css('background-color','red');
    } else {
      $(this).css('background-color','blue');
    }
  });
});
	</script>
	
		<h1>Attendance App</h1>
		<div class="login-form">
			<h2 id="percentage">...</h2>
			<span id="latetime"></span><p/>
			<a href="calendar.html">When have I been marked absent?</a><p/>
			<br/>
			<!--MESSAGES-->
		</div>
	</body>
</html>

Edit:

DAM, This doesn't work with Internet Explorer

EDIT:

Ok this is interesting. I have it in a iframe on sharepoint and through IE it wont work but through Chrome it's fine. Hmmmm

kirashi · October 26, 2016

21 hours ago, Fallen Soul said:

Ok thanks to all that helped. At this stage i think this will do the job.

I used the following code:


jQuery(function ($) {
  console.log('script loaded');
  $('.login-form').each(function() {
    var attendancePercent = $(this).text().replace(/\D/g,''); //jQuery method
    if (attendancePercent <= 95) {
      $(this).css('background-color','green');
    } else if (attendancePercent >= 60) {
      $(this).css('background-color','yellow');
    }else if (attendancePercent <= 59 && attendancePercent >0 ) {
      $(this).css('background-color','red');
    } else {
      $(this).css('background-color','blue');
    }
  });
});
	</script>
	
		<h1>Attendance App</h1>
		<div class="login-form">
			<h2 id="percentage">...</h2>
			<span id="latetime"></span><p/>
			<a href="calendar.html">When have I been marked absent?</a><p/>
			<br/>
			<!--MESSAGES-->
		</div>
	</body>
</html>

Edit:

DAM, This doesn't work with Internet Explorer

EDIT:

Ok this is interesting. I have it in a iframe on sharepoint and through IE it wont work but through Chrome it's fine. Hmmmm

Apologies; I refuse to test anything in Internet Explorer or EDGE, even though I consider myself a professional web developer.

As far as I'm concerned, any browser that doesn't support web standards should not be used.

WebKit-based browsers (Chrome, Safari, Opera) have the best CSS and Javascript implementations, while Mozilla's Gecko-based renderer still sticks to strict standards, which I love. (Although I'm a Chrome person, since Safari and Chrome are the most widely used browsers.)

However, after testing my "attendance-record-row-color.html" in both Edge and IE 11 in Windows 10 1607 Build 14951 I see it works fine.

I'd probably say there's a policy on your computers restricting the use of certain Javascripts, or that your IE is rendering the page as an older version.

Oh, also, you don't need to keep console.log('script loaded'); in the script - that's just for debugging in Chrome's element inspector.

October 26, 2016

Yeah it is to do with how the iframe in the sharepoint handles it. if i ran it though IE by itself it works fine.

October 27, 2016

I might go back to my old code as the jquary doesn't want to work right either.
So i have added the code below, this works on jsfiddle.net but not through a html file.

<!DOCTYPE html>
<html>
	<head>

	<script type="text/javascript">
	var percent = document.getElementById('percentage').innerHTML;
	percent = percent.replace(/\D/g,'');
	if (percent >= 100) {
	  document.body.style.backgroundColor = "gold";
	} else if (percent >= 75) {
	  document.body.style.backgroundColor = "green";
	}else if (percent < 74) {
	  document.body.style.backgroundColor = "red";
	} else {
	  document.body.style.backgroundColor = "grey";
	}
	</script>
      
	</head>
<body>
<h1>Attendance App</h1>
<div class="login-form">
<h2 id="percentage">75%</h2><!-- This number is produced automatically depending on student logged in -->
</div> <!--login-form-->
</body>
</html>

UPDATE:
Ok it's all working 100% now even in IE. the reason is because my script needs to be added after <h2></h2> tags.
I has always thought it didn't mater where it goes as you link scripts up the top half the time from my understanding.

vorticalbox · October 28, 2016

On 10/27/2016 at 1:42 AM, Fallen Soul said:

I might go back to my old code as the jquary doesn't want to work right either.
So i have added the code below, this works on jsfiddle.net but not through a html file.

UPDATE:
Ok it's all working 100% now even in IE. the reason is because my script needs to be added after <h2></h2> tags.
I has always thought it didn't mater where it goes as you link scripts up the top half the time from my understanding.

If you are modifying html elements then you should load your scripts at the bottom so the page is fully loaded before trying to access elements.

October 28, 2016

5 hours ago, vorticalbox said:

If you are modifying html elements then you should load your scripts at the bottom so the page is fully loaded before trying to access elements.

Thanks

Sign In

Grabbing value from a HTML eliment

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Link to comment

Share on other sites

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Topics

Latest From Linus Tech Tips:

Why Do Youtubers Keep Destroying Companies - WAN Show April 19, 2024

Latest From Tech Quickie:

Nutrition Facts…for your Internet Connection?

Latest From TechLinked:

YouTube Doubles Down

Latest From GameLinked:

The next Must-Play RPGs

Latest From ShortCircuit:

You Deserve this much OLED - AORUS CO49DQ