|
JavaScript - Change Javascript On A Page By Clicking A Link
I tried to word the question as best as possible, but here is what I want to do. I am creating a calculator online and it is getting more and more extensive, which is good b/c I'm learning a lot. Here is what I'm trying accomplish now.
I am using "input" to get information from the user in the top section of my calculator and that will always stay the same. The part that will change is the results section (bottom part of the calc) based on a few different variations or setups, so I want to be able have them click on a few different options. Option 1 Option 2 Option 3 Depending on which one they click I want the javascript that is run for the results section to correspond to the option chosen. I also, want to be able to have a default option displayed the first time the page is loaded and then have it change if a different option is chosen. I don't think reloading the page is necessary, but I'm new to this and could use a little direction. I hope what I'd like to do makes a little sense. I'm not asking for any code written that will do this, but naturally something hints or tips that could get me going. I don't know how to "monitor" a link and return a value to a variable, so that it can be put into a an if statement in the results section. After that, it would be continually monitored or somehow restarted if the variable does change. Again, I don't know if this is the best way to go at it, but I'm not sure at all. Any help would be awesome. I have looked at "onclick", but I'm not completely sure how I can tie it all together of if I should use another method. Thanks for any suggestions/ideas/help. Similar TutorialsHello guys, You were all very kind to help me a few months ago when I was trying to create the code which is posted below. it is a table of banner ads that will rotate on my website and the appropriate link follows the appropraite ad when they rotate. everything is working fine except that when you click on one of the ads ( which is a link), the link works but the page displays an error at the bottom as soon as any link is clicked. Since this type of hyperlink is associated with the javascript, im not sure how to correct the issue. maybe it is a simple thing. can anyone take a look at this and help me figure out the issue? thanks. 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>.</title>
<script type="text/javascript">
var ImageArray = [ // add paths, if needed
['randoms/0.jpg','http://0.com'],
['randoms/1.jpg','http://1.com'],
['randoms/2.jpg','http://2.com'],
['randoms/3.jpg','http://3.com'],
['randoms/4.jpg','http://4.com'],
['randoms/5.jpg','http://5.com'],
['randoms/6.jpg','http://6.com'],
['randoms/7.jpg','http://7.com'],
['randoms/8.jpg','http://8.com'],
['randoms/9.jpg','http://9.com'],
['randoms/10.jpg','http://10.com'],
['randoms/11.jpg','http://11.com'],
['randoms/12.jpg','http://12.com'],
['randoms/13.jpg','http://13.com'],
['randoms/14.jpg','http://14.com'],
['randoms/15.jpg','http://15.com'] // No comma after last entry
];
function randOrd() {
return (Math.round(Math.random())-0.5);
}
function ChangeImages() {
var ImgPtr = new Array();
for (var i=0; i<ImageArray.length; i++) { ImgPtr[i] = i; }
ImgPtr = ImgPtr.sort(randOrd);
var tmp = '';
for (var i=0; i<ImgPtr.length; i++) {
tmp = 'tImg'+i;
document.getElementById(tmp).src = ImageArray[ImgPtr[i]][0];
document.getElementById(tmp).alt = ImageArray[ImgPtr[i]][1];
tmp = 'lImg'+i;
document.getElementById(tmp).href = ImageArray[ImgPtr[i]][1];
}
}
var TimerAction = 0;
function startTimer() {
TimerAction = setInterval('ChangeImages()',3000);
}
function stopTimer() {
clearTimeout(TimerAction);
}
</script>
<style type="text/css">body { background-color: #000000; margin: 0;
}
</style></head>
<body onLoad="startTimer();ChangeImages()" >
<table width="250" border="0" cellpadding="0" id="ads">
<tr><td>
<a href="" id="lImg0" onclick="return gotoLink(this.id,0)"target="_blank">
<img id="tImg0" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg1" onclick="return gotoLink(this.id,1)"target="_blank">
<img id="tImg1" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg2" onclick="return gotoLink(this.id,2)"target="_blank">
<img id="tImg2" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg3" onclick="return gotoLink(this.id,3)"target="_blank">
<img id="tImg3" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg4" onclick="return gotoLink(this.id,4)"target="_blank">
<img id="tImg4" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg5" onclick="return gotoLink(this.id,5)"target="_blank">
<img id="tImg5" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg6" onclick="return gotoLink(this.id,6)"target="_blank">
<img id="tImg6" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg7" onclick="return gotoLink(this.id,7)"target="_blank">
<img id="tImg7" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg8" onclick="return gotoLink(this.id,8)"target="_blank">
<img id="tImg8" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg9" onclick="return gotoLink(this.id,9)"target="_blank">
<img id="tImg9" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg10" onclick="return gotoLink(this.id,10)"target="_blank">
<img id="tImg10" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg11" onclick="return gotoLink(this.id,11)"target="_blank">
<img id="tImg11" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg12" onclick="return gotoLink(this.id,12)"target="_blank">
<img id="tImg12" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg13" onclick="return gotoLink(this.id,13)"target="_blank">
<img id="tImg13" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg14" onclick="return gotoLink(this.id,14)"target="_blank">
<img id="tImg14" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
<tr><td>
<a href="" id="lImg15" onclick="return gotoLink(this.id,15)"target="_blank">
<img id="tImg15" src="" alt="" width="250" height="166">
</a>
</td></tr>
<tr> <td> </td> </tr>
</table>
</body>
</html>
Is there a Javascript code to change multiple affilate link/content daily?
Hello, Can someone please show me how to do the following in Javascript. I basically want the background color of a div (banner) to change when the user clicks a green or blue table cell. So if they click the blue table cell, the backgound color of the div changes to blue (its green by default). Also, when they have picked what color they want, I'd like the color to be stored in the value of the form 'BannerBGColor' so I can post their banner color to database. Any help is greatly appreciated. Many thanks -------------------------------------------------------------------------- Banner: <div style="width:400px; float:center; background:#00FF00; border-color:#000000; border-style: solid; border-width: 2px;"> <p>This is a banner.</p></div>'; -------------------------------------------------------------------------- Colour picker table to change colour of Banner above: <table width="300" border="1" cellspacing="1" cellpadding="1"> <tr> <td colspan="2">Pick a color below to change banner background:</td> </tr> <tr> <td bgcolor="#00FF00">Green</td> <td bgcolor="#00FFFF">Blue</td> </tr> </table> ------------------------------------------------------------------------- Form field to insert chosen Banner Background colour when form is submitted - <input type="text" name="BannerBGColor" value="'.$_POST['BannerBGColor'].'"> Hi all, I want to have a javascript popup box so that when a hyperlink is clicked, a user is asked if they are sure they want to click this link, if they select ok then the page loads, if they click canel then nothing happens, so i have this code below: Code: <script type="text/javascript">
function confirmSubmit()
{
var agree=confirm("Are you sure you wish to click this link?");
if (agree)
return true ;
else
return false ;
}
</script>
Code: <a onclick="return confirmSubmit()" href="page.html">Page</a> However when a user clicks cancel the link still loads, can anyone see where I am going wrong? any help will be appreciated Hello. I have looked everywhere and I absolutely cannot find a method that works. I'm making an html website with flash. This is all I want...... A swf "this will be the default flash you see" underneath that flash I want 3 text links named..... Flash1 Flash2 Flash3 when you click flash1, 2, or 3 I want it to swap out the Current flash video with a different one. This way The user can watch all the flash vids on the same page, rather than a separate page for each flash. I found a way to swap them out using iframe, however that requires me to make a separate html page for each of my swf's themselves. I dont want to do that. Plz if someone could help me I would greatly appreciate it! I hope I am posting this in the correct section, I know swfobject involves javascripting so thats why I'm posting here. Not that your method HAS to involve swfobject to embed. If someone can give me code that I can just copy/paste into a blank page in dreamweaver (and I would adjust the embded swf file name and size etc obviously) and have it work that would be fantastic. thank you How to get this to work? Code: <html> <body> <script type="text/javascript" src="01.js"> <h1>Welcome</h1> <a href="#" onclick="write(); return false;">Click here</a> <div id="info_here"> </div> </body> </html> 01.js Code: function write() {
var a=document.getElementById("info_here");
a.innerHTML=document.write("Hello <br />" + "Thanks for clicking");
}
when I upload a new javascript file to the server and refresh the webpage, the webpage behaves as if the old script is on the server, this happens with IE and firefox, even if I shut the programs down and restart them, can anyone help? Good Morning people, here is my problem, I have seen Java before but never really understood it, I have created a drawing from visio 2010 and published it as a web page that creates java scripts etc, the idea of the drawing is to be a "computer locator" the 2 problems that I have is that I want the shape to change color when located (hightlighted) and the second part is to disabe ctrl+click to access the hyperling that runs the command (which might be a IE8 thing not java??) here is the script I think I need to change to highlight the shape Code: function FindOnClick()
{
var count, indexOfString;
var fieldsToSearchArray = new Array();
if (parent.xmlData != null && document.theForm[strProps + strChkBox].checked)
{
for( count=0; count < document.theForm.length; count++ )
{
indexOfString = document.theForm[count].name.indexOf(strPropChkBox);
if( -1 != indexOfString && document.theForm[count].checked )
{
fieldsToSearchArray[ fieldsToSearchArray.length ] = document.theForm[count].name.slice(0, indexOfString);
}
}
}
var searchTokensArray = CreateSearchTokens (document.theForm.findString.value);
if (searchTokensArray.length > 0)
{
var findArray = Find(searchTokensArray, fieldsToSearchArray);
var ArrayLength = findArray.length;
var strResultsHTML = "No matches found.";
var lastPageID = null;
var shapeID;
if(ArrayLength > 0)
{
strResultsHTML = strResults + ' <b>'+ parent.HTMLEscape(document.theForm.findString.value) +'</b>';
for ( count = 0; count < ArrayLength; count++)
{
if( lastPageID != findArray[count].PageID )
{
lastPageID = findArray[count].PageID;
}
shapeID = findArray[count].ShapeID;
strResultsHTML += '<p class="results"><a href="javascript:populateSearchResultDetails(\'results_'+ lastPageID +'_'+ shapeID +'\', '+ lastPageID +','+ shapeID +'); TogglePlus(\'results_' + lastPageID + '_' + shapeID + '\',\'img_' + lastPageID + '_' + shapeID + '\', hideResults)"><img src="plus.gif" style="padding-left:13px" alt="Barrie Changed this" width="13" height="9" border="0" id="img_'+ lastPageID +'_'+ shapeID +'"></a>\n'
strResultsHTML += '<a class="blu1" href="JavaScript:FindQuerySelect(';
strResultsHTML += findArray[count].PageID + ",";
strResultsHTML += findArray[count].ShapeID + ",";
strResultsHTML += findArray[count].PinX + ",";
strResultsHTML += findArray[count].PinY;
strResultsHTML += ')">'+ findArray[count].Title +'</a></p>\n'
strResultsHTML += '</div>\n';
strResultsHTML += '<div class="indent" id="results_'+ lastPageID +'_'+ shapeID +'" style="display:none;width:90%;"></div>\n'
}
}
var divAdvSrch = document.getElementById("hideAdvSrch");
var imgAS0 = document.getElementById("as0");
var tmpObj = document.getElementById("hideResults");
if( tmpObj != null )
{
tmpObj.innerHTML = strResultsHTML;
tmpObj.open = "true";
tmpObj.style.display = "block";
any help would be very much appricated __________________ Barrie Willyouhelpmefixmykeyboard?Thespacebarisbroken! For school I'm supposed to write a JS code which visits a website, and then clicks on a button on that website. I used the document.location method to visit the web page, but then if I use the document.forms[0].elements[0].click() function to click a button, nothing happens. The click() function has always worked for me when the JS code is embedded in the web page, but its not in this case because the code has to click a button on an external website. So how can I do this? I just need me Javscript program to visit a site, and then click a button on that site. Please help, thanks.
hi please help solving my problem. I have the following code for changing the td colour when chk box in it is clicked. It is working fine. My application will get some data from the database when i check a chk box say ABC. My problem is ...i want to chage the colour of the check box when it is clicked and retain the colour of my chkbox even after page refresh. Code: <html>
<head>
<title>color</title>
<script type="text/javascript">
function toggle(box,theId) {
if(document.getElementById) {
var cell = document.getElementById(theId);
if(box.checked) {
cell.className = "on";
}
else {
cell.className = "off";
}
}
}
</script>
<style type="text/css">
.off {
background-color: #fff;
}
.on {
background-color: red;
}
</style>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
<td class="off" id="sub1"><input type="checkbox" name="subject" onclick="submit(); toggle(this,'sub1'); " value="s1" id="demo1">ABC</td>
<td class="off" id="sub2"><input type="checkbox" name="subject" onclick=" submit(); toggle(this,'sub2'); " value="s2" id="demo2">XYZ</td>
</tr>
</table>
</body>
</html>
Reply With Quote 01-21-2015, 08:37 AM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Originally Posted by raj_d hi please help solving my problem. I have the following code for changing the td colour when chk box in it is clicked. It is working fine. My application will get some data from the database when i check a chk box say ABC. My problem is ...i want to chage the colour of the check box when it is clicked and retain the colour of my chkbox even after page refresh. You will need to use a cookie or local storage to record the colour of the checkbox. Internet Explorer requires the user to click on an applet to activate it, which means two clicks if there is a start button, for example. I previously learned a workaround, which is to activate the applet from an external Javascript, something like this: Code: document.write('<applet code="' + appletname + '" width="' + w + '" height="' + h + '"></applet>');
This doesn't work in IE8. Is there a workaround for IE8? Thanks. Hi, this is my first post on the forum. I was just wondering whether there is a way to hide an element on another page after clicking on a button? Basically, I have a login page, and for testing purposes, I want it so when you click a button, it runs some javascript in a file called ajax.util.js, and I have a jQuery file attached to the HTML file as well (http://ajax.googleapis.com/ajax/libs.../jquery.min.js), and I am using Google App Engine, which im not sure whether thats relevant. I tried using the show and hide functions provided by the jQuery file, but no luck, i want to hide an element which is a link with ID admintools. I have also tried getting the element by ID and changing the display style to none and hidden but still no luck. Im not sure whether its only possible to hide elements in the login.html page. What I want it to do basically is click on the submit button in the login page, it will then run a javascript function which redirects you to index.html (which i am doing using window.location), and then hides an element in the index.html page (id=admintools). Any help would be great, Thanks in advance Hey guys, This is my first time ever posting in a programming forum so please be nice! :) I'll admit right away that this is for a homework assignment, but I really did try to solve it myself before I decided to post here. The instructions are to have a confirm box pop up when links with the HTML class value "external" are clicked. If the user clicks "OK" they should be directed to the linked page. If they click "Cancel" they should not be directed anywhere. Here's my code: Code: function checkClass() {
var links = document.getElementsByTagName("a");
for ( var i = 0 ; i < links.length ; i++ ) {
var link = links[i];
if (link.className == "external") {
link.onclick = clickHandler();
}
}
}
window.onload = checkClass;
function clickHandler() {
if (confirm("You clicked an external link. Do you really want to leave this site?")) {
return true;
}
return false;
}
The problem is that the confirm box is triggered on page load and not on link click. I know I wrote Code: window.onload = checkClass; but how else should I call the function? I thought Code: if (link.className == "external") would keep it from going as far as to the confirm box until an external link was clicked. Thanks for pointing me in the right direction, Johanna Ok Need Help Here. As I post earlier how to detect firefox before let the user in some guys just disable javascript and went in I finding solution i think of it but i dun know the code not sure is it working Script that allow the browser to check weather javascript is ON if not cannot grant access to the page . Another thing is by using a image means when i enter the site it will show a image i will need to click it before it enter the content of the pages i think that a javascript code i seen it somewhere else about months ago. Due to a long story which we don't need to go into here I am trying to change the color of a link after it has been clicked on WITHOUT using CSS. When the link is clicked some javascript is called. I can do this in IE by adding this "this.style.color = 'black'". However this doesn't work in other browsers. Anyone know how I could get this to work in other browsers? I've spend hours on this... Thanks for yuor time! Hello I need script that change link after first click for example: <a href=URL1 target=_blank><img src=....></img></a> After click on this image , URL1 changes to URL2 and visitor when click on it again and again , it goes to URL2 Regards I wrote a function, to change a input value to show a key, which PHP later recognizes and makes addition changes too. However I can't seem to get this simple function to work, can you see anything wrong with it? Code: function quote(id) {
var shout = document.getElementById('shout');
var currentShout = '; '.shout.value;
var prefix = '@'.id;
shout.value = prefix.currentShout;
}
I call it by Code: <a href="#" onclick="javascript: quote('2');">Comment</a>
the input that changes is written as Code: <input id="shout" name="shout" type="text" onKeyPress="return submitenter(this,event);"> Hi, I have a textual "link" that, when clicked, I want the text to change, and I want a number of checkboxes to be toggled on or off. Here's my code. Currently, I just have the text changing - I don't know how to simultaneously check/uncheck checkboxes. Code: <head>
<script language="JavaScript" type="text/JavaScript">
<!-- toggle off and on, currently unused -->
function checkAll(checkname, exby)
{
for (i = 0; i < checkname.length; i++)
checkname[i].checked = exby.checked? true:false
}
<!-- changes text on click, currently used -->
function exp(obj)
{
if(obj.oldText)
{
obj.innerHTML = obj.oldText;
obj.oldText = null;
}
else
{
obj.oldText = obj.innerHTML;
obj.innerHTML = 'Check All';
}
}
</script>
</head>
<body>
<div id="checkboxes">
<table bgcolor="#DCDCDC" cellpadding="10">
<tr><th colspan="11" align="left">
<a href="#" onclick="javascript:exp(this);">Clear All</a><br/>
</th></tr>
<tr align="center">
<td>Check1
<br><input type="checkbox" name="checkGroup" value="chk-1" checked="yes" /></td>
<td>Check2
<br><input type="checkbox" name="checkGroup" value="chk-2" checked="yes" /></td>
<td>Check3
<br><input type="checkbox" name="checkGroup" value="chk-3" checked="yes" /></td>
</tr>
</table>
</div>
</body>
Thanks for reading! Kevin |
|||||||