Jump to content
JRJ

adding java script to html

Recommended Posts

I've added the script below to the attached htm file but it doesn't seem to execute. not sure why. the tag 175 is mapped to a data logger I have and the htm file resides on it and displays the website.

<script= text/javascript>
 var StopTimePivatic = [[175]];
 if (StopTimePivatic != 0){
  #b[[141]]{
  style.background-color= silver;
  }
 }
 else{
  #b80, #b81, #b82, #b83, #b84, #b85, #b86, #b87, #b88, #b89, #b90 {
  style.background-color = Yellow;
  style.color = black;
  }

</script>

infotest.htm

Share this post


Link to post
Share on other sites

I'm not sure very many browsers have the capacity to run JavaScript inside CSS.

Does this otherwise work with any verbose commands like Alert or Console.Log?

 

<script> tags have no meaning inside <style> tags. Not to mention that the 'JavaScript' you have written is of totally the wrong format.

What are you attempting to achieve here?

Edited by Funce

Share this post


Link to post
Share on other sites

Funce, what make you think that he is placing a script tag in a style element.  It appears to me that he wants to style a DOM element that he has not properly identified.

For example, if he wants to change the background color of the body of his page he must write.

window.body.style.backgroundColor = red

Roddy

 

 

 

 

 

Edited by iwato

Share this post


Link to post
Share on other sites

I apologise for the confusion. I'm referring to the contents of the file posted.

This is what's currently defined as the style body.

<style>
	html, body {
		height: 100%;
		width:100%;
		font-family:helvetica;
		margin:0;
		padding:0;
		background-color: #000000;
		color:white;
	}
	
	.button {
		position:absolute;
		top:2.5vh;
		border:0;
		background: #0087cc;
		border-radius: .3vw;
		box-shadow: 0 .375vw 0 #006599;
		color: #fff;
		cursor: pointer;
		font-size:1.2vw;
		margin: 0;
		outline: 0;
		padding: .5vw .5vw;
		transition: all .1s linear;
	}
	
	.button:active {
		box-shadow: 0 .15vw 0 #006599;
		transform: translateY(3px);
	}
	
	.displayBox {
		width:49vw;
		background-color:#008800;
		margin:0 auto;
		margin-bottom: 1.5vh;
		border-radius:1vw;
	}
	
	.header {
		height:10vh;
		border-top: 1px solid black; /* For some reason, without this, browsers will sometimes display scrollbars unnecessarily. Bad browsers. Bad. */
		border-bottom: .4vw solid white;
	}
	
	.displayTable {
		margin:0 auto;
		margin-left:1vw;
		margin-right:1vw;
		width:47vw;
		font-size:2.4vw;
	}
	
	.displayTable td {
		width:21%;
	}
	
	.displayTable td:nth-child(1) {
		width:36%;
	}
	
	.smallTable {
		padding: .5vw 1vw;
		font-size:2.4vw;
		background-color:#0033cc;
		border-radius:1vw;
		width:100%;
	}
	
	.smallTable td:nth-child(2) {
		text-align:right;
	}
	
	.statisticColumn {
		width:49vw;
	}
	
	.statisticParent {
		position:absolute;
		top:11vh;
		width:100vw;
		height:80%;
	}
	
	.title {
		border-radius: 1.5vw;
		width: 40vw;
		font-size: 3vw;
		font-weight:bold;
		margin: 0 auto;
		margin-top: 1vh;
		background-color:#0033cc;
		border: 5px solid #3366ff;
		text-align:center;
	}
	#a80, #a81, #a82, #a83, #a84, #a85, #a86, #a87, #a88, #a89 {
		background-color: yellow;
		color:black;
	}
	
	#a0,#a1, #a2, #a3, #a4, #a5, #a6, #a7, #a8, #a9,
	#a10, #a11, #a12, #a13, #a14, #a15, #a16, #a17, #a18, #a19,
	#a20, #a21, #a22, #a23, #a24, #a25, #a26, #a27, #a28, #a29,	
	#a30, #a31, #a32, #a33, #a34, #a35, #a36, #a37, #a38, #a39,
	#a40, #a41, #a42, #a43, #a44, #a45, #a46, #a47, #a48, #a49,
	#a50, #a51, #a52, #a53, #a54, #a55, #a56, #a57, #a58, #a59,
	#a60, #a61, #a62, #a63, #a64, #a65, #a66, #a67, #a68, #a69,
	#a70, #a71, #a72, #a73, #a74, #a75, #a76, #a77, #a78, #a79 {
		background-color: red;
	}
<script= text/javascript>
	var StopTimePivatic = [[175]];
	if (StopTimePivatic != 0){
		#b[[141]]{
		style.background-color= silver;
		}
	}
	else{
		#b80, #b81, #b82, #b83, #b84, #b85, #b86, #b87, #b88, #b89, #b90 {
		style.background-color = Yellow;
		style.color = black;
		}
		
		#b0, #b1, #b2, #b3, #b4, #b5, #b6, #b7, #b8, #b9,
		#b10, #b11, #b12, #b13, #b14, #b15, #b16, #b17, #b18, #b19,
		#b20, #b21, #b22, #b23, #b24, #b25, #b26, #b27, #b28, #b29,	
		#b30, #b31, #b32, #b33, #b34, #b35, #b36, #b37, #b38, #b39,
		#b40, #b41, #b42, #b43, #b44, #b45, #b46, #b47, #b48, #b49,
		#b50, #b51, #b52, #b53, #b54, #b55, #b56, #b57, #b58, #b59,
		#b60, #b61, #b62, #b63, #b64, #b65, #b66, #b67, #b68, #b69,
		#b70, #b71, #b72, #b73, #b74, #b75, #b76, #b77, #b78, #b79 {
			style.background-color = red;
		}
	}
</script>
</style>

 

When I pass it through my editor, numerous errors are thrown. The Javascript is using CSS selectors, with Javascript commands. Its quite... interesting.

Edited by Funce

Share this post


Link to post
Share on other sites

thanks for the feedback. I'm trying to monitor a tag that resides on my data logger. When the tag changes states I want to change the color of my pivatic line display.

Share this post


Link to post
Share on other sites
2 hours ago, JRJ said:

Funce, what editor are you using to check the file for errors?

Visual Studio Code. Although you would find out with any editor that has error checking for syntax errors.

2 hours ago, JRJ said:

thanks for the feedback. I'm trying to monitor a tag that resides on my data logger. When the tag changes states I want to change the color of my pivatic line display.

Have you been able to communicate with the Data Logger? Or is your Data Logger more of a page preprocessor that would inject the values on page load?

Share this post


Link to post
Share on other sites

@JRJ Also take a look at this thread, it may have a couple of notes you may be able to pick up on

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×