|
JavaScript - Simple Recursive Function
Similar TutorialsOk, I'm nearly pulling my hair out with this one. I have been looking at this code for two evenings now, and rewrote it 4 times already. It started out as jQuery code and now it's just concatenating strings together. What I'm trying to do: Build a menu/outline using unordered lists from a multidimensional array. What is happening: Inside the buildMenuHTML function, if I call buildMenuHTML, the for loop only happens once (i.e. only for 'i' having a value of '0'.) If I comment out the call to itself, it goes through the for loop all 3 times, but obviously the submenus are not created. Here is the test object: Code: test = [
{
"name" : "Menu 1",
"url" : "menu1.html",
"submenu" : [
{
"name" : "menu 1 subitem 1",
"url" : "menu1subitem1.html"
},
{
"name" : "menu 1 subitem 2",
"url" : "menu1subitem2.html"
} ]
},
{
"name" : "Menu 2",
"url" : "menu2.html",
"submenu" : [
{
"name" : "menu 2subitem 1",
"url" : "menu2subitem1.html"
},
{
"name" : "menu 2subitem 1",
"url" : "menu2subitem1.html"
} ]
},
{
"name" : "Menu 3",
"url" : "menu3.html",
"submenu" : [
{
"name" : "menu 3 subitem 1",
"url" : "menu3subitem1.html"
},
{
"name" : "menu 3 subitem 1",
"url" : "menu3subitem1.html"
} ]
}
];
Here is the recursive function: Code: function buildMenuHTML(menuData,level) {
var ul;
if (level == 1) {
ul = "<ul id='menu'>";
} else {
ul = "<ul class='level" + level + "'>";
}
for (i = 0; i < menuData.length; i++) {
menuItemData = menuData[i];
ul += "<li>";
ul += "<a href='" + menuItemData.url + "'>" + menuItemData.name + "</a>";
if (typeof menuItemData.submenu != 'undefined') {
ul += buildMenuHTML(menuItemData.submenu,level + 1);
}
ul += "</li>";
}
ul += "</ul>";
return ul;
}
Here is how the function is called initially: Code: buildMenuHTML(test,1); This is it's return value (with indentation added for readability): Code: <ul id='menu'>
<li><a href='menu1.html'>Menu 1</a>
<ul class='level2'>
<li><a href='menu1subitem1.html'>menu 1 subitem 1</a></li>
<li><a href='menu1subitem2.html'>menu 1 subitem 2</a></li>
</ul>
</li>
</ul>
'Menu 2' and 'Menu 3' don't show up! I'm sure it's something small that I'm overlooking, but any help would be appreciated. How would I add up a array of numbers in a function? My numbers keep getting written as strings, instead of adding onto each other. I am a beginner. function (myNumbers) { var number = [6,9,10,13,14]; var total = 0; for(var total=0; total < number.length; total = total + 1) { total = total + number; document.write(total); } } myNumbers(); This is just an excercise. Goodafternoon! What im trying to do is get the users location (from the iPhone) which I have working and store it in a MySQL database (semi works). My problem is that to get the location, you need to use javascript. So I thought of using Ajax to post that back to the server. I have very little knowledge in Javascript, and Ajax, so this has been a bit of a struggle. Iv tried to learn how to do it with a tutorial: http://www.tizag.com/ajaxTutorial/ajax-javascript.php And this is what I got: PHP Code: <?php function is_iPhone($agent='') { if(empty($agent)) $agent = $_SERVER['HTTP_USER_AGENT']; if(!empty($agent) and preg_match("~Mozilla/[^ ]+ \((iPhone|iPod); U; CPU [^;]+ Mac OS X; [^)]+\) AppleWebKit/[^ ]+ \(KHTML, like Gecko\) Version/[^ ]+ Mobile/[^ ]+ Safari/[^ ]+~",$agent,$match)) { return "YES"; } elseif(stristr($agent,'iphone') or stristr($agent,'ipod')){ return "MAYBE"; } else { return "NO"; } } echo is_iPhone(); ?> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iPhone 3.0 geolocation demo</title> <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport"/> </head> <body> <script language="javascript" type="text/javascript"> <!-- //Browser Support Code function ajaxFunction(){ var ajaxRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari ajaxRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){ document.myForm.time.value = ajaxRequest.responseText; } } ajaxRequest.open("GET", "UpdateLog.php?lat=" + Lat + "&long=" + Long + "&acc=" + Acc, true); ajaxRequest.send(null); } //--> var Lat = "" var Long = "" var Acc = "" function handler(location) { var message = document.getElementById("message"); message.innerHTML ='<img src="http://maps.google.com/maps/api/staticmap?center=' + location.coords.latitude + ',' + location.coords.longitude + '&zoom=12&size=400x400&markers=color:blue|label:S|'+ location.coords.latitude +','+ location.coords.longitude +'&sensor=true" alt="some_text"/>'; message.innerHTML+="<p>Longitude: " + location.coords.longitude + "</p>"; message.innerHTML+="<p>Latitude: " + location.coords.latitude + "</p>"; message.innerHTML+="<p>Accuracy: " + location.coords.accuracy + "</p>"; Lat = location.coords.latitude Long = location.coords.longitude Acc = location.coords.accuracy } navigator.geolocation.getCurrentPosition(handler); ajaxFunction(); </script> <div id="message">Location unknown</div> <a href="#" onclick="ajaxFunction();" >Send</a> </body> </html> Now this works if the user clicks on "Send" that I made, but I want it to do it without the user having to click send. If anyone could help me with this, or point me in a different direction that would be better then your help would be greatly appreciated. Thanks in advance for your help. EDIT: The PHP side of this works, that is something I know about lol. Hi there, I've been scouring the web and my mind for the last 24 hours trying to find a script that will work for what I need. It seems like it would be something super simple. I need visitors to my site to be able to search if we offer service in their area. i.e. Enter Zip Code: [Search Field] (Submit Button) Pop-up results or a results page with one of two responses. Yes, we offer service. No, we do not cover your area. Something similar to what this company has on their site, http://www.oilpatchfuel.com/Pages/Welcome.aspx Any help is a greatly GREATLY appreciated!! Hello I would like to know how this is not functional. surely passing the function to another function would work so I can use the same variables without having to write it out again. [ICODE] <html> <head> <title>Number Conversions</title> <script> function addNumbers () { var firstnumber = document.calculator.myFirstNumber.value; var secondnumber = document.calculator.mySecondNumber.value; var total = parseInt(firstnumber) + parseInt(secondnumber); document.calculator.myTotal.value = total; document.calculator.myHex.value = total.toString(16); document.calculator.myOct.value = total.toString(8); document.calculator.myBinary.value = total.toString(2); document.write("End of Calculation."); } function subtractNumbers (addNumbers) { var total = parseInt(firstnumber) - parseInt(secondnumber); } </script> </head> <body> <form name="calculator"> First Number <input type=text name="myFirstNumber" value=0 size=3> <br> Second Number <input type=text name="mySecondNumber" value=0 size=3><br><br> <input type="button" value="ADD" onclick="addNumbers();"> <input type="button" value="SUBTRACT" onclick="subtractNumbers();"><br> Total <input type=text name="myTotal" value=0 size=3><br> Binary <input type=text name="myBinary" value=0 size=8><br> Octal <input type=text name="myOct" value=0 size=3><br> Hexidecimal <input type=text name="myHex" value=0 size=3><br> </form> </body> </html> [ICODE] I made a 50th anniversary guestbook to add memories/etc about our organization. The people can look at the entries and then if they want to add one of there own, there's a link that should pop up a form in a new for them to add it. I have no idea why this pop is not working in Internet Explorer (both IE6 and 7). It works beautifully in Firefox. I have no idea how you can go wrong with window.open. I'm stuck. Again, only the actual pop up function doesn't work. Everything else seems to be working fine. I included all of my code though even for the tab navigation because the link to the pop up form changes based on what tab they are in (i.e. if they're looking at the past memories tab and click on the link, it takes them to the past memories form). I know it's probably TMI on the code, but I thought it might be somehow related and better safe than sorry, right? HTML Page Code: <html>
<head>
<title>50th Anniversary Reflections</title>
<script type="text/javascript" src="js/guestbook.js"></script>
<link href="css/guestbook.css" media="all" type="text/css" rel="stylesheet">
</head>
<body>
<div id="guestbook_container">
<div id="tab_nav_container">
<ul>
<li><div id="tab_1" class="tabs_on" onclick="tabsClass.switchTab(this);"><a target="gstbk_frame" href="guestbook_query.asp?cat=1" onclick="change_value(1);">Past Memories</a></div></li>
<li><div id="tab_2" class="tabs_off" onclick="tabsClass.switchTab(this);"><a target="gstbk_frame" href="guestbook_query.asp?cat=2" onclick="change_value(2);">Career Impact</a></div></li>
<li><div id="tab_3" class="tabs_off" onclick="tabsClass.switchTab(this);"><a target="gstbk_frame" href="guestbook_query.asp?cat=3" onclick="change_value(3);">Future Wishes</a></div></li>
<li><div id="new" class="tabs_off" onclick="popupform();">Share Your Memories</div></li>
</ul>
</div><!-- end tab_nav_container -->
<div id="tab_content_container">
<div id="tab_1_data" class="tab_content"><p class="tab_category">What is your most important memory of NACUA?</p></div>
<div id="tab_2_data" class="tab_content" style="display: none;"><p class="tab_category">How has NACUA benefitted you and your career?</p></div>
<div id="tab_3_data" class="tab_content" style="display: none;"><p class="tab_category">What is your most important wish or hope for NACUA's future?</p></div>
</div><!-- end tab_content_container -->
<script type="text/javascript">
tabsClass.addTabs("tab_nav_container");
</script>
<br class="clear" />
<div id="iframe_container">
<iframe name="gstbk_frame" id="gstbk_frame" src="guestbook_query.asp?cat=1" width="730px" height="550px" scrolling="auto" frameborder="none"></iframe>
</div><!-- end iframe_container -->
<br class="clear" />
</div><!-- end guestbook_container -->
</body>
</html>
Here's the guestbook.js file: Code: //***** ASSIGN/CHANGE CATEGORY VALUES *****
function popupform(){
var href;
href="guestbook_submission_form.asp?cat="+catValue;
window.open(href, "Submission Form", 'width=600, height=400, scrollbars=no');
}
var catValue = "1"
function change_value(catChange){
catValue=catChange;
change_text();
}
function change_text(){
if(catValue=="1"){
document.getElementById("new").innerHTML = "<a href='#' style='color:#ffffff;'>Share Your Memories!</a>";
}
if(catValue=="2"){
document.getElementById("new").innerHTML = "<a href='#' style='color:#ffffff;'>Share Your Career Experiences!</a>";
}
if(catValue=="3"){
document.getElementById("new").innerHTML = "<a href='#' style='color:#ffffff;'>Add Your Own Wish!</a>";
}
}
//***** ASSIGN/CHANGE VALUES AND TABS *****
function assignCategory(cat){
document.form.category.value=cat;
}
function onLoadAssignAndSwitch(cat){
assignCategory(cat);
tabsClass.addTabs("tab_nav_container");
var initialTab = "tab_" + cat + "_data"
if (initialTab != "tab_1_data"){
document.getElementById(initialTab).style.display = "";
document.getElementById("tab_1_data").style.display = "none";
}
document.getElementById("tab_" + cat).className = "tabs_on";
}
function assignAndSwitch(element, cat){
tabsClass.switchTab(element);
assignCategory(cat);
}
//***** TABBED MENU *****
var tabsClass = {
tabSetArray: new Array(),
classOn: "tabs_on",
classOff: "tabs_off",
addTabs: function (tabsContainer) {
tabs = document.getElementById(tabsContainer).getElementsByTagName("div");
for (x in tabs) {
if (typeof(tabs[x].id) != "undefined") {
this.tabSetArray.push(tabs[x].id);
} else {}
}
},
switchTab: function (element) {
for (x in this.tabSetArray) {
tabItem = this.tabSetArray[x];
dataElement = document.getElementById(tabItem + "_data");
if (dataElement) {
if (dataElement.style.display != "none") {
dataElement.style.display = "none";
} else {}
} else {}
tabElement = document.getElementById(tabItem);
if (tabElement) {
if (tabElement.className != this.classOff) {
tabElement.className = this.classOff;
} else {}
} else {}
}
document.getElementById(element.id + "_data").style.display = "";
element.className = this.classOn;
}
};
I'm not that advanced in javascript (although not a total idiot) Any help and/or suggestions would be greatly appreciated! Thank you! Code: function splook(val){
return speciesDB.queryBy(function(row){
return row.data.species_id == val;
}).itemAt(0).data.speciesDB;
}
and the speciesDB Code: {success:true,rows:[{"species_id":"1","species_idx":"1","species":"Boa Constrictor"},{"species_id":"2","species_idx":"2","species":"Ball Python"},{"species_id":"3","species_idx":"3","species":"Reticulated Python"},{"species_id":"4","species_idx":"4","species":"SriLanka Python"},{"species_id":"5","species_idx":"5","species":"Blood Python"},{"species_id":"6","species_idx":"6","species":"Burmese Python"}]}
I need to take val and match it with the data and return species. I just can't figure it out though! Thanks! So, basically what i'm doing here is hovering over the h2 heading and toggling the paragraph text. What i'm having a problem doing is changing the h3 headings so that they toggle the same way...is there a way to do this within this function without ids/classes? Code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#hdg').hover(function() {
$('div[title=latin]').toggle();
$('div[title=english]').toggle();
$('#').html('<h3>English</h3>');
});
});
</script>
Hi, I rarely use javascript so pardon my newbieness. I'm trying to create a function that is triggered by a <select> onchange event. It's supposed to save the newly selected value in a variable, then refer the user to a link location + variable. This is what I tried: Code: <script type="text/javascript">
function categoryRef()
{
var a = this.options[this.selectedIndex].value;
document.location = 'recommend.php?cat=' + a;
}
</script>
<select name="category" onChange="categoryRef()">
<?php
$getCategoryQuery = "SELECT category FROM categories ORDER BY category";
$ConnectQuery = $database->query($getCategoryQuery);
while($category = mysql_fetch_array($ConnectQuery)){
if($getCategory == $category['category']){
echo "<option selected='selected'>" . $category['category'] . "</option>";
}
else{
echo "<option>" . $category['category'] . "</option>";
}
}
?>
</select>
When I try this and change option nothing happens. Any pointers? Hello was following a tutorial online from bucky. and created a new example with different variables and such. My code in my eyes looks absolutely fine but however it does not display can anyone spot the problem? [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"> function cigerettes (brand, tar, price) { this.brand=brand; this.tar=tar; this.price=price; this.ReducedCost = discount; } function discount() { var reduction = 20; var finalCost = this.price - reduction; return finalCost; } var packet1 = new cigerettes("Mayfair", "2.0 mg", 399); var packet2 = new cigerettes("Sovereign", "3.4 mg", 425); </script> </head> <body> <script type="text/javascript"> document.write(packet1.brand() + " they contain " + packet1.tar() + "of tar " + "the packet cost me " + packet1.price() + ". With discount I got them for: " + packet1.ReducedCost()); </script> </body> </html> [code] Hi, I have a small script that tries to open a child window. if successful, it then closes the child window and redirects the parent window. If this process fails, there is no child window, no redirection. the script below works fine in FireFox but in Chrome, if the process fails, the redirection still happens. I'm new to JS would appreciate your help many thanks Code: <script type="text/javascript">
function openwindow(){
testWindow = window.open("popup.php","interaction");
setTimeout(function() { testWindow.close(); },1000);
setTimeout(function() { window.location = "http://www.google.com"; },1000);
}
</script>
hi there i'm a newb so be nice lol --> I want to use javascript in an array to submit content. I have some php background so using some techniques I worked this out. >> I need to select bathroom details and the script needs to be user friendly, however I have multiple bathrooms that can be selected. So based on a drop down list I need to select the bathrooms needed and then I will get more options as stated below. These options will need to be submitted so I need different varibles for each item selected I expect that you'll have a better way to do it I just want it to work my HTML script LOOKED as follows Code: <!-- BATHROOM TYPE SELECTOR HTML-->
<label>
<input name="fullbathr" type="checkbox" value="fullbathr" onClick="checker('yesFullba'); UpdateChecks('option');" />
Full Bathroom </label>
<span id="yesFullba" style="visibility:visible">
|
<input name="babath" type="checkbox" value="babath" id="babath" onClick="change('bathselba'); UpdateChecks('option');";/>
Bath </label>
|
<input name="bashower" type="checkbox" value="bashower" id="bashower" onClick="change('showerselba'); UpdateChecks('option');" />
Shower </label>
<span id="bathselba" style="visibility:hidden">
<br /> Bath Type: <label>
<input type="radio" name="bathtype" value="standardba" id="bathtype_0" />
Standard</label>
<label>
<input type="radio" name="bathtype" value="ovalba" id="bathtype_1" />
| Oval</label>
<label>
<input type="radio" name="bathtype" value="cornerba" id="bathtype_2" />
| Corner</label>
<label>
<input type="radio" name="bathtype" value="spaba" id="bathtype_3" />
| Spa</label>
</span>
<span id="showerselba" style="visibility:hidden">
<br /> Shower Heads: <label>
<input type="radio" name="showerheadba" value="singlesho" id="showerheadba_0" />
Single Head</label>
<label>
<input type="radio" name="showerheadba" value="doublesho" id="showerheadba_1" />
| Double Head</label> </span>
</span>
<br />
<!-- end BATHROOM TYPE SELECTOR HTML -->
i converted it as follows Code: <!-- CREATE BATHROOMS -->
function createbaths(number2) {
databaths = "";
inter = "'";
dinter = '"';
spaces=" ";
if (number2 < 7 && number2 > -1) {
for (i=1; i <= number2; i++) {
databaths = databaths + "<br><strong>Bathroom " + i + " :</strong><br>"
<!-- BATHROOM TYPE SELECTOR JAVASCRIPT-->
+ " <label>"
+ " <input name=" + dinter + "fullbathr" + dinter
+ " type=" + dinter + "checkbox" + dinter
+ " value=" + dinter + "fullbathr" + dinter
+ " onClick=" + dinter + "checker(" + inter + "yesFullba" + inter + "); "
+ "UpdateChecks(" + inter + "option" + inter + ");" + dinter + " />"
+ "Full Bathroom </label>" + "<span id=" + dinter + "yesFullba" + dinter
+ " style=" + dinter + "visibility:visible" + dinter + "> | "
+ "<input name=" + dinter + "babath" + dinter
+ " type=" + dinter + "checkbox" + dinter
+ " value=" + dinter + "babath" + dinter
+ " id=" + dinter + "babath" + dinter
+ " onClick=" + dinter
+ "change(" + inter + "bathselba" + inter + "); "
+ "UpdateChecks(" + inter + "option" + inter + ");"
+ dinter + ";/>"
+ "Bath </label> | "
+ "<input name=" + dinter + "bashower" + dinter
+ " type=" + dinter + "checkbox" + dinter
+ " value=" + dinter + "bashower" + dinter
+ " id=" + dinter + "bashower" + dinter
+ " onClick=" + dinter
+ "change(" + inter + "showerselba" + inter + "); "
+ "UpdateChecks(" + inter + "option" + inter + ");"
+ dinter + " />"
+ "Shower </label> "
+ "<span id=" + dinter + "bathselba" + dinter
+ " style=" + dinter + "visibility:hidden" + dinter + ">" + "<br />"
+ "Bath Type: <label>"
+ "<input type=" + dinter + "radio" + dinter
+ " name=" + dinter + "bathtype" + dinter
+ " value=" + dinter + "standardba" + dinter
+ " id=" + dinter + "bathtype_0" + dinter
+ " /> "
+ "Standard</label>"
+ "<label>"
+ "<input type=" + dinter + "radio" + dinter
+ " name=" + dinter + "bathtype" + dinter
+ " value=" + dinter + "ovalba" + dinter
+ " id=" + dinter + "bathtype_1" + dinter
+ " /> | "
+ "Oval</label>"
+ "<label>"
+ "<input type=" + dinter + "radio" + dinter
+ " name=" + dinter + "bathtype" + dinter
+ " value=" + dinter + "cornerba" + dinter
+ " id=" + dinter + "bathtype_2" + dinter
+ " /> | "
+ "Corner</label>"
+ "<label>"
+ "<input type=" + dinter + "radio" + dinter
+ " name="+ dinter + "bathtype" + dinter
+ " value=" + dinter + "spaba" + dinter
+ " id=" + dinter + "bathtype_3" + dinter
+ " /> | "
+ "Spa</label></span>"
+ " <span id=" + dinter + "showerselba" + dinter
+ " style=" + dinter + "visibility:hidden" + dinter
+ "><br />"
+ " Shower Heads: <label>"
+ "<input type=" + dinter + "radio" + dinter
+ " name=" + dinter + "showerheadba" + dinter
+ " value=" + dinter + "singlesho" + dinter
+ " id=" + dinter + "showerheadba_0" + dinter
+ " />"
+ "Single Head</label>"
+ "<label>"
+ "<input type=" + dinter + "radio" + dinter
+ " name=" + dinter + "showerheadba" + dinter
+ " value=" + dinter + "doublesho" + dinter
+ " id=" + dinter + "showerheadba_1" + dinter
+ " /> | "
+ "Double Head</label>"
+ " </span> </span> <br /> "
<!-- end BATHROOM TYPE SELECTOR JAVASCRIPT -->
The entire forum is using a few different functions I've setup for this section i've got these sets Code: <!-- -->
function change(id){
if (document.all[ id ].style.visibility == 'hidden')
{
document.all[ id ].style.visibility = 'visible';
document.all[ id ].focus();
}
else
{
document.all[ id ].style.visibility = 'hidden';
document.all[ id ].value = '';
document.all[ id ].checked = '';
}
}
<!-- -->
<!-- for full bathroom selector-->
function UpdateChecks(which) {
if (which == 'fullBathroom') { fullBathroomIsChecked(); }
else if(which == 'option') { BoxesCheck(); }
}
function fullBathroomIsChecked() {
if(document.all.fullbathr.checked == false) { BoxesCheck(); }
else {
document.all.babath.checked = false;
document.all.bashower.checked = false;
}
}
function BoxesCheck() {
document.all.fullbathr.checked = false;
if((document.all.babath.checked == true) && (document.all.bashower.checked == true))
{
document.all.fullbathr.checked = true;
document.all.yesFullba.style.visibility = 'hidden';
fullBathroomIsChecked();
}
}
<!-- for full bathroom selector END -->
CURRENTLY I have a drop down list from 1 to 6 when a bathroom is selected lets say 3 then it SHOULD display full - bath - shower - PER EACH BATHROOM if bath and shower is selected they disappear and full remains ticked if u tick full bath and shower disappear. included a sub cat. that changes based on the above selection this works in html but The bathroom varibles in the javascript need to be changed to suite a changing varible I based what I understand that an array will need to be added but how to i adjust the script correctly. I might work it out just have a bit of overload at the moment. Thanks in advance Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>
</head>
<SCRIPT LANGUAGE = JavaScript>
function estimateHolidays()
{
var service1;
var service2;
var service3;
var txtGrade;
var txtHolidays;
var dblEntitlement;
var strService;
strService = cmbService.value;
if (strService == "Service1")
{
dblEntitlement = 20;
}
else if (strService == "Service2" && Grade--"1")
{
dblEntitlement = 24;
}
else if (strService == "Service2" && Grade--"2")
{
dblEntitlement = 26;
}
else if (strService == "Service2" && Grade--"3")
{
dblEntitlement = 28;
}
else if (strService == "Service3")
{
dblEntitlement = 30;
}
else
{
dblEntitlement = "Error! Please try again.";
}
txtHoliday.value = dblEntitlement;
}
</SCRIPT>
<body>
<p>
<input name="txtGrade" size="25" value="Enter Your Staff Grade">
</p>
<p>
Years of Service: <select name="cmbService" size="1">
<option value="Service1">Less than 5 years service</option>
<option value="Service2">5 to 9 years service</option>
<option value="Service3">10 or more years of service</option>
</select>
</p>
<p>
<input type="button" value="Estimate Holidays" name="cmdEstimateHolidays" onclick="estimateHolidays()">
</p>
<p>
Holiday Entitlement: <input name="txtHolidays" size="25">
</p>
</body>
</html>
Why won't this code work!? Its driving me mad. Hi all, I have a newbie question. I have just started working with javascript and would appreciate some guidance. I have a webpage and there are products for sale on it(this is not live it is merely being used as practice project). Beside each product is a description a price and an 'add to cart' button. My cart is simply a div with an id of 'cart' and it has a text box within it. I need the product name to be displayed within the div (this, I have working), I also need to display the product price in the text box once the button(add to cart ) for that particular product has been pressed. Also when the button for another product is pressed, I want the cost/value for that product to be added to the other value and displayed in the text box in the cart div... I apologise for rambling on but this is the best way of me explaining my needs.... Here's where i am right now.. The HTML snippet Code: <div id ="cart">
<p><img src="images/shopping-cart.png" alt ="cart"/>Your Cart</p>
<div id="sum"><!--(this is the div where the total goes)-->
<input type="text" id="total" value="0" /><p>€ Your Total <input type="reset" value = "reset" /></p>
</div>
</div>
<h2 id ="black">Blackcurrent<br /></h2>
<p>€ 12.00 <input type = "submit" value ="add to cart" onClick = "shoppingCart('Blackcurrent',12)" /></p>
And the javascript: Code: alert ("working");
function shoppingCart (itemName,itemValue)
{
/* var thePrice = Number(itemValue);
return thePrice;*/
document.getElementById ("cart").innerHTML += itemName + "<br/>";
document.getElementById('total').value = Number(document.getElementById('total').value) + itemValue;
}
I hope i have posted correctly and am aware that i have only posted a segment of the HTML.. Please let me know if you need any more code or info.. Thanks a lot in advance for any help... I am trying to use a user defined function and text area for a project, but nothing is showing up in the text area when i click the button. Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function Greet()
// Assumes: firstNameBox and companyName contain names
// Results: writes a message with those names in messageArea
{
firstName = document.getElementById("firstNameBox").value;
companyName = document.getElementById("companyNameBox").value;
message = "To whom it may concern, my name is " + firstName + ", I am very interested in the job opening at, " + compnayName +
". I feel that I would greatly contribute to " + companyName +
" success. I feel I fit the requirements needed to become an employee at " + companyName +
". I look forward to hearing from you.";
document.getElementById("messageArea").value = message;
}
</script>
</head>
<body>
<p>
Enter your first name: <input type="text" id="firstNameBox" size="15" />
<br />
Enter the Company name: <input type="text" id="companyNameBox" size="15" />
</p>
<p>
<input type="button" value="Click for Greeting" onclick="Greet();" />
</p>
<p>
<textarea id="messageArea" rows="4" cols="40"></textarea>
</p>
</body>
I have a simple function to display an image when called, but if I try to rewrite the function to take the image as an argument, it stops working. I've looked at other function examples on the web but can't figure out what I am missing. Can anyone help? works: Code: <html>
<script language="JavaScript">
var ImagePlusSign = '<img src="plus.jpg" name="slide" width="65" height="50"/>';
function FlashImagesThenWait()
{
document.getElementById("first").innerHTML = ImagePlusSign
}
setTimeout(FlashImagesThenWait, 1500);
</script>
<body>Hello.
<div id="first">
</div>
</body>
</html>
does NOT work : Code: <html>
<script language="JavaScript">
var ImagePlusSign = '<img src="plus.jpg" name="slide" width="65" height="50"/>';
function FlashImagesThenWait(z)
{
document.getElementById("first").innerHTML = z
}
setTimeout(FlashImagesThenWait(ImagePlusSign), 1500);
</script>
<body>Hello.
<div id="first">
</div>
</body>
</html>
I imagine this would be very simple for someone who knows javascript. I want to have three fields. First field is "posted speed limit", second field is "actual speed" and third field will be the output field. All the script needs to do it subtract the posted speed from the actual speed and add a ZERO to the end; which is the amount of the speeding ticket. The minimum fine is $100, however. So, 5 miles over the speed limit would be $100 (minimum value) 15 miles over the speed limit would be $150 (add a zero) 35 miles over the speed limit would be $350. etc. I know very little Javascript, if anyone could help me out with this, I'd appreciate it. Thanks, Sean Hi, I am facing a problem in passing replace() function as an argument in user defined java function, can any one help me how to resolve it? intention is to pass a file path to my user defined function, but before passing the path i want to replace the character '\' to '\\' I am posting my javascript function he <a href="#" onclick="OpenDocPreview('<%# Eval("PATH")%>'.replace(/\\/g,"\\\\"), '<%# Eval("Filename")%>')"><%# Eval("DocTitle") %></a> function OpenDocPreview(url, docname) { alert('message from search base : ' + url + ' ' + docname); } thank you, I was working on a tutorial for some ajax uploading stuff and I ran across a new function syntax I don't recognize. I am not a Javascript pro, but I am not a newbie either. here is the code I am working on: Code: function handleFileSelect(e){
var files = e.target.files;
var output = [];
for(var i=0,f;f=files[i];i++){
if(f.type.match('image.*')){
var reader = new FileReader();
reader.onload = (function(theFile){
return function(e){
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="',e.target.result,'" title="',theFile.nbame,'" />'].join('');
document.getElementById('list').insertBefore(span,null);
};
})(f);
reader.readAsDataURL(f);
}
}
document.getElementById('list').innerHTML = '<ul>'+output.join('')+'</ul>';
}
document.getElementById('files').addEventListener('change',handleFileSelect,false);
To be a little more clear, the code in question is that is the very middle. The syntax I don't understand is: Code: class.event = (function(arguments){
//stuff you put in a function...
})(more Arguments?);
I tried to customize a simple one to learn for myself and I wrote this: Code: var a = 'A';
var b = 'B';
test = (function(t){
alert(t);
alert(b);
})(b);
test(a);
The browser would alert 'B' and that's it. The console would tell me that 'test is not a function.' OK, so I am confused. The topmost code works. What I am wondering is what the syntax is called for creating a function (or event listener?) that way, and how it works. Although if I new what it was called I could just google how it works. Hi! I'm trying to toggle a class and one works and the other does not and I don't know why. I'm just getting my feet wet with jquery and javascript and I figured this was a pretty easy task to take on! Maybe. Link to the page: Franklin Township Soccer Club - Change Field Status My sad, sorry attempt =| Code: $( "li.open" ).click(function() {
$( this ).toggleClass( "closed" );
});
$( "li.closed" ).click(function() {
$( this ).toggleClass( "open" );
});
The first function works with open, so I figured I'd just use opposite on closed! Ha! I don't think so! In the end within those function there is an element in a form on that page it's hidden. I'd like to change the value from a 0 to 1 for vice versa. That' will be my next step. If you could give me a little nudge in the right direction I'd appreciate it! But first understanding why one works and the other does not, that is the primary mission! I do appreciate any help given! Dave |
|||||||