Jump to content
Eric_B

Calling javascript in html

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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?  

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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 by Eric_B

Share this post


Link to post
Share on other sites

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 "".

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...