CODEWITHSUNDEEP
javascripthtmlcss
George Jester
George Jester

Reputation: 181

How HTML, JS and CSS work together

I would like to understand how HTML, JS and CSS work together and reference one another.

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

However, it would be much appreciated if someone could clarify the following:

  1. How would you tell your HTML code to reference a specific JS function.
  2. Within a JS function, is it a good practice to reference a CSS id?
  3. If a JS function and CSS id share the same name, would that create a conflict?

Upvotes: 4

Views: 4893

Answers (2)

Klors
Klors

Reputation: 2674

Your questions are a bit far-reaching for a full explanation on a concise Q&A site like SA. You would really need to read a lot of material for a full understanding.

However, some brief simplified answers to get you started

1) HTML links to JavaScript via events that trigger JavaScript functions. This is an example of a very simple event on 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 event, but this is a good place to start.

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

2) It very much depends what you are trying to do, but in general selecting HTML DOM elements via their ID is an efficient method of selecting them to do something with them. So this might be the JavaScript function that we're using in the previous example.

function aJavaScriptFunction()
{
    var aButtonElement = document.getElementById("thebutton"); // <-- It's 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 don't really directly overlap as such in the way you might be thinking, when you're beginning, think of them both as altering the HTML. It is possible to do some of the same things with JavaScript as CSS, but in general they happen at different times. This CSS doesn't conflict with the previous JavaScript, though they both do similar things.

#thebutton { border-color: blue; }

Here are all my examples put together into a jsFiddle where you can play with them.

You'd be best off visiting somewhere like W3 Schools or Code Academy.

Upvotes: 0

Quentin
Quentin

Reputation: 943108

How would you tell your HTML code to reference a specific JS function.

Generally, you don't.

You include a script (with a <script> element) that accesses whatever parts of the DOM you want it to interact with (via 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 will run in response to an event (such as a button being clicked).

Within a JS function, is it a good practice to reference a CSS id?

There is no such thing as a CSS id. HTML has IDs which have a multitude of purposes including being matched by CSS ID selectors, being linked to with a fragment identifier on the end of a URL and allowing a <label> to reference its associated form control with the for attribute.

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

If a JS function and CSS id share the same name, would that create a conflict?

There can be some issues if JavaScript variables of any kind (including functions) match the ID of an HTML element. This is best avoided by staying away from the global scope as much as possible (as per this answer).

Upvotes: 7

Related Questions