adding java script to html

[JRJ]

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

[Funce]

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 September 19, 2018 by Funce

[iwato]

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 September 20, 2018 by iwato

[Funce]

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 September 20, 2018 by Funce

[JRJ]

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.

[JRJ]

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

[Funce]

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?

[Funce]

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

 

[JRJ]

thanks Funce