JQuery method not giving the expected result - javascript

Thiis is my code:
$("p").css("background-color", "yellow");
alert( $("p").css("background-color"));
The alert is returning undefined instead of the color.
I tried on both Google Chrome and Firefox. I have extracted this from the w3c website and in their example, it works (I am even using the same jQuery version).

Either you're calling that code before jQuery loads, or you don't have a <p> tag in your document at the time the code is executed.
To test the first case, move the script to the window's onload event handler. This code will be run only after all scripts have been loaded.
window.onload = function(){
if(window.jQuery){
$("p").css("background-color", "yellow");
alert( $("p").css("background-color"));
}
else{
alert("jQuery is not loaded");
}
}
If the alert jQuery is not loaded opens, you've identified the problem
To test the 2nd case, just be sure to include a <p> tag in your document before you try to change its CSS.

Works perfectly fine in this JSFiddle.
$("p").css("background-color", "yellow");
alert( $("p").css("background-color"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
test
</p>
Verify that you have a <p> tag in your HTML (like in my fiddle), and check if you have JQuery included, like so:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>

try this instead of your script.
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color", "yellow");
alert( $("p").css("background-color"));
});
});
for html try this
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
this is basic Javascript. you should need to define which html property you want to change using Javascript.

Make sure you've included JQuery source in the head tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
The code's working fine on JSFiddle.
checkout: here

never mind, I found the reason it isn't working. I created the p AFTER this instruction, so it was actually selecting nothing.

Related

Simple jQuery .load Example Not Working

I'm sure this is a fairly basic question, but I'm relatively new to jQuery so was hoping someone might be able to help.
Basically, I need to load an HTML snippet into a page. This works fine when the snippet contains just HTML, but not when it contains a script.
I've stripped down my code to the bare minimum for clarity. This is index.html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<h1>Heading</h1>
<div id="banner"></div>
<script>
$(document).ready(function(){
$('#banner').load('banner.html');
});
</script>
</body>
</html>
And banner.html contains just the following (as an example):
<h2>Subheading</h2>
<script>
document.write('Hello');
</script>
The script is executed, but for some reason it strips out the rest of the HTML in both index.html and banner.html (i.e. it just displays "Hello" and nothing else).
Any help greatly appreciated!
document.write after the page has load writes to the document, and at the same overwrites everything else currently in the document, that's why you end up with only the string "hello".
Just remove the document write :
<h2>Subheading</h2>
<p id="test"></p>
<script>
document.getElementById('test').innerHTML = 'hello';
</script>
that is becuase when banner.html is loaded .. the script inside banner.html get executed, which writes "hello" in your document(the document here is your entire index.html)
one way to understand this is by replacing certain content of banner.html rather than the whole document.
banner.html
<h2>Subheading</h2>
<div id="divID"></div>
<script>
$('#divID').html('hello'); //using jquery .. gets the element with id as divID and replace the HTML
</script>
here i am replacing just the div whose id is "divID" rather than replacing the enrite document

Append jQuery code into iframe does not work

I encounter a very strange problem!
I wrote the following code:
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<textarea id="code">
<div id="hello">Hello world!</div>
<script type="text/javascript">
$(function(){
$("#hello").css({"border":"solid 3px red"});
alert($("#hello").size());
});
</script>
</textarea>
<iframe src="iframe.html"></iframe>
<script type="text/javascript">
$(function(){
$("iframe").on("load",function(){
$(this).contents().find("body").append($("#code").val());
});
});
</script>
The "iframe.html" file contains only a call to the jQuery library.
The result is that "Hello world!" is displayed in the iframe but without red border! It seems that $("#hello") does not work. In fact, if I do alert($("#hello").size()), I get "0".
Do you have any idea?
Thanks!
Edit: Add "alert".
$(this).contents().find("body").append($("#code").val());
Only gets the current value so probably it wont copy over any css value that is linked to it.
http://api.jquery.com/val/
What I suggest is testing it in 1 file first to see what it does so remove the iframe part for now and check the .size() on 1 file. that way you know how the .val and .size() behave on your #hello.
Try this as the script under the :
<script type="text/javascript">
$(function(){
$("iframe").on("load",function(){
alert($("#code").val());
var scriptx = $("#code").val();
$(this).contents().find("body")[0].innerHTML = scriptx;
});
});
</script>
});
</script>
I think the html format is wrong. You are putting the div inside the text area and inside any text area if you put some html elements then those are simply taken as some text and that html elements are not going to render in browser.
So you can put the the div element out side the text area.
<textarea id="code"></textarea>
<div id="hello">Hello world!</div>
I hope this will work.. :)

Using document.getElementById() inside object, works in JSFiddle, TypeError in actual. Why?

