Here is my code, how can I show the image? When I run the web page, it only shows the two buttons but no image...Should I call the function inside my html?
<html>
<script language="JavaScript" type="text/JavaScript">
var photos=new Array()
var which=0
photos[0]='images/title.gif'
photos[1]='images/pinkrice.png'
function backward(){
if (which > 0){
which=which-1
document.images.photoslider.src=photos[which]
}
}
function forward(){
if (which<photos.length-1){
which=which+1
document.images.photoslider.src=photos[which]
}
}
</script>
<head><title>How to Play?</title></head>
<body>
<h1>How to Play??</h1>
<!--steps of how to play, add image here--> <br>
<form>
<input type="button" value="Back" onClick="backward()">
<input type="button" value="Next" onClick="forward()">
</form>
</body>
</html>
I Edited your code. Test this. Now are working. You need a container to show your image. document.images only store your images on cache. you need a tag to show. Download files here
<html>
<head>
<title>How to Play?</title>
<script language="JavaScript" type="text/JavaScript">
var photos=new Array();
var which=0;
photos[0]='images/title.gif';
photos[1]='images/pinkrice.png';
function backward(){
if (which > 0){
which=which-1;
document.getElementById("SliderPhoto").src=photos[which];
}
}
function forward(){
if (which<photos.length-1){
which=which+1;
document.getElementById("SliderPhoto").src=photos[which];
}
}
</script>
</head>
<body>
<h1>How to Play??</h1>
<!--steps of how to play, add image here--> <br>
<img id="SliderPhoto" src="images/title.gif" />
<form>
<input type="button" value="Back" onClick="backward()">
<input type="button" value="Next" onClick="forward()">
</form>
</body>
</html>
Related
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<button onclick="demo()" name="btn">click here</button>
</form>
<script type="text/javascript">
function demo()
{
location.href="http://www.google.com";
}
</script>
</body>
</html>
if the button is placed without the form tag it is working properly. If it is placed inside the tags its not getting redirected when clicked on it.
Always specify the type attribute for a <button> element. Different browsers use different default types for the <button> element.
If you use the <button> element in an HTML form, different browsers may submit different values. Use <input> to create buttons in an HTML form.
<form>
<button type="button" onclick="demo()" name="btn">Click Here</button>
<!-- or you can use input element -->
<input type="button" onclick="demo()" value="Click Here" />
</form>
<script>
function demo() {
window.location.href = "http://www.google.com"
}
</script>
<html>
<head>
<title></title>
</head>
<body>
<form>
<button onclick="return demo()" name="btn">click here</button>
</form>
<script type="text/javascript">
function demo()
{
location.href="http://www.google.com";
return false;
}
</script>
</body>
</html>
This modification prevent the default action of clicking on a button inside a form (which is submitting it) and relocate to google.
If you don't need the form do not use it.
It should be look like this.
<form>
<button onclick="demo(event)" name="btn">click here</button>
<script type="text/javascript">
function demo(e) {
e.preventDefault();
window.location.href = "http://www.google.com";
}
</script>
</form>
or you can try this also
<form>
<button onclick="demo(event)" name="btn">click here</button>
</form>
<script type="text/javascript">
function demo(e) {
e.preventDefault();
window.location.href = "http://www.google.com";
}
</script>
I'm creating a web page that has a text area in it and the user can enter code and have it displayed underneath. If I place my function in the HTML file it works just fine but when I move it to the JS file it doesn't work. Any help, even pointing me in the direction of my issue would be appreciated.
Here is my HTML code with the function commented out......
<!DOCTYPE html>
<html>
<head>
<title>DOM TREE 2</title>
<link rel="stylesheet" href="css/Content.css">
<script type="text/javascript" src="JS/js01.js"></script>
</head>
<body style="background-color:lightgray" id="bd">
<div id="third">
<h1> DOM TREE <img src="Images/tree_logo.jpg" alt="Calc" id = "pic">
</h1>
<form id="DOMForm">
<textarea id="myTextarea" rows="4" cols="50"></textarea>
<p><button type="button" onclick="AddFunction()">Add Content</button>
<button type="button" onclick="Change()">Change Style</button>
<button type="button" onclick="Clear()">Clear Content</button>
</p>
<p id="demo"></p>
<!--<script>
function AddFunction() {
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
</script> -->
</body>
</html>
Here is the JS file with the function.....
function AddFunction()
{
var x = document.getElementById("myTextarea").value;
document.getElementById("demo").innerHTML = x;
}
function changestyle()
{
}
function clear()
{
document.getElementById("DomForm").reset();
}
Because names are different, compare onclick="Change()" to function changestyle() and onclick="Clear()" to function clear().
Actually what i want,when submit the from that request go to this http://api.brightcove.com/services/post , i set target element of form to iframe.Then response is go to iframe correctly its ok.Problem is ,I want to get body content of iframe using javascript function but it is not working.This is my source
<html>
<head>
<script>
function getIframe(){
var iframe = document.getElementById('postFrame');
var bodyC = iframe.contentDocument.body.innerHTML;
alert(bodyC);
}
</script>
</head >
<body >
<form action="http://api.brightcove.com/services/post" method="post" target='postFrame'>
<input type="hidden" name='JSON' value="test"/>
<button type="submit" >Submit</button>
<button onclick="getIframe()" type="button">Check Iframe Result</button>
</form>
<iframe id="postFrame" name="postFrame" style="width:100%;border:none" ></iframe>
</body>
</html>
This is my code:
<HTML>
<HEADER>
<TITLE>Page</TITLE>
</HEADER>
<SCRIPT LANGUAGE="JavaScript">
var asdf=Math.floor(Math.random()*80000000)
</SCRIPT>
<FORM>
<input type=button
value="button"
onClick="self.location='http://www.roblox.com/place-place?id=$_GET["var asdf"]'">
</FORM>
<BODY>
</BODY>
</HTML>
How do i fix it so the link is random, but also works?
Change the value of onclick to:
"var asdf=Math.floor(Math.random()*80000000); window.location='http://www.roblox.com/place-place?id='+asdf"
This will randomize the ID on every click of the link
try this
<HTML>
<HEADER>
<TITLE>Page</TITLE>
</HEADER>
<SCRIPT LANGUAGE="JavaScript">
function my_func()
{
var asdf= Math.floor(Math.random()*80000000);
window.open("http://www.roblox.com/place-place?id="+asdf);
}
</SCRIPT>
<FORM>
<input type=button value="button" onClick="my_func()">
</FORM>
<BODY>
</BODY>
</HTML>
you can also use window.location instead of window.open.
Use a function,
function redirect(){
self.location='http://www.roblox.com/place-place?id='+asdf;
}
an call the function onclick of input tag
I have a page that contains a dynamically loaded <iframe>. This iframe contains a <form>.
When the user submits the <form>, a new page is loaded within the <iframe> saying Thanks.
Instead of using a second page, i want the parent page to show the Thanks message.
So basically i am in my <iframe>, and i want to call a function on the parent frame.
How can i do that ?
From an iframe, it is possible to call a function declared on the parent window using window.top.functionName(). But for this to work, both pages should be hosted on the same domain. They are subject to Same Origin Policy. That means if you want to test this example, you should use a server (wamp, xampp, etc..).
page.html (updated)
<html>
<head>
<title>Page 1</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
window.foo = function(){
alert('page 1 is executing this code');
}
$(function(){
$('body').append('<iframe src="iframeContent.html"></iframe>');
});
</script>
</head>
<body></body>
</html>
iframeContent.html
<html>
<head>
<title>Page 2</title>
</head>
<body>
i am the iframe. This is my button.
<button onclick="javascript:window.top.foo()">click me</button>
</body>
</html>
I've done a little example for you.
Here is the main page (index.html) containing the iframe
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head>
<body>
<input type="hidden" id="infoFormPosted" value=0 />
<iframe src="./iframe.html"></iframe>
<div id="thanks" style="display:none;">
Thanks!
</div>
</body>
</html>
And here is the iframe (iframe.html):
<html>
<head>
<title>myIframe</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#infoForm").submit(function() {
//change the value of the top document input hidden to 1
$("#infoFormPosted", top.document).val(1);
});
// if the input hidden is set to 1
if($("#infoFormPosted", top.document).val() == 1){
// show the thanks div on the top document (not in the iframe)
$("#thanks", top.document).show();
}
});
</script>
</head>
<body>
<div id="anydiv">
<form id="infoForm" action="#" method="post">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>
EDIT : An alternative is to create a function inside the main page and call it in the iframe using parent.nameOfTheFunction()
The main page (index.html)
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
showThanks = function(){
$("#thanks").show();
};
</script>
</head>
<body>
<input type="hidden" id="infoFormPosted" value=0 />
<iframe src="./iframe.html"></iframe>
<div id="thanks" style="display:none;">
Thanks!
</div>
</body>
</html>
The iframe (iframe.html):
<html>
<head>
<title>myIframe</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#infoForm").submit(function() {
//change the value of the top document input hidden to 1
$("#infoFormPosted", top.document).val(1);
});
// if the input hidden is set to 1
if($("#infoFormPosted", top.document).val() == 1){
// call showThanks function from the main frame
parent.showThanks();
}
});
</script>
</head>
<body>
<div id="anydiv">
<form id="infoForm" action="#" method="post">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
</div>
</body>
</html>