Javascript shorthand syntax for getElementById() not working

Question

I've found an answer to a previous question about javascript short hand for this https://stackoverflow.com/a/6398848/1406888 but it is not working for me. I don't understand it because when I use the same short hand in the firefox developer's console it works.

Here's a short example of the code I'm using

<div id="list1">
<li>pres</li>
<li>mike</li>
<li>camel</li>
<li>week</li>
</div>

<p></p>
<div id="list2">
<li>time</li>
<li class="test">era</li>
<li>people</li>
<li>life</li>
</div>

<p></p>
<div id="list3">
<li>time</li>
<li class="test">era</li>
<li>people</li>
<li>life</li>
</div>

<script type="text/javascript">

var testId = document.getElementById("list1");
testId.style.borderStyle="solid";
$("#list2").style.borderStyle="solid";

$("list3").style.borderStyle="solid";

</script>

The only one that works is the list1 border. The other ones fail. Can somebody please correct me.

I now have a working template. Here is my code:

<div id="list1">
<li>pres</li>
<li>mike</li>
<li>camel</li>
<li>week</li>
</div>

<p></p>
<div id="list2">
<li>time</li>
<li class="test">era</li>
<li>people</li>
<li>life</li>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

var testId = document.getElementById("list1");
testId.style.borderStyle="solid";
//$("#list2").style.borderStyle="solid";   this does not work
$("#list2").css("border-Style","solid");   this works.
</script>

Just so I get this straight. There is not substitute for getElementById??? I thought it was an interchangable short-hand, but in my example it only works with the .css property of the JQuery shorthand.

This is part of the problem when people give jQuery answers when there's no mention of it in the question. The answer is off topic, and confusing to new developers. That answer is not using the native API, but is using a JavaScript library. — , Jun 27 '12 at 05:09

score 3 · Answer 1 · answered Jun 27 '12 at 05:09

3

Sometimes when I just want to be able to use the $ as a shorthand for document.getElementById without actually requiring the functions of major javascript libraries, I'll just toss this in the page:

function $(a){return document.getElementById(a);}

Saves a ton of typing.

answered Jun 27 '12 at 05:09

Sean Johnson

5,443
2
14
22

Could get confusing later on, though, because your `$('div')` will do something else than jQuery's (which needs the `#`). Better keep it upwards compatible if you want to include a library eventually. – Thilo Jun 27 '12 at 05:12
Very clever, but I'd still like to know why mine is not working as it is, because I see others use it with no problems. – Klik Jun 27 '12 at 22:35

score 0 · Answer 2 · answered Jun 27 '12 at 05:06

0

You need to have some library to provide this shortcut (like jQuery). It is not built into the core language or your browser.

Also, for jQuery, it would be $('#list3') (you can use all kinds of selectors, not just the node id).

answered Jun 27 '12 at 05:06

Thilo

241,635
91
474
626

score 0 · Answer 3 · answered Jun 27 '12 at 05:07

0

You will need to include JQuery on your page to use this notation.

answered Jun 27 '12 at 05:07

blearn

1,113
10
17

woemler · Answer 4 · 2012-06-27T23:42:28.583

0

The syntax that you have described here requires the jQuery javascript library. You have to download and import the library, or link directly to the jQuery code bank in your HTML before this will work. Add the following line to the top of the head in your HTML file:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

edited Jun 27 '12 at 23:42

answered Jun 27 '12 at 05:09

woemler

6,659
6
38
65

score 0 · Answer 5 · answered Jun 27 '12 at 05:09

append jquery library, $ is not in the core functionality --

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

var testId = document.getElementById("list1");
testId.style.borderStyle="solid";
$("#list2").style.borderStyle="solid";

$("list3").style.borderStyle="solid";

</script>

OR if your hard to JS then do it in this way----

var testId1 = document.getElementById("list1");
var testId2 = document.getElementById("list2");
var testId3 = document.getElementById("list3");
testId1.style.borderStyle="solid";
testId2.style.borderStyle="solid";
testId3.style.borderStyle="solid";

I tried copying your line to include the jquery source and it does not work still. — Klik, Jun 27 '12 at 22:39

score 0 · Accepted Answer · answered Jun 27 '12 at 05:20

0

IMO: you need to do it like this in jquery

$("#list2").css("border-Style","solid")

$("#list3").css("border-Style","solid")

and make sure in jquery you add # with Id if you are accessing an element with id.

answered Jun 27 '12 at 05:20

Raab

31,764
4
47
63

Yes, I see... I need to include the jquery and I have to use that format. I thought that I've seen $('#list2') used in direct place of the getElementById method. Is that not true? – Klik Jun 27 '12 at 22:43

score 0 · Answer 7 · answered Jun 27 '12 at 05:22

0

Try setting the border style using the jquery css method.

<script type="text/javascript">
  $(document).ready(function(){
    $("#list2").css("border-style","solid");
  });
</script>

answered Jun 27 '12 at 05:22

Phaedrus

8,173
24
28

Javascript shorthand syntax for getElementById() not working

7 Answers7