|
JavaScript - A Simpler Approach
Hi and hope you can help,
I'm doing some course work and the current lesson I'm doing is about substituting images depending on onclick functions. I've attached the HTML / JavaScript as a txt file, this is their sample file and it is rather bulky and repetetive. I was wondering whether it would be possible to simplify the code as there is a lot of repetition, there are 8 question functions and 8 answer functions, I'm wondering if this could be simplified into 1 question and 1 answer function. Thanks for your interest, R Similar TutorialsHi again folks! A code I did recently was that 10 football teams had to register and the program had to ask the question "please enter your team" ten times then show the display on screen. This code works fine and does it jobs but I realized that I did this program a long winded way (shown below) : <script type="text/javascript"> //ask to enter names var enteredteam1= prompt("Please enter first team.", ""); //each team is shown as different variable var enteredteam2= prompt("Please enter second team.", ""); var enteredteam3= prompt("Please enter third team.", ""); var enteredteam4= prompt("Please enter forth team.", ""); var enteredteam5= prompt("Please enter fifth team.", ""); var enteredteam6= prompt("Please enter sixth team.", ""); var enteredteam7= prompt("Please enter seventh team.", ""); var enteredteam8= prompt("Please enter eighth team.", ""); var enteredteam9= prompt("Please enter ninth team.", ""); var enteredteam10= prompt("Please enter final team.", ""); var team= []; team[1]= enteredteam1 //the team should equal the entered value for the space team[2]= enteredteam2 team[3]= enteredteam3 team[4]= enteredteam4 team[5]= enteredteam5 team[6]= enteredteam6 team[7]= enteredteam7 team[8]= enteredteam8 team[9]= enteredteam9 team[10]= enteredteam10 document.write("<h1>Registered Teams</h1>"); // display the teams on the screen beside number document.write("<b>1.</b>" + team[1]); //write the entered value on the screen document.write("<br><br><b>2.</b>" + team[2]); document.write("<br><br><b>3.</b>" + team[3]); document.write("<br><br><b>4.</b>" + team[4]); document.write("<br><br><b>5.</b>" + team[5]); document.write("<br><br><b>6.</b>" + team[6]); document.write("<br><br><b>7.</b>" + team[7]); document.write("<br><br><b>8.</b>" + team[8]); document.write("<br><br><b>9.</b>" + team[9]); document.write("<br><br><b>10.</b>" + team[10]); </script> I was wondering for future references could anyone suggest a simpler code to do something similar? For instance what if I wanted to ask the question but I didn't know how many teams were going to be entered. It would ask the question (enter your team) until the user clicked on a button saying "finished" or something. Once again, I am new to this field, so any code with comments would be helpful! Can anyone tell me why the string comparison test doesn't work in this javascript function? It works if you use just text between the currentItem div tags, but not when you use html for an image. I even tried to use iso characters instead of angle brackets, as in "<img src=expand.png></img>" and still no dice. Why not? Code: <html>
<head></head>
<body>
<script language="JavaScript">
function toggleValue()
{
if(document.getElementById("currentItem").innerHTML != "<img src=expand.png></img>")
{
document.getElementById("currentItem").innerHTML = "<img src=expand.png></img>";
}else
{
document.getElementById("currentItem").innerHTML = "<img src=collapse.png></img>";
}
}
//-->
</script>
<table width =" 200" border="0">
<tr>
<td colspan=2><br><center>
<a href="javascript:toggleValue()">Toggle Value</a>
</center></td>
</tr>
<tr>
<td>
<strong>Value:</strong>
</td><td>
<div id="currentItem"><img src=expand.png></img></div>
</td>
</tr>
</table>
</body>
</html>
Thanks, Neil Hi guys, any help would be greatly appreciated. I am looking to make a group of questions (FAQs pretty much) and because the answers are so long, I need to hide the answers. So only the questions would be viewable and once the user clicks on the question, the corresponding answer will drop down below. What is the easiest way to go about doing this? I've tried messing around with jquery treeview but I don't think the task is not complicated enough for that. cheers.
Hey guys, here's my code 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 src="jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
#box {
background: red;
width: 300px;
height: 300px;
display: none;
}
#box2 {
background: green;
width: 300px;
height: 300px;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$('a.about').click(function() {
$('#box').stop().slideToggle(2000);
});
});
$(function() {
$('a.contact').click(function() {
$('#box2').stop().slideToggle(2000);
});
});
</script>
</head>
<body>
<div id="box"></div>
<div id="box2"></div>
<a href="#" class="about" />about</a>
<a href="#" class="contact" />contact</a>
</body>
</html>
Basically I want to make it so that if you click about, and about is open, once you click contact it closes about before opening contact? I'm not sure how to approach this though whether I should use if statements or something? I'm pretty new to jquery I'm learning JavaScript, but want to make an accounting program(site) for my brother. It will be backed by php and mysql. I've found that javascript doesn't "really" have multidimensional arrays. The ways I figure to collect name, address, phone, etc could be any of these: 1. Create a customer object (customer.name, customer.address) 2. Use the mutidimensional array that JavaScript does offer. (var customers [ [], [] ]) 3. Create bunches of variables (var customerName, var customerAddress) or any other method I have found (will find). The information will for a customer will be filled out via HTML forms, processed by JavaScript then sent up to the PHP/MySQL database. OR should I just use PHP to deal with these directly? My impression is to use client side technology as much as possible or is this wrong? -Matt I have the need to utilize a pop-up calendar about three times on one of my pages. I created the calendar in a separate html file, complete with jquery functions for pulling the date once a user clicks their desired day. What is the best approach to have that calendar pop up in small window that hovers on the page so that I can take the users clicked day and utilize it on the main page? Should I use the jquery load () function to load the calendar into a div on the main page? Or should I include the calendar file in my header? I'm just asking for some ideas and guidance. I'm almost positive this question will make you groan "neewwwbie!".... I have a simple javascript that decides which 'div' to make visible, based on another element within the html. What i want now is to create a page where someone can view all the possible divs in that javascript that might appear and edit them (including href's, ital, bold and image tags.) Much like a CMS system, but the information is within a javascript, not a database. I would assume it's possible. What's a good way to approach this? It sounds like Javascript cannot edit .txt files. Is there a way to have the user access and edit an .xml file and just pull that into the div tag, instead of text? Hi All, I am working on a page with a webform and a subform. I have two related tables where my main form will populate the one side of the relationship and the subform will be for the many side. I am thinking about using an HTML table to hold my subform fields with javascript to dynamically add rows for additional records. I am having trouble with the design of the form processing script, however as since the index on the parent record does not exist at the time of processing I can't think of a way to populate the link field for the child records. The only thing I can think of is to have my page's onload event create a "blank" record (generating the index and storing it in a hidden field) and then essentially make the proceesing script be an update rather than a create. This of course would involve creating some sort of delete function if the user leaves the page without submiting the form. I am not sure this is the best approach but it is all I can come up with. I am open to any ideas or guidance from the community on either my subform idea or processing script idea and I thank you in advance. Kind regards, Ken I have many radio buttons associated with questions on a page with Yes/No options. Depending on if Yes or No is selected (varies with question), I need to prevent the user from going off of the page and somehow "mark" the questions that are answered "incorrectly/not preferred". I could probably put validation on each individual radio button and display a message when going off the page, but I'm looking to make this more dynamic. One idea I had was to put a function on each radio button's onChange event and build an array using .push() to construct the array with all the radio button IDs that are answered incorrectly. I ran into problems when deleting from the array when the radio button was changed back to a correct response though. What may be best is to somehow indicate which radio buttons need looked at when leaving the page and then run a function or case statement over all the radio buttons to build an object? I'm not sure what approach to take. Any thoughts are appreciated. Thanks. |
|||||||