I have a code that works in JSFiddle but doesn't work when I save the HTML+JS locally and test it locally. I can't figure out what's wrong with the code. Here is my JSFiddle
http://jsfiddle.net/LLUAB/
And here is the actual code, not very long
<!doctype html>
<html>
<head>
<script type="text/javascript" language="Javascript">
function Composer(foobox) {
this.foobox = document.getElementById(foobox);
this.foobox.onkeydown = function(){window.alert("hello")};
}
var myComposer = new Composer("foo");
</script>
</head>
<body>
<textarea id="foo"></textarea>
</body>
</html>
Because in JSFiddle your script is placed inside window.onLoad event handler by default. While in your case getElementById() method is unable to find not yet loaded element.
Put all your script right before closing </body> tag and it will work:
<script type="text/javascript">
// ...
</script>
</body>
It works in Fiddle because of onLoad option specified here. The problem is that when new Composer line is fired, there's no such element in the DOM yet. Wrap this line in DOMReady handler - or move its invokation to the end of <body> element.
It's because your dom is not ready yet
function Composer(foobox) {
this.foobox = document.getElementById(foobox);
alert(this.foobox); --Prints null
this.foobox.onkeydown = function(){window.alert("hello")};
}
Working code here. http://jsfiddle.net/LLUAB/1/

How can I save the contents of a textarea as a variable using javascript in an external document?

I have tried, as many have suggested, saving a variable as the .value or .innerHTML of an ID, found by using document.getElementById. Here is all of my HTML:
<html>
<head>
<title>write</title>
<script type="text/javascript" src="g.js"></script>
<link rel="stylesheet" type="text/css" href="g.css" />
</head>
<body>
<div id="box">
<textarea id="txt" placeholder="placeholder. type here.">text text</textarea>
</div>
</body>
</html>
and here is my javascript, currently meant to fire an alert that contains the text in the text area – right now that would be, text text:
function run(){
var txt = document.getElementById('txt');
alert(txt);}
run()
Right now, loading the page fires an alert with the text Null and adding .value after getElementById('txt') results in no alert. Many thanks in advance.
The problem is that your javascript is executing before the DOM is constructed. When you load the JavaScript file in the <head> of the document, it is executed immediately, before the <textarea> tag has been created.
Try moving your script block below the textarea, just before the </body> tag.
Here's an example: fiddle
After the DOM is constructed you can use getElementById just as have and can access the contents of the textarea with the value attribute. All of this is in the fiddle above.
Alternatively, you can wrap your run() method call with a library that provides an event when the DOM becomes ready. jQuery's example would be:
$(function () {
// code you want to execute when the DOM is ready.
run();
});
function run() {
var txt = document.getElementById("txt").value;
alert(txt);
}
$(document).ready(function(){
run();
});
check this jsfiddle link
You are not getting textarea value because your javscript function is getting executed before there's value in DOM
or using javascript
function run(){
var txt = document.getElementById("txt").value;
alert(txt);
}
window.onload = run();
More about window.onload
The javascript below works in firefox. In fact, if you click the answer button for this question, you can try it out in firebug on this very page...
var textArea = document.getElementById("wmd-input"); // #wmd-input is the text input where your answer goes...
alert( textArea.value );
Make sure you enter some text first, of course.
While you're at it, you should give jQuery a try:
alert( $("#wmd-input").val() );
Or better yet,
console.log($("#wmd-input").val());
Hope that helps.

Background-color not changing by jQuery

I have jQuery on my webpage.
I am changing background color of a div.
Its not working.
<script type="text/javascript">
$("#gridbox").css({'background-color':'black'});​
</script>
Your code should work, try using document ready handler.
$(document).ready(function(){
$("#gridbox").css({'background-color':'black'});​
})
http://jsfiddle.net/WcQse/
Its possible your script is running before the DOM has loaded. Try:
<script type="text/javascript">
$(document).ready(function(){
$("#gridbox").css({'background-color':'black'});​
});
</script>
-- Demo --
Try this
If you are using ASP.NET then your Client ID might change depending on the use of Master Pages in that case you can try something like this.
$('#<%= gridbox.ClientID %>' ).css('background-color','black');​
If it is just a div then you should wrap it in document.ready() method
$(document).ready(function(){
$('#gridbox').css('background-color','black');
});
Demo
The same code that you are using is working fine for me
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
</head>
<body>
<div id="gridbox" style="background-color:red;">gridbox</div>
<script type="text/javascript">
$("#gridbox").css({'background-color':'black'});
</script>
</body>
</html>
so you should first include the jquery library, then put the javascript file after the div that you want to change the background color.
Try:
$("#gridbox").css("background-color", "black");
Edit:
Add a document ready function, this will execute the css change after the DOM has loaded.
$(document).ready(function() {
$("#gridbox").css("background-color", "black");
});
Note: Ensure you have the jQuery JavaScript file referenced in the page.

Categories

Resources