0

Very new to JS and Jquery as well as StackOverflow so please forgive me if I don't "do this the right way". I think this is only my 4th question.

I have some code that I have (admittedly) plagiarized from snippets found in various places. I'm struggling in trying to understand a couple of (I think) very basic concepts...just did not know how to reverse "look up" a piece of code in order to find the answer on my own.

Within my JS function I do some conditional checking and set various strings based on which radio button the user selects.

$("#showme").text("100.00");

Anyplace that I want to reference this in HTML is done like so:

<div id=showme>

This is working like a champ...no problem.

My question is this: Am I actually setting a JS var named "showme" as a string variable or is this strictly a way to just plug in some text to an HTML element. In other words...no var is getting set but this structure simply serves as a pipeline to plug in some text?

I know this is stupid simple for most of you guys...sorry! I'm trying to learn.

RCurtis
  • 115
  • 3
  • 11

5 Answers5

2

Roughly:

$ is a function.

That function takes a selector, e.g., an ID of a DOM element, specified by "#showme".

$ returns a collection of DOM elements (or an empty collection, or for an ID, a single element).

The text method sets (or retrieves) the text of a DOM element. It's called on each of the DOM elements.

You're not setting any variables explicitly: you use a string immediate ("#showme") as the selector argument to $. jQuery takes the string immediate passed to text and injects it into the DOM elements selected by $.

Dave Newton
  • 158,873
  • 26
  • 254
  • 302
2

With this markup code:

<div id="showme">

you instruct the browser that at a specific place in the DOM (document object model) it should add a node of type div and with the id attribute as "showme".

With this JavaScript/jQuery code:

$("#showme")

you query the document for all the elements with the id attribute equal to "showme". The result of that call will be a jQuery object which is similar to an Array which will have the elements that match the selector (id==="showme") as numbered keys and some more methods on top of that. One of the methods is the text() method.

With this JavaScript/jQuery code:

$("#showme").text("100.00");

you set the text content of each element with the id==="showme" to "100.00".

To sum up, it seems you have your logic slightly backwards. You don't set a variable to be equal to "showme", instead you set a property on one element created by the browser. The JavaScript code acts on the DOM (on your HTML elements) with the actions you code (in this case changing the text value). The flow is the following: markup the elements you're interested in and then do something with them. Setting the id is somewhat optional. You can act on any node in the DOM based on its relative position, but that approach breaks easily the longer the addressing chain is, that is why it is prefered to mark up specific elements with id's and classes of elements with classes :).

Tibos
  • 27,507
  • 4
  • 50
  • 64
  • Thanks! That helps a lot. Yes, I always felt that it seemed "backwards" but couldn't seem to hit on the right syntax to show my "number" var in the div element. I stumbled upon $("#showme").text("100.00"); and saw that it worked so I just kept building poor code on top of poor code! (Story of my life!) Assuming that I really had a float var showme (set to say, 100.0)...what would the proper syntax be of showing that in the HTML DIV formatted like a price? – RCurtis Dec 13 '13 at 13:52
1

No. "showme" is just an ID - which must be unique - you assign to the element. Any HTML-element can have an ID. Consider the ID as a phonenumber to the different elements in your HTML markup. 

document.getElementById('showme').innerText='100.00';

is the same as

document.querySelector('#showme').innerText='100.00';

which is the same as

$("#showme").text('100.00');

jQuery is primarily just a shorthand for interacting with the DOM.

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
0

The id tag should be quoted:

<div id="showme">

Your javascript (well jQuery actually) is saying find an element whose Id = "showme" and set it's text value to "100.00"

I would take a look at some basic jQuery tutorials here to get you started.

connectedsoftware
  • 6,987
  • 3
  • 28
  • 43
  • It doesn't need to be quoted anyway, although IMO it *should* be. They *are* mandatory in XHTML. Sometimes they require quotes, e.g., multiple classes: `class="foo bar"` requires quotes, otherwise the space between the classes would be lexed as separate tokens. – Dave Newton Dec 13 '13 at 13:30
  • @DaveNewton agreed although I just treat as best practice – connectedsoftware Dec 13 '13 at 13:32
  • So...it's not really setting a variable to "100.00" then...it's acting strictly as a "pipeline"? Right after the line: $("#showme").text("100.00"); I could come back and say "showme = "100.0" and "really" set it as a var and use it in calcs? – RCurtis Dec 13 '13 at 13:32
  • The first part of the javascript returns any matching elements and the second part performs an action - in this case setting the text – connectedsoftware Dec 13 '13 at 13:33
  • @user3066388 Except that it's a string, and coercion will play tricks on you in JS, sure. Although you should do it *before* the jQuery call so you can reuse it in the call and your calculations. – Dave Newton Dec 13 '13 at 13:33
  • @Dave Newton -- Sorry...I meant to say showme = 100.0 so that it would assign as float. Recap: I can plug in any random text to the HTML using the $("#showme").text("anything I want"); method and have a totally different value and/or typein the separate showme variable? – RCurtis Dec 13 '13 at 13:40
  • There really isn't any variable here. You could assign the jQuery results to a variable, say `var $showMe = $("#showme"); $showMe.text("100.00");` But even then, the value of this variable is not "100.00"; it's actually a jQuery object wrapping a document node (or in other circumstances multiple nodes.) – Scott Sauyet Dec 13 '13 at 13:51
  • @user3066388 Calling jQuery with a string selector has nothing to do with JS variables at all. – Dave Newton Dec 13 '13 at 14:28
0

You shouldn't have multiple tags with the same ID attribute. ID's are meant to be unique. Classes are meant to be repeated.

jQuery is similar to CSS with the majority of its selectors. I would recommend reading over this post about the differences between ID's and classes, and usage examples with CSS. Then maybe that can help you learn CSS and jQuery!

Difference between id and class in CSS and when to use it

Community
  • 1
  • 1
rawr
  • 31
  • 2