this is still really new to me. I just need to know where I have gone wrong. I want to change the text inside the DIV when the button is clicked. I followed a youtube link (below), because it's been the easiest to follow so far.
However it's still not working.
https://www.youtube.com/watch?v=pyfKqrjmAl4&list=PLKOf7m55-0tHTUAeef0nFy4FNlC6DBnz8
Here is what I have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="book">
<h1>Price</h1>
<div id="main_section">
<div id="tablef">
<div id="table">
<div id="cell"><h3>Day Time Packages 9am-3pm</h3></div>
</div>
<div id="table2">
<div id="cell2"><h3>Night Time Packages 3pm-Late</h3></div>
</div>
</div>
</div>
<div id="button_section">
<input type="button"id="my_button" value="Click me"/></div>
</div>
</body>
<script type="text/javascript">
$( document ).ready(function() {
$( "#my_button").click(function() {
$("main_section").html("this is the updated text"); //the code that changes the content of the div
});
});
</script>
add hash # before main_section
$( document ).ready(function() {
$( "#my_button").click(function() {
$("#main_section").html("this is the updated text"); //the code that changes the content of the div
});
});
$("#main_section").html("this is the updated text");
the selector should be #main_section because it is an ID, i.e. add # before main_selection
So your JS code becomes
$( document ).ready(function() {
$( "#my_button").click(function() {
$("#main_section").html("this is the updated text"); //the code that changes the content of the div
});
});
Just go through jQuery Selectors for better understanding.
$( document ).ready(function() {
$( "#my_button").click(function() {
$("#main_section").html("this is the updated text"); //the code that changes the content of the div
});
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<title>Untitled Document</title>
</head>
<body>
<div id="book">
<h1>Price</h1>
<div id="main_section">
<div id="tablef">
<div id="table">
<div id="cell"><h3>Day Time Packages 9am-3pm</h3></div>
</div>
<div id="table2">
<div id="cell2"><h3>Night Time Packages 3pm-Late</h3></div>
</div>
</div>
</div>
<div id="button_section">
<input type="button"id="my_button" value="Click me"/></div>
</div>
</body>
You just missed # sign in the jquery selector! ($("#main_section"))
Related
My code works inside an html but not from an external .js file.
In my external .js, I have a function like .animate() and hide() etc. working fine but
just for functions like .text() or .html() it is not working in the external file.
I even deleted all my code and just kept this script, still it didn't work, but when I copy pasted into my html it worked.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body >
<div id="demo"> --- </div>
<button>click me</button>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$("button").click(function(){
$("#demo").html("text");
});
</script>
</html>
Try this in your JS
$(function() {
$("button").click(function(){
$("#demo").html("text");
});
});
your html code is fully messed up!! update your code with the below
HTML
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
</head>
<body>
<div id="demo"> --- </div>
<button>click me</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("button").on("click", function() {
$("#demo").html("text");
});
});
</script>
</body>
</html>
I hope every one familiar with gmail chat where you can pop out your chat window in to new window with its content and if you press the pop-in that new window will be placed in that previous position
I did some work around for that and the following is my problem
I am able to open the content in new window with out its content for example if I have typed in the text box in child.html which is inside the iframe is not showing when on the popout.
Opener
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup checking</title>
<script type="text/javascript">
var winObj;
function openwindow()
{
winObj=window.open("","_blank","height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");
var s=document.getElementById('page').innerHTML;
console.log(s);
winObj.document.write(s);
}
function changeValue()
{
console.log(winObj.document.getElementById('changer').value);
winObj.document.getElementById('changer').value='changer';
}
</script>
</head>
<body>
<div id="page">
<iframe src="child.html" width="100" height="100"></iframe>
</div>
<div id="page1">
<input type="text" id="text1"/>
<input type="button" value="popup" onclick="openwindow()"/>
<input type="button" value="changevalue" onclick="changeValue()"/>
</div>
</body>
</html>
Child
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function openerChange()
{
window.opener.document.getElementById('text1').value="Value changed.."
}
</script>
</head>
<body>
<input type="text" value="" id="changer" />
<input type="button" value="changed" onclick="openerChange()"/>
</body>
</html>
You need a semicolon.
function openerChange()
{
window.opener.document.getElementById('text1').value="Value changed..";
}
I need help. I can't get javascript to dynamically change colour of the three divs listed in code below. I have pasted the full code below...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
.box{
width:100px;
height:100px;
}
</style>
</head>
<body>
<div class="box">
quote 1
</div>
<div class="box">
quote 2
</div>
<div class="box">
quote 3
</div>
<script type="text/javascript">
var bgcolorlist=new Array( "#ff33cc", "#cc33ff")
$(".box").css("background-color",bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]);
</script>
</body>
</html>
You're using jQuery on $(".box").css(), but you haven't linked the library! Add this before your current script:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
Or, simply don't use jQuery at all:
var boxes = document.querySelectorAll('.box');
for(var i=0; i<boxes.length; i++) {
boxes[i].style.backgroundColor = bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)];
}
I would like to create multiple strings within this same function and make this code more useable across website.
My JS code look like this:
function() {$(".tool-tip-wrapper").click(function () {
$(".tool-tip",this).html("<img src='/images/ui-elements-sprite.png' class='top-arrow'><p>This is string one.</p><div class='close'></div>").toggle('fast');
});
My html code look like this:
<div class="tool-tip-wrapper"> click me
<div class="tool-tip"></div>
</div>
Below markup will solve the issue.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js" language="javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tool-tip-wrapper").click(function(){
$(".tool-tip",this).html("<p>"+this.title+"</p><div class='close'></div>").toggle('fast');
});
});
</script>
</head>
<body>
<div class="tool-tip-wrapper" title="This is string one.">
click me
<div class="tool-tip"></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function buttonClicked(e)
{
alert(e.data.color);
}
jQuery('#but1').bind('click',{color:'red'},buttonClicked);
jQuery('#but2').bind('click',{color:'blue'},buttonClicked);
</script>
</head>
<body>
<br/><br/><br/><br/>
<div align="center">
<form action="" method="get">
<input id="but1" type="button" value="Red" />
<input id="but2" type="button" value="Blue" />
</form>
</div>
</body>
</html>
The alert doesnt get triggered on the click..why is that?
This works:
function buttonClicked(e) {
alert(e.data.color);
}
$(document).ready(function(){
jQuery('#but1').bind('click',{color:'red'},buttonClicked);
jQuery('#but2').bind('click',{color:'blue'},buttonClicked);
});
http://jsfiddle.net/RTXxY/
You have the script placed above where the elements are defined so when the code executes, there's nothing to bind to. The easiest solution is to only execute the script when the document is ready.
jQuery(function($) {
$('#but1').bind('click',{color:'red'},buttonClicked);
$('#but2').bind('click',{color:'blue'},buttonClicked);
}