Eric_B Posted September 20, 2018 Share Posted September 20, 2018 I'm trying to create a script that contains an if/else statement that uses an outside input to change the color of a box in the html file. Currently I am not seeing any changes, so right now I'm checking if the script is even being noticed and ran. I'll admit that I'm not very good at this, so I apologize if these are really simple problems to fix or that they've been fixed before and I missed it when searching for other posts. If it's the latter, could you send me a link. Placement: Currently the script is inside the a style tag, and both are outside the body. Should I not have it in the style tag? Should I keep it outside of the body? If the issue is placement, where should I place it. Currently the if/else statement is not in a function. Does it need to be in a function? If so, how should I set it up so the function gets called every time, but does nothing until the if condition is met? if I don't need it to be a function to run this, how else can I set it up so it will run? Here's the part of the code that I'm working on, Ignore the contents as all I'm looking for is how to get the script to be noticed and ran. <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> <body onload="bundle()"> As I said previously, If as similar problem to this has been solved, please let me know where i can find it. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 20, 2018 Share Posted September 20, 2018 That a big NO! you can't! have it in the style tag. The style tags along with css are placed between <head>...</head> All the hash numbers will be treated as html text not JavaScript, they need to be a string applied to a defined variable, or placed in an array. style.xxxxx = "xxxx" need to attached to a ref to a element through either document.getElementById('nnnn') singular id ref, document.getElementsByTagName('nnnn').[idx] and also document.getElementsByClassName('nnnn').[idx], where 'nnnn' is a specific named value and where 'idx' is a index number representing a specific element of multiple identical matching 'nnnn' value. JavaScript code is triggered by specific events, you already using one 'onload' which will call a function specified 'bundle()' when page has been fully loaded. Other events are 'onclick', 'onmouseover', 'onmouseout', 'onsubmit', 'onkeypress' and 'onkeyup'. These are just a few events that are used to trigger a JavaScript function call. I should go to JavaScript tutorials, to learn more about how JavaScript works. https://www.w3schools.com/js/default.asp Link to comment Share on other sites More sharing options...
Eric_B Posted September 20, 2018 Author Share Posted September 20, 2018 3 hours ago, dsonesuk said: That a big NO! you can't! have it in the style tag. The style tags along with css are placed between <head>...</head> All the hash numbers will be treated as html text not JavaScript, they need to be a string applied to a defined variable, or placed in an array. style.xxxxx = "xxxx" need to attached to a ref to a element through either document.getElementById('nnnn') singular id ref, document.getElementsByTagName('nnnn').[idx] and also document.getElementsByClassName('nnnn').[idx], where 'nnnn' is a specific named value and where 'idx' is a index number representing a specific element of multiple identical matching 'nnnn' value. JavaScript code is triggered by specific events, you already using one 'onload' which will call a function specified 'bundle()' when page has been fully loaded. Other events are 'onclick', 'onmouseover', 'onmouseout', 'onsubmit', 'onkeypress' and 'onkeyup'. These are just a few events that are used to trigger a JavaScript function call. I should go to JavaScript tutorials, to learn more about how JavaScript works. https://www.w3schools.com/js/default.asp [[175]] is a value being pulled from Red Lion crimson 3 with a default value of zero, that changes depending on user input. Now if I used it in the call statement <input id="[[175]]" oninput="PivaticStopTime();> will this call the function or am I misunderstanding input and oninput? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 20, 2018 Share Posted September 20, 2018 JavaScript -> Tutorial -> search https://www.w3schools.com/jsref/event_oninput.asp Link to comment Share on other sites More sharing options...
dsonesuk Posted September 20, 2018 Share Posted September 20, 2018 (edited) Again, you are mixing JavaScript with CSS, JavaScript referring of a id of a element is different from css This is how css selector listing of multiple id's is used to apply a background-color #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 { background-color: red; } To do the same in JavaScript document.getElementById('b0').style.backgroundColor="red"; document.getElementById('b1').style.backgroundColor="red"; document.getElementById('b2').style.backgroundColor="red"; ///and so on... It would be better to use single class name on all of these as it can be used on multiple elements, then add a addition class name that will force background to be red. Its either that! Or place these into an array var IDrefsArray=['b0','b1','b2','b3'] for(i=0; i<IDrefsArray.length;i++){ document.getElementById(IDrefsArray[i]).style.backgroundColor="red"; } then loop through each applying required styling. Edited September 20, 2018 by dsonesuk Link to comment Share on other sites More sharing options...
Funce Posted September 20, 2018 Share Posted September 20, 2018 Probable Duplicate of Link to comment Share on other sites More sharing options...
dsonesuk Posted September 20, 2018 Share Posted September 20, 2018 Taking the same course probably, or one is stalking the other? yet! another coincidence, getting alot of these lately Link to comment Share on other sites More sharing options...
Eric_B Posted September 21, 2018 Author Share Posted September 21, 2018 (edited) Ignore what I previously had, I just thought of an Idea and I wanted to check with you. The main idea of what I'm doing is adding to the css system that was in there before I started working on it. Can I set up input/ oninput to call the function if the "not" logical operator was used. like <input [[175]]!=0 oninput function()> then use the document.getElementById(b[[141]]).style.backgroundColor = "(insert color)" in the script. That way for Id's b0-b100, the background is that color when [[175]] != 0. Otherwise the program stays its current course. Edited September 21, 2018 by Eric_B Link to comment Share on other sites More sharing options...
dsonesuk Posted September 21, 2018 Share Posted September 21, 2018 You can do that! but you would still have to go through each #b0 to whatever, changing the background colour, it adds a inline style <div id="b0" style="background-color: red"></div> To the targetted element and because it is applied onto the element itself it will take precedence over css styling in <style>..</style> tags within <head>...</head> To revert it back you would have to go through each changing background to none or setting style to "". Link to comment Share on other sites More sharing options...
dsonesuk Posted September 21, 2018 Share Posted September 21, 2018 if you had a div container wrapping these element you could just add a class name to this elements No background colour <div id="container-wrap"> <div id="b0"></div> <div id="b1"></div> <div id="b3"></div> ..... </div> set to background-color: red <div id="container-wrap" class="colour-me-red"> <div id="b0"></div> <div id="b1"></div> <div id="b3"></div> ..... </div> using css .colour-me-red > div { background-color: red; } by simply adding single class name to wrapping div all the inner div background will be red, remove single class name they will revert to default. Link to comment Share on other sites More sharing options...
Eric_B Posted September 21, 2018 Author Share Posted September 21, 2018 I'll give it a try and see how it goes Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now