Here is source code of the simple page:
<html>
<head>
<title>Test</title>
<script src="jquery-1.4.2.js" type=text/javascript></script>
</head>
<body>
<div id="divText">Original</div>
<script type="text/javascript">
var vText = document.getElementById('divText');
vText.innerText = 'Changed';
alert(vText.innerHTML);
$('divText').text = 'Changed with jQuery';
alert(vText.innerHTML);
</script>
</body>
</html>
"jquery-1.4.2.js" file is in the same folder.
Both alerts display "original" text, text in browser also "Original"...
What is wrong with my code? Any thoughts are welcome.
1. A quick google ( took me 2 seconds ) reveals text is a function, not a property. Use it like .text('lol') as the example directly from the API.
http://api.jquery.com/text/
2. innerText isn't available in every browser/DOM property.
As you pointed out in the title you'll be wanting to change the inner html. You'll also need the $('#divText') selector to get to the div with jQuery.
<html>
<head>
<title>Test</title>
<script src="jquery-1.4.2.js" type=text/javascript></script>
</head>
<body>
<div id="divText">Original</div>
<script type="text/javascript">
var vText = document.getElementById('divText');
vText.innerHTML = 'Changed';
alert(vText.innerHTML);
alert($('#divText'));
$('#divText').html('Changed with jQuery');
alert(vText.innerHTML);
</script>
</body>
</html>
Related
I'm a super novice to javascript, and maybe this has been answered elsewhere but I can't find it because I'm still learning the terminology.
I'm trying to use the content of a div tag to define the css values of a div it is nested within.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function data(){
alert();
var sizeOverride = document.getElementById('newdata').innerHTML
alert(sizeOverride)
}
</script>
</head>
<body>
<div id=sizeChange>
<div id="newdata">
40 <!--The idea is for this to be 40px-->
</div>
</div>
<script type="text/javascript">
document.getElementById("sizeChange").style.fontSize = "sizeOverride" + "px";
</script>
</body>
</html>
Eventually the plan is to use this to define the location and label of a bar on a graph, i.e. there will be in a page that utilizes hotfields to fill in the information in the div. That framework is already built, but the goal is to use that data to define the css values of that div.
There aren't any errors but nothing is happening. It's probably something simple. I appreciate you bearing with me.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function data(){
return parseFloat(document.getElementById('newdata').innerHTML.trim());
}
</script>
</head>
<body>
<div id=sizeChange>
<div id="newdata">
40
</div>
</div>
<script type="text/javascript">
document.getElementById("sizeChange").style.fontSize = data() + "px";
</script>
</body>
</html>
I have a Javascript file named loader.js which contains a function called initialize(). I want to call this function via jQuery. This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="loader.js" ></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a= $(this).text();
window.initialize= function{
};
initialize(a);
});
});
</script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main">
</div>
</body>
</html>
This is loader.js:
function initialize(a) {
$('#main').html= a;
}
I do not know what is wrong with this script, I have debug it jquery is working fine but funtion is not working correctly.
also I want that whenever the function is clicked again the div should be refreshed for example first it contain link1 but when link2 is clicked link1 should be removed inside the div how can i accomplish this task????
thanks in advance
You're not including the loader script. Add <script src='loader.js'></script> before the jQuery code.
The code in loader.js should be inside a jQuery(document).ready callback since it's now using jquery (the html method).
Also as #jiihoo pointed out you should use $('#main').html(a); instead of $('#main').html = a;.
You should change to code of loader.js to this.
function initialize(a) {
$('#main').html(a);
}
Heres the whole thing you could do.
Html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src="loader.js"></script>
</head>
<body >
<h1>welcome to my website </h1>
link1
link2
<div id="main"></div>
</body>
</html>
Loader.js
jQuery(document).ready(function() {
jQuery(document).on("click", ".link", function(e) {
e.preventDefault();
var a = $(this).text();
initialize(a);
});
});
function initialize(a) {
$('#main').html(a);
}
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
});
</script>
</head>
<body>
<div id="content">
Link<br/>
</div>
</body>
</html>
leads to "ReferenceError: Can't find variable: blub"
What most likely obvious thing am I missing?
Try this :
function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
}
Instead of using :
$(function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
});
In your code you are calling a function(callback) without declaring it. this is not correct way to declaration a function.
JavaScript Functions
According your code you don't need to do any thing on document ready because your function trigger when anyone click on anchor Link. And the second thing is your code is not correct see this one $("#content").attr("data-x") Here you trying to get the data-x attribute of content div, but your div does not contains that attribute use this $("a").attr("data-x"):
Try the following code:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function blub() //-- It's declarition of an function
{
var x = $("a").attr("data-x");
$("#content").append(x);
}
</script>
</head>
<body>
<div id="content">
Link<br/>
</div>
</body>
</html>
Working Example
try this:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
function blub()
{
var x = $("#content").attr("data-x");
$("#content").append(x);
}
</script>
</head>
<body>
<div id="content">
Link<br/>
</div>
</body>
</html>
The reason you're getting the error is because it can't find the value .attr("data-x"); on the tag <div id="content">. It simply doesn't exist there. If you're looking to append the data-x="12" as a value inside the <div> tag, you could do something like this:
<html>
<body>
<div id="content">
Link
<br/>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function () {
$('a[data-role="appender"]').click(function (e) {
e.preventDefault();
var x = $(this).data('x');
$('#content').append(x);
});
});
</script>
</html>
The code above attaches the code to the .click function in jQuery and is wired up using the $('a[data-role="appender"]') which makes your mark up a little bit cleaner. Hope this helps out ! The working solution can be found here: http://jsfiddle.net/TrV8z/
The function blub is local to your script because your passed it as an argument to the jQuery object by wrapping your code with $(...);. Your function is executed when the DOM finishes loading, but in a local scope, which you cannot access from an event attribute. The best way to solve your problem would be not to use an event attribute. Moreover, the div #element doesn't have a "data-x" attribute. Its child a element has one. Try this:
$(function() {
$("#targetlink").click(function(e) {
e.preventDefault();
var x = $("#targetlink").attr("data-x");
$("#targetlink").append(x);
})
});
I have a JavaScript variable and I want the HTML div to output 7.
I know it's simple, but I can't seem to get my head around this.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var ball = 3+4;
</script>
</head>
<body>
<div>Have 7 output here</div>
</body>
</html>
Give a specific id to the div like:
<div id="data"></div>
Now use the following JavaScript code.
<script type="text/javascript">
var ball = 3+4;
document.getElementById("data").innerHTML=ball;
</script>
Working code is here
Write your script in body.
Code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Have 7 output here</div>
<script type="text/javascript">
var ball = 3+4;
document.getElementsByTagName('div')[0].innerHTML = ball;
</script>
</body>
</html>
Try this:
<head>
<script type="text/javascript">
var ball = 3+4;
function op()
{
document.getElementById('division').innerHTML=ball;
}
</script>
</head>
<body onload="op();">
<div id="division">Have 7 output here</div>
</body>
Fiddle
HTML
<html>
<body>
<div id="add_results_7"></div>
</body>
</html>
JavaScript
<script>
var ball = 3+4;
document.getElementById('add_results_7').innerHTML=ball; // Gives you 7 as your answer
</script>
Try this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
onload = function () {
var ball = 3 + 4;
var div = document.getElementsByTagName("div")[0];
div.innerHTML = ball;
};
</script>
</head>
<body>
<div>Have 7 output here</div>
</body>
</html>
onload is executed when the page is fully loaded, so the DIV is ready to be manipulated. getElementsByTagName("div") returns a list of all DIVs in the page, and we get the first one ([0]) since there is only one DIV in your code.
Finally, I guess innerHTML doesn't require any explanation :-)
so I have a few links that have a class of 'button', and I am trying to get their text values with the jQuery .text() function, but it is returning nothing at the moment,
code:
$(document).ready(function() {
var tester = $('a.test').text();
alert(tester);
});
HTML:
<a class='test'>TEST</a>
any idea why this might not be working?
This code works, just try....
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<a class="test">Test</a>
<p></p>
<script>
var string = $("a.test").text();
alert(string);
</script>
</body>
</html>