How HTML, JS, and CSS Work

Question

I would like to understand how HTML, JS and CSS work together and reference each other.

I found that HTML can reference CSS using an id link. Example: <div id="left-show"></div>

However, it would be very helpful if someone could clarify the following:

• How would you say that your HTML code refers to a specific JS function.
• As part of the JS function, is it useful to refer to the CSS identifier?
• If the JS function and CSS identifier have the same name, would this create a conflict?

Answer 1

How would you say that your HTML code refers to a specific JS function.

As a rule, you do not.

You include a script (with a <script> element) that accesses the parts of the DOM that you want to interact with (through the document object that the browser will make available to the script).

You can use the addEventListener method to bind a function so that it addEventListener in response to an event (for example, a button click).

As part of the JS function, is it useful to refer to the CSS identifier?

There is no such thing as a CSS id. HTML has identifiers that have many purposes, including matching CSS identifier selectors that are associated with the fragment identifier at the end of the URL and allow <label> to refer to its associated control with the for attribute.

If you want to access a specific element, then an HTML identifier is a good way to identify it (via the getElementById method ).

If the JS function and CSS identifier have the same name, would this create a conflict?

Some problems occur if any type of JavaScript variable (including function) matches the identifier of the HTML element. This is best avoided by avoiding global coverage as much as possible (like this answer ).

Answer 2

Your questions are a bit far cry for a full explanation on a short Q & A site such as SA. You really need to read a lot of material for a complete understanding.

However, some brief simplified answers to get started

1) HTML links to JavaScript through events that trigger JavaScript functions. This is an example of a very simple event in an HTML element that will look for a function in your JavaScript declared as function aJavaScriptFunction(){ } when you click on the button. There are different ways to do this and different types of events, but this is a good place to start.

 <input id="thebutton" type="button" value="A Button" onclick="aJavaScriptFunction();" /> 

2) It very much depends on what you are trying to do, but in general, selecting HTML DOM elements through their identifier is an effective method of choosing them to do something with them. So it could be the JavaScript function that we use in the previous example.

 function aJavaScriptFunction() { var aButtonElement = document.getElementById("thebutton"); // <-- It not a "CSS id" as such, CSS can use the HTML id // .... some more javascript that uses aButtonElement like aButtonElement.style.borderColor = "red"; } 

3) No. JavaScript and CSS do not actually overlap as directly as you think when you start thinking of them as changing HTML. You can do some of the same things with JavaScript as CSS, but in general they happen at different times. This CSS does not conflict with previous JavaScript, although both of them do similar things.

 #thebutton { border-color: blue; } 

Here are all my examples compiled in jsFiddle where you can play with them.

You'd better go somewhere like W3 Schools or Code Academy .