|
JavaScript - Newbie Problem
Hello,
I'm a newbie to javacript and indeed programming. The code below is obviously very simple but i can't figure out where i'm going wrong. Could anybody help? [CODE] function getRandomNumber(aNumber) /* ***************************************************************************** /* { var randomNumber; randomNumber = Math.random() * (aNumber); return Math.floor(randomNumber); } /*******************************************************************************/ function randomString(aString, aDelimiter) { var termArray = new Array(); termArray = aString.split(aDelimiter); var randomNumber = getRandomNumber(termArray.length) ; var randomTerm; for(var i = 0; i < termArray.length; i++) { if (termArray[i] != randomNumber) { termArray[i] = termArray[i+ 1] ; } else { termArray[i] = randomTerm; } } return randomTerm; } document.write(''+randomString('how$are$you','$'); [CODE] Similar TutorialsHi I am populating the textboxes using a button . The code is Code: <input type="button" name="bt_autoFill" id="id_autoFill" value="Auto Fill" onclick="fillComponents()"/> this calls the javascript function Code: <script type="text/javascript">
function fillComponents()
{
document.getElementById("id_name").setAttribute("value","zedan");
document.getElementById("id_country").setAttribute("value","USA");
document.getElementById("id_Address").setAttribute("value","South Boulev.");
}
</script>
Now the code works fine when i click it the first time. However if i change a value or erase something in the textboxes the function dosnt work. all the elements are text boxes. Could you tell me what I am doing wrong ?? why doesnt it work the second time?? I adapted (well, attempted to, at least) a quote/testimonial rotation script to fit into my website. The script works PERFECTLY on Firefox but after making my modifications, I killed it in IE...and being a total n00b to JavaScripting.....I'm totally stumped. In Firefox, the script shows at the proper height. In Internet Explorer, the script is only shown at ~40 pixels and doesn't seem to be rotating through the different quotes (it still fades but it fades the same quote back and forth). The obvious question: HOW DO I FIX IT?!!? Original script was found at: http://www.caodesigns.com/blog/tutor....php?postID=33 My script is at: http://www.digitalctrl.org/help.html (right sidebar, in the "Testimonials" box). But something I want to know for future reference.......what is it that causes things to be formatted differently across browsers? This cross browser INcompatability is giving me grey hairs. I've been lurking around your community for a while now.....I hope you gents don't mind my first post being a question. If I need to reformat my post or do anything else to get assistance, please let me know so I can take care of it. First of all, thanks for looking! I'm doing this nonprofit site for a students club in my college, and it needs an event calendar. I just have a bit of touch on javascript, and the only way this is going to be done in is javascript so I'm stuck with it. I took one of my assignments and modded it to the requirements of them. 1. A 6 month calendar. problem - I have to get thismonth, check whether its <July,then display Jan to June. Else July to December.(A semester calendar) figured it out. 2.Want to highlight a specific date, and place a link in it, so when somebody click the date, say a textarea in a form, displays the event details. problem - Have no idea on how to do it. Any help on this is warmly welcome ! My calendar.htm file Code: <html>
<head>
<title>Calendar</title>
<link href="calendar.css" rel="stylesheet" type="text/css" />
<script src="calendar.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<script type="text/javascript">
yearly();
</script>
</div>
</body>
</html>
My css file Code: #yearly_table {border: 1px solid black; font-size: 8pt; width: 500px;
font-family: Arial, Helvetica, sans-serif; background-color: white}
#yearly_title {color: white; background-color: rgb(223,29,29); letter-spacing: 6; font-size: 12pt}
.yearly_months {vertical-align: top; border: solid 1px black}
.monthly_table {font-size: 8pt; width: 100%; background-color: white}
.monthly_title {background-color: rgb(223,29,29); color: white; letter-spacing: 4}
.monthly_weekdays {border-bottom: 1px solid black}
.monthly_dates {text-align: right}
#today {font-weight: bold; color: rgb(223,29,29); background-color:#999;
border: 1px solid black; text-align: center}
My .js file Code: tes the month name in the monthly table
writeDayNames()
Writes the weekday title rows in the calendar table
daysInMonth(calendarDay)
Returns the number of days in the month from calendarDay
writeMonthDays(calendarDay, currentTime)
Writes the daily rows in the monthly table, highlighting
the date specified in the currentTime parameter.
writeDay(weekDay, dayCount, calendarDay, currentTime)
Write the opening and close table row tags and the table
cell tag for an individual day in the calendar.
*/
function yearly(calDate) {
if (calDate == null) calendarDay=new Date();
else calendarDay = new Date(calDate);
var currentTime = calendarDay.getTime();
var thisYear = calendarDay.getFullYear();
document.write("<table id='yearly_table'>");
document.write("<tr><th id='yearly_title' colspan='4'>"+thisYear+"</th></tr>");
var semMonth=calendarDay.getMonth();
var monthNum;
if (semMonth <6) {
monthNum = -1 }
else {
monthNum = 5; }
for (var i=1; i<=2; i++) {
document.write("<tr>");
for (var j=1; j<=3; j++) {
monthNum++;
calendarDay.setDate(1);
calendarDay.setMonth(monthNum);
writeMonthCell(calendarDay, currentTime);
}
document.write("</tr>");
}
document.write("</table>");
}
function writeMonthCell(calendarDay, currentTime) {
document.write("<td class='yearly_months'>");
writeMonth(calendarDay, currentTime);
document.write("</td>");
}
function writeMonth(calendarDay, currentTime) {
document.write("<table class='monthly_table'>");
writeMonthTitle(calendarDay);
writeDayNames()
writeMonthDays(calendarDay, currentTime);
document.write("</table>");
}
function writeMonthTitle(calendarDay) {
var monthName = new Array("January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November", "December");
var thisMonth=calendarDay.getMonth();
document.write("<tr>");
document.write("<th class='monthly_title' colspan='7'>");
document.write(monthName[thisMonth]);
document.write("</th>");
document.write("</tr>");
}
function writeDayNames() {
var dayName = new Array("S", "M", "T", "W", "R", "F", "S");
document.write("<tr>");
for (var i=0;i<dayName.length;i++) {
document.write("<th class='monthly_weekdays'>"+dayName[i]+"</th>");
}
document.write("</tr>");
}
function daysInMonth(calendarDay) {
var thisYear = calendarDay.getFullYear();
var thisMonth = calendarDay.getMonth();
var dayCount = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
if ((thisYear % 4 == 0)&&((thisYear % 100 !=0) || (thisYear % 400 == 0))) {
dayCount[1] = 29;
}
return dayCount[thisMonth];
}
function writeMonthDays(calendarDay, currentTime) {
var weekDay = calendarDay.getDay();
document.write("<tr>");
for (var i=0; i < weekDay; i++) {
document.write("<td></td>");
}
var totalDays = daysInMonth(calendarDay);
for (var dayCount=1; dayCount<=totalDays; dayCount++) {
calendarDay.setDate(dayCount);
weekDay = calendarDay.getDay();
writeDay(weekDay, dayCount, calendarDay, currentTime);
}
document.write("</tr>");
}
function writeDay(weekDay, dayCount, calendarDay, currentTime) {
if (weekDay == 0) document.write("<tr>");
if (calendarDay.getTime() == currentTime) {
document.write("<td class='monthly_dates' id='today'>"+dayCount+"</td>");
} else {
document.write("<td class='monthly_dates'>"+dayCount+"</td>");
}
if (weekDay == 6) document.write("</tr>");
}
Lets say I have two images in a box Code: <body> <div id="box"> <img src="image1.jpg" id="image1" width="100" height="100" /> <img src="image2.jpg" id="image2" width="100" height="100" /> </div> </body> When I click on Image1 I want Image2 to get replaced with a new image, called Image3. So I tried this code: Code: var image1 = document.getElementById("image1");
image1.onclick = image1_click ();
function image1_click () {
new_image= new Image
new_image = document.getElementById("image2");
new_image.src="image3.jpg"
}
But instead of replacing the image on click, from some reason it replaces image2 with image3 from start/load. What should I do to make this work? Thank you. Hi, Im a complete newbie to javascript and I've basically copied and pasted the javascript I found here to use on my site. Its an onMouseOver slideshow: http://www.javascriptkit.com/script/...ifferent.shtml to use on my site. Basically, my problem is how do I add a second, separate image in a different location on the web page, associated with this script? If I post <a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a> in two different locations, which is the script for the image, the script stops working, but having it once makes it work. So how do I add two different image locations? Can someone please help me here? I just want to add more images in a different location. ie have image location 1, and image location 2. Thanks in advance Script Below: Code: <script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink1
}
</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"
function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}
preloadimages(my images here)
</script>
For the Links:
<a href="creativewriting.html" onMouseover="changeimage(myimages[1],this.href)">Creative Writing</a><br>
For the Image:
<a href="javascript:warp()"><img src="myimage" name="targetimage" border=0></a>
hi, please ignore this thread..it is a duplicate of one already active. MODS please delete. apologies for my mistake. Hi what i'm trying to do is have it when once a user clicks on a banner the join raffle button will show after clicking on the banner, along with opening up a new window to the link the banner had. I've been trying to set up a onclick event to do this but haven't had success any help would be appreciated. This is the code ive tried using. <div class="moduletable"> <a onclick="{AUP::RAFFLE=4}" href="http://godaddy.com" target="_blank" mce_href="http://godaddy.com"><img src="/images/stories/godaddy%20image.jpg" alt=""></a> </div> Here is the code for the raffle <tr> <td valign="top" colspan="2"> <form action="" method="post" name="RaffleForm"> <input type="hidden" name="aupraffleid" id="aupraffleid" value="4" /> <input type="hidden" name="aupraffleuserid" id="aupraffleuserid" value="63" /> <input type="hidden" name="auprafflepoints" id="auprafflepoints" value="1" /> <input type="hidden" name="auprafflepointsremove" id="auprafflepointsremove" value="1" /> <input class="button" type="submit" name="Submit" value="Sign up for this raffle now!" /> </form> </td> </tr> I am trying to create a personal webpage within Frames. The problem is, when I start the left frame, the main frame does what it's supposed to do, but if I click into the mainframe, it opens in an entirely new window, therefore losing my Frameset. I want to be able to visit webpages I have in an Array and be able to use the webpages (surf them, click on links and such). Please forgive the sloppy coding, I am a beginner. This is what I have so far: Frameset: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <frameset cols="220,*" border=5> <frame src="leftFrame.html" name="side" sideborder=1 Scrolling="no" marginwidth="5" marginheight="5" noresize> <frame src="mainFrame.html" name="main" sideborder=1 Scrolling="yes" marginwidth="5" marginheight="5" noresize> </frameset><noframes></noframes> </frameset> <body> </body> </html> Left Frame: Code: <html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var page = new Array(
"http://google.com"
"http://ebay.com"
"http://facebook.com"
);
var endpage = "/the-end.html";
var slidenum = 0;
var slidecount = page.length;
var timerID = 0;
var show_is_on = 0;
var timedelay;
var iteration;
function showSlideShow() {
slidenum++;
if (slidenum < slidecount+1) {
parent.main.location.href = page[slidenum-1];
document.getElementById('slnum').innerHTML = slidenum
}
if (slidenum == slidecount+1) {
parent.main.location.href = endpage;
}
else timerID = setTimeout('showSlideShow()', timedelay);
}
function doShow() {
if (!show_is_on) {
show_is_on = 1;
iteration = document.getElementById('startfrom').value
if (iteration > 0) {
slidenum = iteration-1
}
setTimer(document.getElementById('interval').value);
showSlideShow();
}
}
function stopShow() {
clearTimeout(timerID);
show_is_on = 0;
}
function setTimer(milliseconds) {
timedelay = milliseconds;
}
// End -->
</script>
</HEAD>
<P>
<form name="form1">
Time delay: <input type="text" size="4" name="interval" id="interval" value="7000" />
<br>(In milliseconds)
<P><input type="button" value="Start process" onClick="doShow()" />
<P><input type="button" value="Pause process" onClick="stopShow()" />
<P>Jump to:<input type="text" size="4" name="startfrom" id="startfrom" value="0" />
<P>Progress: <b id="slnum">0</b> of <b id="slcount">0</b>
</form>
<SCRIPT LANGUAGE="JavaScript">
document.getElementById('slcount').innerHTML = slidecount
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</html>
Main Frame: 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=iso-8859-1" /> <title>Untitled Document</title> </head> <body> </body> </html> Thanks in advance! I created a new website for documentation on the product we sell. It can be found at www.predatorgames.info. On the main page is this nice looking jquery photobox. When you click on the smaller pictures it will reload the main one. My problem is how do I make it so that when you click on the large image it will link to another site. Moreover, when they click on the small image it will load a new large image and I would want that to go to a different site if clicked. Dynamic. I was hoping someone could look at the source and tell me where I need to make the change. Please be specific as this is new to me. Thanks ahead of time for the help! Hi, I am brand new to any sort of programming and am taking an HTML class this quarter. We just started javascript and I am working on an assignment where we make a number guessing game. I have been working on this code for a few days and simply cannot figure out what is wrong. It simply doesn't work and at times locks up my browser (Mozilla Firefox). I don't want anyone to write the code for me, I just need a push to begin to understand what I'm doing wrong. Here is what I have so far: <code> <script type="text/javascript"> function guessingGame(){ var secretNumber=Math.floor(Math.random()*100)+1; var numberOfGuesses=0; var guessNumber=parse.Int(document.getElementById('guessNumberValue').value); document.getElementById("guessNumber").value=guessNumber; while (guessNumber!=secretNumber) { if (guessNumber<secretNumber) document.EricaGuess.response.value="Number too low"; if (guessNumber>secretNumber) document.EricaGuess.response.value="Number too high"; if (guessNumber==secretNumber) document.EricaGuess.response.value="You guessed the correct number!";} numberOfGuesses++; document.EricaGuess.numberOfGuessesValue.value=numberOfGuesses; } </script> </head> <body> <form name="EricaGuess"> <div id="Welcome"> <h2> Welcome to Ericas Guessing Game</h2> <p> Enter a number between 1 and 100. See how quickly you can figure out the magic number</p> <input type="button" value="Guess" onclick="guessingGame()"/> <input type="button" value="Reset" onclick="reset"/> <input type="text" id="guessNumber" name="guessNumberValue"/> <input type="text" id="response" name="response" size="75"/> <input type="text" id="numberOfGuessesValue" name="numberOfGuessesValue"/> </code> This is minus the opening and closing tags. Like I said, I am not asking for anyone to code this for me, just some help to understand what the problems are (I'm sure there are many). Thanks for any help you can give. Hi, I am trying to learn how to use radio buttons in javascript without using functions. This is what I did but it does not work: <script language="javascript"> var season3pointer = "Ray Allen" if (season3pointer == Ray Allen) { alert("Good Answer"); } else { alert("You don't know anything about the Celtics") } document.write("<form action='http://www.nba.com/celtics/' method='post'>"+"<p>"+"Who has the record for most 3 points made in a game?"+ "<br/>"+"<input type='radio' name='game-3-pointer' value='bestrecord'>"+season3pointer+ "Antoine Walker"+"<br />"); </script> I know it should be very easy, but so far I have only found how to do it using functions, any help truly appreciated. Hi guys, i am trying to work with google maps api my issue is with creating an array of markers count the number of marker, and then if it equal two, issue an error msg. i wrote some code, but that doesn't work obviously. and my question is how do i write that code in javascript ? GEvent.addListener(map, 'click', function (overlay, latlng) { if (placeMarker.length < 2) { pendingLatLng = latlng; setTimeout("settleClick()", 225) } else { message("You can only select 2 points."); } }); a sample click event which looks like the line below does work. what am i doing wrong ?: google.maps.event.addListener(map, 'click', function (event) {placeMarker(event.latLng); }) Hi everyone! I want to delete all nodes, but leave one div in my html. var p = document.getElementById('container'); var leave= document.getElementById('leave_this'); while (p.hasChildNodes()) { if(leave != p.childNodes){ p.removeChild(p.firstChild); } } Please help. Cheers I have a js file to clean up a textarea when someone copies from a MS Word. I would like to be able to have this remove all the MS Word on submit rather than select a button in an editor. The cleanup.js in located in an includes folder and here is the submit form. How do I include the cleanup.js in this. Any help would be greatly appreciated! Code: <script language='javascript'>
function saveChanges(saveDel)
{
//set the value based on save,delete, or edit
document.editDelete.saveDel.value=saveDel;
var retVal=true;
document.editDelete.saveDel.onsubmit();
document.editDelete.saveDel.value=saveDel;
if(saveDel=='delete')
{
//bring up a confirm if the user clicks delete
retVal=confirm("Permanently delete the current record?");
}
if(retVal)
{
//we can active the submit of the form
document.editDelete.saveDel.onsubmit();
document.editDelete.submit();
}
}
</script>
Hi - can you please tell me the correct syntax for this please? Both scripts 'CalculateBasic' and 'CalculateTape' both happily return the correct amount - all I want to do is add them up to give me a form.price.value I just can't seem to get the right syntax. <script type="text/javascript"> function CalculateTot(form) { form.price.value = CalculateBasic(form) + CalculateTape(form); } </script> Please can you help Thanx Hello I am new and need some help if possible please. I have a site of which i am putting together for a bit of fun and to teach myself but i need a little help from the masters of script if i may. I have a line of text but need it hidden but whatever i do i cant get it to work. It is on my contact page with HTML & a recaptcha & also a php file. What you see on my site is the following. name then empty field box email address then empty field box subject then field box prefilled with WEB SITE ENQUIRY comments then empty field box. What i would like is for the complete line in BOLD above to be hidden so it cant be seen on the website BUT i can see it when the email is received by me. I am having a bad day by not being able to complete this small task. Any help would be nice if somebody could edit the script for me. Many thanks </script> <div class="email"> <table> </tr> <tr> <td align="justify"> <p align="justify"><label for="name"><b>Name</b> *</label> </td> <td valign="top" align="justify"> <p align="justify"> <input type="text" name="name" maxlength="50" size="40"> </td> <tr> <td valign="top" align="justify"> <p align="justify"><label for="email"><b>Email Address</b> *</label> </td> <td valign="top" align="justify"> <p align="justify"> <input type="text" name="email" maxlength="100" size="40"> </td> <tr> <td valign="top" align="justify"> <p align="justify"><label for="subject"><b>Subject</b> *</label> </td> <td valign="top" align="justify"> <p align="justify"> <input type="text" name="subject" value="WEB SITE ENQUIRY" maxlength="50" size="40"> </td> </tr> <tr> <td valign="top" align="justify"> <p align="justify"><label for="comments"><b>Comments</b> *</label> </td> <td valign="top" align="justify"> <p align="justify"> <textarea name="comments" maxlength="2000" cols="40" rows="6"></textarea> </td> </tr> </table><input class="reset" type="reset" value="Reset All"> Hi guys. Noob at Javascrip and html and this is semi-impossible to me currently. I am working on an assignment where I have 10 image files of 10 different countries. the instruction is to create a page that contains a table with 2 columns in a single row. In the first column, create a list of radio buttons that contains the names of the 10 countries. In the second column, display the flag of the country selected in an ?anchor? element. I am required to use the "onclick" event handler. I have been battling with this for hours, as this book I'm learning from makes assumptions as to the syntax I understand, without explaining it... Would someone please be as kind as to set me on the right path. I have included the sorry piece of code I came up with, that I gathered from other sites and tutorials. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Flags</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> </head> <body> <script type="text/javascript"> var cuba = "cuba.jpg"; var argentina="argentina.jpg"; </script> <form name="flagList" action="" method="get"> <p>Click on the country name to view its flag.</p> <p> <input type="radio" name="flag" onclick=document.flagList.flagJpg.value=cuba"/> Cuba<br/> <input type="radio" name="flag" onclick=document.flagList.flagJpg.value=argentina"/> Argentina<br/> </p> <p> <textarea name="flagJpg" cols="75" rows="20" style="background-color: blue; border: none; overflow :hidden; font: 10px tohoma; color:#3F3F3F:></textarea> </P> </form> </body> Greetings, Perhaps someone with the knowledge could assist me with this problem ... Basically, I need to put some code together to automatically redirect a page back to the referring page after a short delay ... and frankly I'm banging my head against a brick wall LOL OK ... got this in HTML to auto redirect to a specific web page after a defined delay : Code: <meta HTTP-EQUIV="REFRESH" content="10; url=http://www.****.co.uk/index.htm"> ... and I have this javascript for redirecting back to the referring page using a button : Code: <form method="POST"> input type="button" name="B1" value="Try it now" onclick="history.back();"> </form> So the question is how to combine the two so that I can get the page to return to the referring page after a delay automatically (that is, without having to press a button) ???? Any assistance would be really appreciated. Many thanks. O T T I have the following code to load iframes but I don't know how to make it load the "LT-video_default.html" when it first loads the page. If I choose one of the options and then go back and choose the "Choose a manufacturer" option it loads the desired page. Here is the code. Code: <script language="JavaScript">
<!-- Begin
function leapto(form) {
var myindex=form.dest.selectedIndex
parent.CONTENT.location.href=(form.dest.options[myindex].value);
// You can output to ANY frame using: parent.[framename].location.href
}
// End -->
</script>
<div id="videoWrapper">
<form name="labtv">
<select name="dest" size="1" onchange="leapto(this.form)">
<option selected="selected" value="LT-video_default.html">Choose A Manufacturer
</option><option value="LT-video_nanodrop.html">NanoDrop
</option><option value="LT-video_bioflux.html">Bioflux
</option><option value="LT-video_genvault.html">GenVault
</option><option value="LT-video_hamilton.html">Hamilton
</option></select>
</form>
<iframe name="CONTENT" frameborder="no" height="400" scrolling="no" width="650">
</iframe>
</div>
Hello I am totally new to javascript and am overwhelmed with this problem. I have tried a few different things but can't figure it out. I am trying to create a calculation of a total amount based on some fields. Here is what i am trying to do: I have five materials: Flex Vinyl, PSV, Rigid PSV, Vinyl Mesh, and Vinyl Banners Each material has a cost based on a total sq foot. Then two dropdown fields that add a certain amount. Here is what I have so far: Material [DROPDOWN MENU] Width [TEXT FIELD] Height [TEXT FIELD] Grommets [DROPDOWN] UV Coating [DROPDOWN] Total $ [TEXT FIELD AUTO-FILL AMOUNT] Is there a place that I can read about how to figure this out? I believe it would be something like: Width x Height = Total If Material One is selected then below numbers: If Total is greater than 1200 then Cost = .85 If Total is between 200 and 1200 then Cost = .50 If Total is between 20 and 49 then Cost = 1.00 If Less than 20 then Cost = 2.50 If PSV is selected then below numbers: If Total is greater than 1200 then Cost = .90 if Total is between 50 and 1200 then Cost = .75 ....and so on Amount = Cost x Width x Height + Grommets Selected Value + UV Coating Selected Value Any suggested reading/help that I can do to create this form? |
|||||||