What I am trying to accomplish is, using jQuery, dynamically replace the content (generated from another javascript) of div tag with id="Test".
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(function(){
$("#Test").html('<b>test content</b>');
});
</script>
</head>
<body id="testAgain">
begin
<div class="scrollable">
<div class="items" id="Test">
</div>
</div>
end
</body>
</html>
As you can see,
$("#Test").html('<b>test content</b>');
replaces the html code of div tag with id="Test" with html code
<b>test content</b>
this works perfectly fine. I am getting rendered html as
begin
test content
end
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
function TestScript(){
document.write('<b>test content</b>');
};
</script>
<script type="text/javascript">
$(function(){
$("#Test").html(TestScript());
});
</script>
</head>
<body id="testAgain">
begin
<div class="scrollable">
<div class="items" id="Test">
</div>
</div>
end
</body>
</html>
Here,
$("#Test").html(TestScript());
replaces the html code of div tag with id="Test" with generated html from javascript
TestScript()
I am getting rendered html as
test content
It replaces the entire content of the html file. How to resolve this problem?
Kindly help.
Thanks,
John
Try this:
<script type="text/javascript">
function TestScript(){
return '<b>test content</b>';
};
</script>
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 created this very basic example of a jquery html() function but it doesn't work:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var html = "<div>Test</div>";
$('#TestDiv').html(html);
</script>
</head>
<body>
<div id="TestDiv" style="height:50px;width:50px;border:1px solid black;"></div>
</body>
</html>
View on JSBin
Any idea what the issue might be?
You miss put it on docmuent ready
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready( function()
{
var html = "<div>Test</div>";
$('#TestDiv').html(html);
}
);
</script>
</head>
<body>
<div id="TestDiv" style="height:50px;width:50px;border:1px solid black;"></div>
</body>
</html>
put your script after div tag
or if you want to keep the script within the head tag then you need to included it in $(), like so:
I have created a VERY simple program on a VERY simple html file. I wish to simply find out how to link javascript to html and css. Here follows my example code:
(index.html)
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="script.js"></script>
</body>
JS:
$(document).ready(function(){
$(".hide_btn").click(function(){
$("p").slideUp();
});
$(".show_btn").click(function(){
$("p").slideDown();
});
});
CSS:
.picture { display: none; }
Now with this code, I am attempting to use two buttons to show and hide a picture of a fish...I can't seem to get it to work however, and I believe it has something to do with how I am linking my files. Please Help!
Based off of your comment in your question it would appear that you are using jQuery but you do not have jQuery as part of your source code.
You will need to include the jQuery source above script.js.
Here is an example of how it should look like using Google CDN for the jQuery library:
<head>
<title>JavaScript</title>
<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div class="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT"/>
</div>
<button class="show_btn">Show</button>
<button class="hide_btn">Hide</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</body>
try this in javascript
<html>
<head>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show();">Show</button>
<button class="hide_btn" onclick="hide();">Hide</button>
<script type="text/javascript" >
function show(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="block";
}
function hide(){
var imgdiv = document.getElementById("picture");
imgdiv.style.display="none";
}
</script>
</body>
</html>
I would definitely use jQuery for something like this. Here's a Plunker that shows how you can accomplish this.
http://embed.plnkr.co/DwTwNuF162rfgcQOdT7u/preview
<html>
<head>
<script data-require="jquery#*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="picture" id="picture">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRZAb6KcZrNTBM1UflIMAQfAGuTKN0XWYFsiTgm5M5NRwXO_udT" />
</div>
<button class="show_btn" onclick="show()">Show</button>
<button class="hide_btn" onclick="hide()">Hide</button>
</body>
<script>
function show() {
$('#picture').show();
}
function hide() {
$('#picture').hide();
}
</script>
</html>
If you are using jquery you also need to link the jquery source above your .js link,
here is the google cdn (so you dont have to download it):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
First things first:
Include this in your <head>:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
If you're on Chrome try using the developer tools; right click on the page then inspect element. On the developer tools pane, select the CONSOLE tab which logs all your errors in your javascript
And try this in your script:
$(document).ready(function() {
$(".show_btn").click(function() {
$(".picture").css('display', 'block');
});
$(".hide_btn").click(function() {
$(".picture").css('display', 'none');
});
});
Also I've noticed that you have div.picture display set to "none".
All that you need to do is the following
<script type="text/javascript"></script>
You can write javascript inside the script tags. (if you want to add javascript in HTML
the following is to link it to another file.
<script src="path to other file" > </script>
test.html:
<html>
<body>
<script type="text/javascript" data-main="app" src="require.js" />
<div id="box">
</div>
</body>
</html>
and app.js:
require(["domReady"], function (dom_ready) {
dom_ready( function () {
document.getElementById('box').innerHTML = 'test';
});
});
I dropped the require.js and domReady.js files in the same directory:
https://raw.githubusercontent.com/requirejs/domReady/latest/domReady.js
http://requirejs.org/docs/release/2.1.11/minified/require.js
My browser does not display the "test" string in the webpage when I open it (tried with FF and chromium).
However, the "test" string is displayed if I add an empty tag:
<html>
<body>
<script type="text/javascript" data-main="app" src="require.js" />
<script type="text/javascript"></script>
<div id="box">
</div>
</body>
</html>
What did I miss ?
Close the script-tag properly.
<script type="text/javascript" data-main="app" src="require.js"></script>
Is it possible to change the text inside a separate div from a mouseover over a separate link? Would anyone know where to direct me or show me an example?
It takes a simple javascript to do this
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
function changeContent()
{
document.getElementById("myDiv").innerHTML='New Content';
}
</SCRIPT>
</HEAD>
<BODY>
<div id="myDiv">
Old Content
</div>
Change Div Content
</BODY>
</HTML>
Here an small example with jquery:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".pass").hover(
function () {
$(".change").text("MOUSE HOVER");
},
function () {
$(".change").text("DIV TO CHANGE");
}
);
});
</script>
</head>
<body>
<div class="pass">PASS YOUR MOUSE OVER HERE</div>
<div class="change">DIV TO CHANGE</div>
</body>
</html>
You could use a Javascript library like JQuery
for example:
$('#youranchorid').mouseover(function() {
$('#yourdivid').html("Your new text");
});
check the API