<!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 del () {
var x= new Date ();
var date= x.getDate ();
var hours= x.getHours();
var minutes=x.getMinutes();
var sec= x.getSeconds();
document.write(minutes +":"+ sec )
if (minutes=="33"){
//alert ("time is over")
document.getElementById('airtel').removeChild(airtel);
}
//}
</script>
</head>
<body>
<div id="airtel">
<div id="vodafone">vodaphone</div>
<div id="idea">idea</div>
</div>
</body>
</html>
Using jQuery Library removes the pain from using Javascript for handling the DOM, i sugest you give it a try.
But if you just want that working in native Javascript, what you need to do is traverse to the parentNode and then remove the child you want.
var element = document.getElementById('airtel');
element.parentNode.removeChild(element);
Maybe you are better off using jQuery with it's remove method for this.
You should get the element of 'airtel' then remove it from it's parent, which is the Body tag.
var airtel= document.getElementById('airtel');
document.getElementsByTagName('body')[0].removeChild(airtel);
Related
How do I get a variable in an iframe from the parent if I do not know how many iframes are on the parent page and the order of the one in question. For instance, I know the iframe in question is the second one, so I can select windows.frames[1]. But if I didn't know know it was the second one, how would I select it by ID.
<!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=ISO-8859-1" />
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#getValues').click(function(){
//This works, but I don't want to select the iframe by the number since I don't know it.
console.log(
window.frames[1],
window.frames[1].window,
window.frames[1].window.getMe
);
console.log(
window.frames['myIFrame'],
window.frames['myIFrame'].document,
window.frames['myIFrame'].window,
document.getElementById('myIFrame'),
document.getElementById('myIFrame').window
);
});
});
</script>
</head>
<body>
<button id="getValues">getValues</button>
<div><iframe src="otherIframe.html"></iframe></div>
<!-- iframe3_get.html only sets global variable getMe to something. -->
<div><iframe id="myIFrame" src="iframe3_get.html"></iframe></div>
</body>
</html>
In the bellow example, getM1 and getMe2 will be equal. This doesn't seem to be a very good answer, but it is the only one I have. If it is a bad answer and you elect to vote it down, please provide a better answer.
$('#getValues').click(function(){
var getMe1=window.frames[1].window.getMe;
for (var i = window.frames.length - 1; i >= 0; i--) {
if(window.frames[i].frameElement.id=='myIFrame'){
var getMe2=window.frames[i].frameElement.getMe;
break;
}
}
});
I am looking to build a webpage that submits into a database (.asp) but also calculates a percentage.
The percentage amount is 8%.
Ideally I want the user to type an amount in an input box (for example lets say £100)
Then underneath there is another input box which automatically caluates the £100 + 8% (so £108)
I haven't got a clue how to start so I haven't got any code
Live jsFiddle: http://jsfiddle.net/5mB3Q/
This is your jQuery:
$("#val").on('keyup', function(){
$("#incPerc").text(parseInt($(this).val())*1.08);
});
you might want to use a library to limit the input to digits only.
something like this: Limit Textfield Input to digits only
added the second input http://jsfiddle.net/5mB3Q/1/
and the round of two digits:
$("#val").on('keyup', function(){
var withPerc = parseFloat($(this).val())*1.08;
$("#incPerc").text(withPerc.toFixed(2));
$("#otherInput").val(withPerc.toFixed(2));
});
edit: ok, full code because of the comment:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<form>
<input id="val">
<input id="otherInput">
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#val").on('keyup', function(){
var withPerc = parseFloat($(this).val())*0.08;
$("#incPerc").text(withPerc.toFixed(2));
$("#otherInput").val(withPerc.toFixed(2));
});
});
</script>
</body>
</html>
You forgot the protocol when you linked the jQuery lib. (and doc.ready)
$('#output').text = (int)($('#input').text.Substring(0, $('#input').text.Length - 1)) * 1,08 + $('#input').text.Substring($('#input').text.Length - 1);
Why does my code not work? Shouldn't it print 222 to the element with ID p2?
<%# page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%#page import="java.io.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function compareData()
{
document.getElementById('p1').innerHTML = "111";
var inputs = document.getElemementsByTagName("input");
// why can't I display the "222" here??
document.getElementById('p2').innerHTML = "222";
}
</script>
</head>
<body>
<p id="p1"> a </p>
<p id="p2"> b </p>
<input type="button" onclick="compareData()" value="hello"/>
</body>
</html>
You have mis-spelled getElemementsByTagName. This results in a js error, thereby your code stops execution at that line.
Correct it as getElementsByTagName. Then your code would work fine.
Why you are using this? var inputs = document.getElemementsByTagName("input");
My fiddle
And you can use the way you are using like this : My fiddle but it was not working because Elements spelling is wrong document.getElemementsByTagName
It should be document.getElementsByTagName
You have a typo on this line:
var inputs = document.getElemementsByTagName("input");
What you want is probably this:
var inputs = document.getElementsByTagName("input");
It could be that the typo stops the execution of the script, and therefor the line after is never run.
Remove following line and it will work...
var inputs = document.getElemementsByTagName("input");
html code :
<!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="script.js">
</script>
</head>
<body bgcolor="#FFFFCC">
<center>
<form>
<select id="newLocation">
<option value="1.jpg">index</option>
<option value="script.js">posts</option>
<option value="2.jpg" selected="selected">blog</option>
</select>
</form>
javascript :
window.onload = startInit;
function startInit() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById("newLocation");// what does this statement return ?
var newPage = newLoc.options[newLoc.getSelectedIndex].value;
if(newPage != "")
window.location = newPage;
}
Why don't get to to new page i.e the value when i select an option from the combo box ?
Also what does document.getElementById("newLocation"); this statement (the first statement of the function jumpPage) return ?
You can try
var newPage = newLoc.options[newLoc.selectedIndex].value;
The statement
var newLoc = document.getElementById("newLocation");
just finds the DOM (HTML) element <... id="newLocation" ...>, i.e. your <select id="newLocation"> .
document.getElementById("newLocation") will return you the SELECT object (i.e., the reference to your drop-down).
Regarding the JS, it has an error. You should change newLoc.getSelectedIndex to newLoc.selectedIndex.
This code attempts to dynamically switch the class of the StateContainer div from StateOne to StateTwo to alternate the visibility of the DIV.
When I run it, I always see the following both before and after clicking the button.
Visible first
Visible first
Visible first
Visible first
Would appreciate any suggestions for why this code does not work the way I'm expecting.
<!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://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<style type="text/css">
.StateOne .InitiallyHidden { display: none; }
.StateTwo .InitiallyVisible { display: none; }
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('.x').click(
var s = document.GetElementById('StateContainer');
s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
);
});
</script>
</head>
<body>
<button class="x">Change StateContainer</button>
<div class="StateOne" id="StateContainer">
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
</div>
</body>
</html>
It looks like you're not using the click event properly. You need to provide it with a function:
$('.x').click(function() {
var s = document.getElementById('StateContainer');
s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
});
Also, if you're already using jQuery, the following syntax is much shorter than document.getElementById (which doesn't have a capital G, by the way):
var s = $("#StateContainer")[0];
Steve