Javascript works but JQuery does not?

Question

My code is like this:

<script> 
    var name = document.getElementById("nusname").innerHTML;
    document.getElementById("uName").innerHTML = "Welcome, " + name;
    $('#uName').text("AsgufHFBS");
</script>

The 3rd line

document.getElementById("uName").innerHTML = "Welcome, " + name;

works but the 4th line

$('#uName').text("AsgufHFBS");

does not.

I have tried replacing this with

$(document).ready(function(){
    $('#uName').text("AsgufHFBS");
});

but it still does not work.

So my question is this: Why does the javascript work but the not the JQuery version?

have you loaded the jQuery library? correctly? i.e. show the HTML for the ` — Jaromanda X, Aug 04 '15 at 11:14
is there an element with id `uName`... is there an error in the console — Arun P Johny, Aug 04 '15 at 11:14
just a thought, Is this a textbox or label?.For textbox it should be val not the text. — threeleggedrabbit, Aug 04 '15 at 11:20
@A.Wolff Textarea allows the innerHTML, just tested out in answer box — threeleggedrabbit, Aug 04 '15 at 11:24
Dupe of: http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code — A. Wolff, Aug 04 '15 at 11:32
@A.Wolff I think val() will work with input elements and text() will work with the labels,spans,divs. — threeleggedrabbit, Aug 04 '15 at 11:33
@A.Wolff But the way javascript and jquery works different, I hope.The innerHTML is something which will be available for all HTML elements and innerHTML directly writes into the element itself. — threeleggedrabbit, Aug 04 '15 at 11:42
@Hsakarp `input` is void element, it cannot contains any content so innerHTML has no effect https://jsfiddle.net/6h6982w6/ — A. Wolff, Aug 04 '15 at 11:46

score 4 · Accepted Answer · answered Aug 04 '15 at 11:18

4

Add this in the <head> of your document:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Or simply update your code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script> 
    var name = document.getElementById("nusname").innerHTML;
    document.getElementById("uName").innerHTML = "Welcome, " + name;
    $('#uName').text("AsgufHFBS");
</script>

answered Aug 04 '15 at 11:18

DDan

8,068
5
33
52

@JamesTan you should wrap the code inside doc ready block or move this script block at the end of body. – Jai Aug 04 '15 at 11:23

score 0 · Answer 2 · answered Aug 04 '15 at 11:21

Assuming that you have already embedded the jQuery library correctly and it's still not working, try this:

jQuery('#uName').text("AsgufHFBS");

If that works it means the $ shorthand is likely reserved by another script on your page. You can either correct that issue, or just preface jQuery commands with "jQuery" rather than "$" on that page.

score 0 · Answer 3 · answered Aug 04 '15 at 11:22

I have coded your code into jsFiddle and it works fine, however did you include jQuery in your file? If you press f12 in your browser do you get any console logs? If so please provide them.

But here is the jsFiddle version which does include jQuery

jsFiddle : https://jsfiddle.net/bn788ff4/

Html

<div id="nusname">hello</div>
<div id="uName">username</div>

Javascript / jQuery

var name = document.getElementById("nusname").innerHTML;
document.getElementById("uName").innerHTML = "Welcome, " + name;
$('#uName').text("AsgufHFBS");

To include jQuery you can use the hosted version by google

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Link https://developers.google.com/speed/libraries/

Rajan Goswami · Answer 4 · 2015-08-04T11:28:05.837

0

You are probably missing Jquery library files. Please attach the foolowing to the <head> section of your page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

and replace the 4th line of your code with:

$('#uName').html("AsgufHFBS");

edited Aug 04 '15 at 11:28

answered Aug 04 '15 at 11:24

Rajan Goswami

769
1
5
17

Javascript works but JQuery does not?

4 Answers4