|
JavaScript - Javascript Help! Building New Script Using Arrays
Hi,
I'm new to JS and I am trying to build my first script. My problem, is I'm trying to build a multi hide/show script, displaying paragraphs of information. If I want multiple variables for the script do I have to use an array? and if so, how can I construct this array? Here is my script as of now, <!-- // this tells jquery to run the function below once the DOM is read $(document).ready(function() { // choose text for the show/hide link var showText="Resume"; var hideText="Hide"; var profile_showText="Profile"; var profile_hideText="Hide"; // append show/hide links to the element directly preceding the element with a class of "toggle" $(".toggle").prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)'); $(".profile_toggle").prev().append(' (<a href="#" class="profile_toggleLink">'+profile_showText+'</a>)'); // hide all of the elements with a class of 'toggle' $('.toggle').hide(); $('.profile_toggle').hide(); // capture clicks on the toggle links $('a.toggleLink').click(function() { $('a.profile_toggleLink').click(function() { // change the link depending on whether the element is shown or hidden if ($(this).html()==showText) { $(this).html(hideText); } else { $(this).html(showText); } // profile_toggle if ($(this).html()==profile_showText) { $(this).html(profile_hideText); } else { $(this).html(profile_showText); } // toggle the display $(this).parent().next('.toggle').toggle('fast'); // profile_toggle $(this).parent().next('.profile_toggle').profile_toggle('fast'); // return false so any link destination is not followed return false; }); }); }); //--> Right now the script doesn't work with the bottom two variables profile_"ect." Please help, been working on this for sometime and its probably an easy fix for someone experienced. Thanks! Similar TutorialsHi forums, I'm building a website for my class and one of the things I was planning on doing is building a navigation where when you hover over the mouse, depending on which side, I wanted the content to scroll from that particular direction. The problem is, I am terrible at Javascript. I have nothing to work with, just the idea. This is an illustration to what I was referring to. Is there a term for this? All I really need is just something to work with, a redirect to an existing example that vaguely captures this idea along with the source is fine. I tried finding myself, but I only found and worked with one Javascript navigation and it didn't do what I was expecting to do. Any assistance is highly appreciated. So I am working on a fairly difficult project (for my level at least). I actually had this project planned before I even knew JavaScript so I specifically learned JavaScript in order to write this program! Here is my plan: I am writing a javascript program to help students prepare to take an exam (a standardized test). The test consists of 80 questions from various topics in history. The test covers three time spans (0-1000, 1000-1500, 1500-2000) and 4 different question types (ie. politics, culture, economics, foreign relations). Likewise, each question will cover a specific topic, maybe one will be about a specific war and another question will be about a leader. What I want the quiz to do is give a detailed report on the student's strengths and weaknesses. Once the student is done with the quiz and they select "grade" it will take them to the results page which will show them: 1. their score (percent correct) 2. percent correct for each of the time periods. 3. percent correct for each of the question types 4. a recommended chapter reading list based on the questions they got wrong. I did some search on the internet and found a basic script that ive been using. All it does is have the html code for the questions and the, "grade" button only shows the percent correct and which which questions were wrong. Its basically a simple quiz script without any of the advanced features I want. I figure I'll just add the advanced features to this existing script. Here is a link to the example script I am using. So far my script is 100% the same (except different questions and answers). What is the best route to modify that script to add all the features I want. From what I've read on javascript so far. I have to write a function to process each of the elements I want to display on the results page. I have no idea about how to do that though. I am having an issue with this script I wrote. Actually it works the way it is now, but not the way I want it too. This is a random raffle ticket number generater. The guys at the fire department where talking about selling 300 tickets and discussing how they were going to select and call the numbers. It got me thinking and inspired to start messing around with javascript again. It all starts with index.html and a form w/ a button and textarea. When a user clicks the button it will generate a random number and insert it into the textarea. This is accomplished by the Generate(); function that is in Genny.js an external js file. Code: <h2>Raffle Ticket Number Generator</h2> <form name="theform"> <input type="button" name="pickNumber" value="Pick a Winner" onclick="Generate();" /> <br /><br /> <textarea cols="40" rows="25" name="winnersCircle">Winning Numbers Will Display Here! </textarea> </form> This much works just fine. Now onto Genny.js Code: //initialize counter and array
count = 1;
winners = new Array();
function Generate(){
//generate a random number from 0-300
var random_number = Math.floor(Math.random()*301);
//checks output of Math.random() against winners array to see if number has been used already
for (i = 0; i < winners.length; i++ ) {
if ( winners[i] == random_number )
alert("I am so sorry... we have accidently drawn a duplicate number! Please pick again.");
}
//add the number to the array
winners[count] = random_number;
//increment the counter
count++;
//display the stored random number
document.theform.winnersCircle.value = winners.join("\n");
}
This much works...somewhat! It generates the random number and checks the winners array to see if it is already used. If it wasn't used it adds the number to the array, increments the counter, and then displays the number in the textarea of the form, as it should. If the number was used it alerts the user, once the user clicks the button to accept the alert it carries on with the script and adds it to the array again and also displays it. This is not what I want it to do. If the number was used I do not want it added to the array or displayed. I would also like it to regenerate another number without the alert. The alert was wrote in to assist me in checking to see if it was finding a duplicate number, thats all. As an extra, is there a way to also add a numbered list to the results. To show the sequence of the ticket draw. I have messed with this for days and rewrote it over and over. I have used different loops and conditional operators to try and solve this problem. But to no avail. Here I am, asking not for the answer but a push in the right direction. Any help would be great, this is becoming an obsession trying to make it work. The code above is the last attempt at this point. Everything else has returned no values or just errors. Thanks in advance! I know this maybe sounds "newbie", perhaps I am still one. I have 3 divs, all of them in a group "name", there are h1 tags inside them with names too. Well actually I have many many divs like this in several pages so I must use a JS sheet (.js). Code: <div name="area"> <h1 name="stringRed"> Mercury </h1> </div> <div name="area"> <h1 name="stringRed"> Venus </h1> </div> <div name="area"> <h1 name="stringRed"> Earth </h1> </div> The idea is to create an event for the divs, a mouseover event to a div in order to change the color of the words inside the h1 tags. When the mouse is over one particular div the word inside it must change to red. I was trying this Java Script script: (a cross-browser event handler present) Code: function initialize ( ) {
aArea=document.getElementsByName("area");
aStringRed=document.getElementsByName("stringRed");
for (var i=0; i < aArea.length; i++) {
addEvent (aArea[i], 'mouseover', changeColor);
addEvent (aArea[i], 'mouseout', changeOutColor);
}
}
function changeColor() {
????
}
function changeOutColor() {
????
}
Thank you in advanced for any help. This has been resolved. The moment i posted it i realised the mistake i was making . Learnig how to delete my post, until then thought i would sdimply delete the content.
Hi i am confused in one topic and need help, I have a javascript array containing objects like; Object values are ordered as Type, Amount and count. Object 1 => ("A" , 100 ,10) Object 2 => ("C" , 50 ,10) Object 3 => ("A" , 100 ,20) Object 4 => ("B" , 200 ,10) Object 5 => ("A" , 10 ,10) Object 6 => ("B" , 100 ,10) Object 7 => ("C" , 100 ,5) Object 8 => ("C" , 50 ,5) In the end i want to group these objects like ; ("A" , 100,30) (Note : 30 = 20 +10) ("A" , 10,10) ("B" , 200,10) ("B" , 100,10) ("C" , 100,5) ("C" , 50,15) 15 = 10 + 5 How can i do this in javascript, note that the new types will be added to this array ? Hi, I'm kinda newbie in javascript and would really like some help if you wouldn't mind? I'm working with dreamweaver and VBScript and have drop down lists being populated by dynamic recordsets, the tables that are being used are text fields and everything is working fine other than one niggly thing I want to do and just don't seem to be able to get the javascript code right The data I have has two columns; area and technical issue. As the area contains duplicates I have this as a separate drop down list with a distinct in the sql command and from an onclick event from the 'area' drop down list, I get the value of the selected item [var x = document.NewFacilityAdminDetailsTest.ara_component.selectedIndex; var ara_component = document.NewFacilityAdminDetailsTest.ara_component.options[x].value;] all's well so far.... The second drop down list contains all the 'technical issues' which is great, BUT because its a dynamic recordset its for ALL of the areas and I want to be able to take away the technical issue values in the technical issues drop down list that don't belong to the area that's been picked and I also dont' want the user selecting a technical issue that isn't linked of the area. I've tried some of the samples I've found by googling and even the adobe example but they all seem long winded and I never quite get the code right and the second drop down list just keep showing ALL 'technical issues show' for ALL of the 'areas'. Surely there's a bit of javascript to turn the second drop down list recordset into an array, loop through the array and remove the technical issues that don't match the selected value from the 'area' drop down list and put the array into the second drop down list instead of using the recordset? Any help would be soooooo useful. Best Regards Joan, Cheshire Ok so this is probably a simple question but i have hit a wall he So I have 20 arrays with incremental names (course1, course2, course3 ...) What i want to make is a selection box with 20 options. for each option the value would be course1[0] and the text shown would be course1[1]. if i write this code: <code> for (var i=1; i<=20; i++){ var select = document.getElementById("selectiontest") select.options[select.options.length] = new Option (course1[1], course1[0]) } </code> The code works and the correct array values are put as the option text and value. I am having trouble getting the loop to move from course1 to course2, i used the loop counter in the array name like this: <code> for (var i=1; i<=20; i++){ var select = document.getElementById("selectiontest") select.options[select.options.length] = new Option (('course'+i)[1], ('course'+i)[0]) } </code> this is where it stops working. I get 20 values of o. which i assume is the second character of course. How do i tell javascript to incrementally change the array name during the loop? hey guys i have the following code that extracts the information from the questiondiv then i have a for loop to search the array but it keeps returning it has no answer can someone help me please and i know im most probly doing somthing realy silly wrong. P.S some reason the codes indenting got messed up when i pasted it here Code: <html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function code()
{
function getNodes(prop, val, meth, nd, useSelf )
{
var r=[], any= getNodes[val]===true;
nd=nd||document.documentElement;
if(nd.constructor===Array){nd={childNodes:nd};}
for(var cn=nd.childNodes, i=0, mx=cn.length;i<mx;i++)
{
var it=cn[i];
if( it.childNodes.length && !useSelf ){r=r.concat(getNodes(prop, val, meth, it,useSelf ));}
if( any ? it[prop] : (it[prop]!==undefined && (meth ? ""[meth] &&
String(it[prop])[meth](val) : it[prop]==val))){
r[r.length]=it;
}
}//nxt
return r;
};getNodes[null]=true;getNodes[undefined]=true;
//end getNodes()
var answer;
trivia = new Array('test?','test1');
var triviaGet = getNodes(
"data", //examine each node's .data property (only hits text nodes)
/\?/, //looking for text with a "?"
"match", //using String().match method to accept arguments[1]
document.getElementById("questiondiv") // looking in the question div
)[0].textContent.split("?")[0]+"?" //show text of first match
alert(triviaGet);
var i=0;
var answer1;
var answer2;
for(i=0; i < 8400; i++)
{
if(trivia[i] == triviaGet)
{
answer = trivia[i]+1;
document.getElementById("test").innerHTML=(answer)
break;
}
else
{
document.getElementById("test").innerHTML=("Answer not found!");
}
}
//search trivia array for match to question
//when found the answer is the next one in the array so if it finds the question at index 7261 then the answer is in index 7262
// TODO: insert answer into text box...
}
</script>
</head>
<body>
<div style="display: none;" id="questiondiv">
You challenge The Wiseman to a game of trivia, he asks you this question:<br/> <br/>
test?<br/> <br/>
<input class="dungeoninput" type="text" size="16" id="answer" value="" maxlength="32"></input><br/>
<div class="btn100" style="margin-top: 6px;"
onclick="loadDiv2('/dream/explore?action=acceptTrivia&qid=727'); return false;">Answer</div>
</div>
<div id="test"> test </div><br />
<button value="code()" onclick="code()">click me</button>
</body></html>
Any suggestions on how the javascript below should be changed so it will work with checkboxes that have brackets in the name? (I'm using foreach in php, and can't seem to get the php to work/work correctly without using them.) Thanks! Code: function chktotal(j) {
var total=0;
for (var i=0; i < document.form1.ckbx.length; i++){
if(document.form1.ckbx[i].checked){
total=total+1;
}
if(total>8){
alert("Please only select 8");
document.form1.ckbx[i].checked = false;
total = total -1;
return false;
}
}
document.form1.totalval.value = total;
}
<input onclick="chktotal(2)" value ="Sample Item 1" type="checkbox" name="ckbx[]">
Hello, I very new to this language and I still feel like I'm not grasping it... But, anyways, I'm doing a thing for school and I have to let the user input a string. I need to save the string and turn it into an array. For every word that is less than five letters I put "little" at the beginning of the word and for every word that is more than five letters I put "big" at the end of each word. Then I need to return the new string into output. I think I wrote the code really incorrectly, so any tips/advice would be much appreciated! Also, I don't understand adding user input into a code if that makes sense. The tutorials/lessons I've been looking at all say to put information into an array first and then mess with it. But, what if you don't have information in the array until the user puts it in? And once they enter it, then you mess with what they entered. I can't seem to get how to do that. Thank you for your time Code: function texter(newText){
var oldHTML = document.getElementById('outputPrompt').innerHTML;
document.getElementById('outputPrompt').innerHTML = newText+"<br />"+oldHTML;
console.log(newText);
}
function menuTwo(){
var userInput = document.getElementById('input').value;
var correctedInputArray = userInput.toLowerCase().split(" ");
var mainTwo = new Array([""]);
for(var i=0; i<correctedInputArray.length; i++){
var thisWord = correctedInputArray[i];
var lessFive = 5;
var moreFive = 6;
var restOfWord;
if(lessFive<5){
mainTwo[i]=thisWord+"-little";
}else if(moreFive>6){
mainTwo[i]="big-"+thisWord;
}
else{
restOfWord = thisWord.substr(1, thisWord.length-1);
}
}
output = mainTwo.join(" ");
texter(output);
}
</script>
</head>
<body>
<h1>Document</h1>
<input type='text' id='input' />
<input type='button' onclick='menuTwo()' value='submit'/>
<p id='outputPrompt'>Please enter 1,2,3 or exit only</b> </p>
</body>
</html>
I'm working on this website and some contents are set up in arrays. How do you refer variables to work with arrays. I need the correct syntax.
Hello guys, I'm new to this forum and to Javascript. I need to make a very simple website to check whether a ticket number is valid or not. I have created an array with all the codes necessary, but when I try to loop through it, the only thing that works as it should is the first element of the array. Basically, I want the code to display Correct!, if there is a match between user input and array, or Wrong if otherwise. Here is my code: Code: <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function validate() {
var list = new Array;
list[0]="zDv5BXAc";
list[1]="6YXF3Qwj";
list[2]="k8UKpgwo";
var code= document.getElementById("code");
var name = document.getElementById("name");
for(var i=list.length-1; i>=0; --i) {
if (code.value == list[i])
{
document.all.confirm.innerHTML = "Correct"
}
else
document.all.confirm.innerHTML = "Wrong"
}
}
</script>
</head>
<body>
<input name="Name" type="text" id="name" size="50">
<input name="Code" type="text" id="code" size="10">
<input name="Check Code" type="submit" value="Verify" onClick="validate()">
<div id="confirm"></div>
</body>
</html>
Hi everyone, i am stuck at a problem. i am trying to craete a redimmensionable array using javascript, is there a way to do this, i know that this can be done in vbscript using redim and preserve commands. If not then is it possible to variables between javascript and vbscript, or call vbscript function using javascript. a sample code will be much aprreciated thanks for your time! J Hi there coding friends, im stuck again this time on arrays.. Im trying to get my head around it and im sure it's one of those things you do once you know what your doing (to an extent) now the problem is... i have 2 arrays for a experiment one = flowerheight and the other is flowernumbers. now the height is set out as 15,16,17,18,19 and numbers 2,1,6,4,2 what the aim is in the first part is to times the height by numbers of the corresponding array ie. 15x2 16x1 17x6 18x4 19x2 to make a 3rd array with them as the totals then the second part of the program is to calculate the average height i.e total of total of numbers array (2+1+6+4+2) + total of 3rd array(15x2+16x1+17x6+18x4+19x2) then a write to show what the total was.. now all I have of the code is... Code: <HTML> <HEAD> <TITLE> Flower Experiment </TITLE> <SCRIPT LANGUAGE = "JavaScript"> /* * Program to calculate average height of flowers.. */ //Experiment results var flowerHeights = [15,16,17,18,19]; var flowerNumbers = [2,1,6,4,2]; //Write code to work out and show flowerheightxnumbers. //Write code to calculate the average height of the flowers (total of flowernumbers + (flowerheight X numbers) and write it out in the browser window. </SCRIPT> </HEAD> <BODY> </BODY> </HTML> now I have no idea how to go about this it's making me loose my mind. Can someone start me off in the right directon and/or explain to me what to do. Anyhelp much appreciated, I wish I could have done more to the question to make it easier for you lot to help me but my brain is frazzled Thanks. James I'm trying to do this using numerical arrays for an assignment: Create a webpage with three select boxes. If basketball is selected in the first select box, the second select box should display the names Celtics, Lakers, and Bulls. If Celtics is selected from the second select box, the third select box should display the names Larry Bird, Bill Russell, and Kevin McHale. I think i have a good start but i can't seem to get the fields to automatically populate with the players. This has to be done solely with JavaScript. Any help would be greatly appreciated? <html> <head> <script type="text/javascript"> <!-- var teams = new Array() teams[1] = new Array() teams[1][0] = "Celtics" teams[1][1] = "Lakers" teams[1][2] = "Bulls" teams[2] = new Array() teams[2][0] = "Yankees" teams[2][1] = "Cardinals" teams[2][2] = "Reds" var basketball = new Array() basketball[0] = new Array() basketball[0][0] = "Larry Bird" basketball[0][1] = "Bill Russell" basketball[0][2] = "Kevin McHale" basketball[1] = new Array() basketball[1][0] = "Wilt Chamberlain" basketball[1][1] = "Jerry West" basketball[1][2] = "Magic Johnson" basketball[2] = new Array() basketball[2][0] = "Micheal Jordan" basketball[2][1] = "Scottie Pippen" basketball[2][2] = "Dennis Rodman" var baseball = new Array() baseball[0] = new Array() baseball[0][0] = "Babe Ruth" baseball[0][1] = "Joe DiMaggio" baseball[0][2] = "Mickey Mantle" baseball[1] = new Array() baseball[1][0] = "Mark McGuire" baseball[1][1] = "Ozzie Smith" baseball[1][2] = "Willie McGee" baseball[2] = new Array() baseball[2][0] = "Pete Rose" baseball[2][1] = "Johnny Bench" baseball[2][2] = "Joe Morgan" function fillTeams() { var whichIndex = document.getElementById("theSport").selectedIndex var numberOfTeams = teams[whichIndex].length for(i=0;i < numberOfTeams; i++){ document.getElementById("theTeams").options[i].text = teams[whichIndex][i] } } function fillPlayers() { var whichIndex = document.getElementById("theTeams").selectedIndex if(document.getElementById("theTeams").selectedIndex=="basketball") var numberOfPlayers = teams[teams[whichIndex]].length for(i=0;i < numberOfPlayers; i++) { document.getElementById("thePlayers").options[i].text = basketball[teams[whichIndex]][i] } else if(document.getElementById("theTeams").selectedIndex =="baseball") for(i=0;i < numberOfPlayers; i++) { document.getElementById("thePlayers").options[i].text = basketball[teams[whichIndex]][i] } } //--> </script> </head> <body> <form> <select id="theSport" onChange="fillTeams()"> <option>Choose a Sport</option> <option>Basketball</option> <option> Baseball </option> </select> <select id="theTeams" onChange="fillPlayers()"> <option>................</option> <option></option> <option></option> </select> <select id="thePlayers" size="3"> <option> ...............</option> <option></option> <option></option> </select> </form> </body> </html> I have two known methods of creating a javascript array: 1) Double brackets such as: Code: var animation_JD = [[]]; 2) Create and array then create an array inside each array element manually which is the most common method as far as I know. The problem is that the second method requires the array be be defined in size and I require a 2D array, 3D array and 4D array. Using the second method uses far to much memory to be plausible, unless there is a way to make arrays smaller by defining parts of them as integers only? Otherwise for the 1st method I described I don't know how to loop through all elements of the array such as: Code: for(group in animation_JD){
}
So does anyone have another way of creating arrays, defining an array as integers only(ideally not every part of the array) to save memory, or a way to loop through arrays created in the first method? Thanks! Hi, I am trying to work out a code where I can change the background colour of an HTML page via external JS page. Please note that I will be using different HTML pages with different colours so have to use Arrays. Here is what I have so far!!! here is my function, <script language="JavaScript"> var backColor = new Array(); backColor[0] = '#000000'; backColor[1] = '#111111; backColor[2] = '#222222'; backColor[3] = '#333333'; function changeBG(whichColor){ document.bgColor = backColor[whichColor]; } </script> ------------------------------------- What I need is to apply changeBG function to my HTML page using colour [0] Any help would be greatly appreciated! I was looking at that old Strawberry Fields problem and I thought I'd see about solving it in JavaScript. What I want is an array of chars so that I can set individual elements in the array of arrays. Strings are apparently immutable and can't directly be changed? Here's my code. Code: var field = new Array();
var string0 = "..@@@@@..............."
var string1 = "..@@@@@@........@@@..."
var string2 = ".....@@@@@......@@@..."
var string3 = ".......@@@@@@@@@@@@..."
var string4 = ".........@@@@@........"
var string5 = ".........@@@@@........"
for (var i = 0; i < 6; i++) {
field[i] = new Array();
field[i] = eval("string" + i + ".slice('')");
}
document.write("field's type is " + typeof field + "<br>"); // object? but it should be explicit array
document.write(typeof field[1]) // string? it should explicitly be an array, then it was filled with array elements
document.write(typeof field[1][2]); // string - ok, I understand this bit
document.write(field[1].length);
document.write("<br>");
for (var i = 0; i < field.length; i++) {
field[i] = new Array();
for (var k = 0; k < eval("string" + i + ".length"); k++) {
field[i][k] = eval("string" + i + ".charAt(" + k + ")");
}
document.write("<br>");
}
document.write("field's type is " + typeof field + "<br>"); // seriously, an object?
document.write(typeof field[1]) // why is this an object instead of an array?
document.write(typeof field[1][2]); // string, yeah, I understand this as well
document.write(field[1].length);
document.write("<br>");
Also, it looks like I can't overwrite a 1-length string that's in the array of arrays. For instance: Code: newField = field; //for loops newField[i][k] = 0; // does nothing, newField's elements remain the same. |
|||||||