JavaScript - How Can I Make This Function Output Multiple Instances Of A Letter Found Not Just One
The statement does what I want it to do, except if there is multiple instances of the word, it only outputs one, how can I work it so all instances are output in red? (while still using .slice)
var phrase = prompt("Enter a messate: ", 'Message'); var searchFor = prompt("Enter search text: ", 's'); var matchPhrase = ""; var searchIndex = -1; /* if there's a match, create a text string by * add the phrase text from before the match, * add <font> tags around the match text, * add the rest of the phrase from after the match */ searchIndex = phrase.indexOf(searchFor); if (searchIndex >=0 ) { // Copy text from phrase up till the match. matchPhrase += phrase.slice(0, searchIndex); matchPhrase += '<font color="red">' + searchFor + '</font>'; matchPhrase += phrase.slice(searchIndex + searchFor.length); phrase++ } else { matchPhrase = "No matches" } document.writeln(matchPhrase); Reply With Quote 01-31-2015, 09:08 AM #2 Philip M View Profile View Forum Posts Supreme Master coder! Join Date Jun 2002 Location London, England Posts 18,371 Thanks 204 Thanked 2,573 Times in 2,551 Posts Use a regular expression. Similar TutorialsI want to have multiple instances of jcarousellite on the same page, but as you can see, they both scroll together. I am javascript brain dead, so any help would be appreciated, even if it's something obvious. http://goo.gl/vMLPA I found the following guide, but I need my hand held. http://myintarweb.com/dispatch/multiple-jcarouselite I'm working on code for my forums that will allow users to post text which can be moused over to display an image that will follow the cursor (provided the cursor is hovering above the specific text). The code works, but it obviously can't be used for more than one picture per page because getElementById finds the first div and always displays it onmouseover of any attempted mouseover text. The Javascript in <head> is Code: <script type="text/javascript"> // Pop up code begin function ShowPopup(hoveritem) { hp = document.getElementById("hoverpopup"); // Set popup to visible hp.style.visibility = "Visible"; } function HidePopup() { hp = document.getElementById("hoverpopup"); hp.style.visibility = "Hidden"; } // Follow mouse script begin var divName = 'hoverpopup'; // div that is to follow the mouse // (must be position:absolute) var offX = 5; // X offset from mouse position var offY = 5; // Y offset from mouse position function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;} function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;} function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style; obj.left = (parseInt(mouseX(evt))+offX) + 'px'; obj.top = (parseInt(mouseY(evt))+offY) + 'px';}} document.onmousemove = follow; </script> So the display code is Code: <a id="hoverover" style="cursor:default;" onMouseOver="ShowPopup(this);" onMouseOut="HidePopup();">text here</a> <div id="hoverpopup" style="visibility:hidden; position:absolute;"><img src="url here"></div> I just want to be able to have more than one instance on each page and still be able to declare the image url in the body and not within the javascript. Hi, I have written a code below: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript"> function emailRowContent(isSelected, emailAddress, severity) { var emailRowObj = document.getElementById('emailRow'); emailRowObj.childNodes[1].childNodes[0].checked = isSelected; emailRowObj.childNodes[3].childNodes[0].value = emailAddress; emailRowObj.childNodes[5].childNodes[0].checked = severity; } function LoadUp() { var emailAddressListObj = document.getElementById('emailAddressList'); var arrayOfEmails = new Array(5); for (i = 0; i < 5; i++) { arrayOfEmails[i] = new emailRowContent( "checked", "fjkum@unknown.com" + i, i ); //emailAddressListObj.appendChild( arrayOfEmails[i] ); /* Somehow this line breaks */ } } </script> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> </head> <body onload="javascript:LoadUp();"> <div id="emailRow" class="emailRowClass"> <div><input type="checkbox" class="checkbox1"></div> <div><input type="text" class="textfield"></div> <div><input type="checkbox" class="checkbox2"></div> </div> <div id="emailAddressList" class="emailAddressClass"></div> </body> </html> Basically, what I want to do is to dynamically create 5 instances of "emailRow" onto the web page making use of Javascript DOM. But have no success in getting it to work. Can anyone shed some light? Mike Im using the following script: Code: <script type="text/javascript"> function unhide(hiddentext) { var item = document.getElementById(hiddentext); if (item) { item.className=(item.className=='hidden')?'unhidden':'hidden'; } } </script> <style type="text/css"> .unhidden { display: block; } .hidden { display: none; } </style> to hide and unhide a block of text on my page, using onclick events. the problem is its not allowing me to use it multiple times in a page. when i use a second instance of it, both stop working. the above demonstrated script is working with the following elements: middle (approx) of page: Code: <td class="desc_cell"><strong>Download Station</strong><br /> 17" Macbook Pro<br /><a href="javascript:unhide('itemlist');" onclick="changeText(this,'Hide Item List');" id="text1link"]Old Text>Click Here For Full Item List</a><div id="hiddentext" class="hidden">list of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes herelist of items goes here</div> </td> bottom of page: [code]<p align="center" style="citylist">Allen Park MI, Anchor Bay Gardens MI, Anchor Bay Harbor MI, Anchor Bay Shores MI, Andersonville MI,<a href="javascript:unhide('hiddentext');" onclick="changeText(this,' View Less...');" id="text1link"]Old Text>View More...</a></p><div id="hiddentext" class="hidden">Armada MI, Auburn Heights MI, Auburn Hills MI, Austin Corneorth Farmington MI, Northville MI, Norton MI, Novi MI, Oak MI, Oak Grove MI, Oak Park MI, Oakley Park MI, Oakwood MI, Orchard Lake MI, Ortonville MI, Oxbow MI, Oxford MI, Perry Lake Heights MI, Pleasant Ridge MI, Plymouth MI, Point Lakeview MI, Pontiac MI, Preston Coom MI, Wolcott Mills MI, Wolverine Lake MI, Wood Creek Farms MI, Woodhaven MI, Wyandotte MI, Yates MI, and many more!</div> So I want to swap an image when it's clicked on (and then swaps right back after release) and currently I have working code for this, HOWEVER (and the reason for my post) I want this to be a redundant image, so it would be the same image used about 25 times on the page (same image, with same image swap effect) it's basically a download button then slightly changes it's style when clicked on. The problem is that my current code requires me to give each image it's own specific id / name and I have to recreate more sript code for each image id as well. The following example code would be what is currently required for just 2 images (they are the exact same image with exact same swap) but as you can see for every additional download button on the page I have to add a new id for it and a bunch of additional code, so it's quite ridiculous as to how much code is required for 25 of the exact same images on the page. in the header I have: Code: <script language="JavaScript"> <!-- // PRELOADING IMAGES if (document.images) { downloadbtn_down=new Image(); downloadbtn_down.src="images/download_pressed.png"; downloadbtn_up =new Image(); downloadbtn_up.src ="images/download.png"; } if (document.images) { downloadbtn2_down=new Image(); downloadbtn2_down.src="images/download_pressed.png"; downloadbtn2_up =new Image(); downloadbtn2_up.src ="images/download.png"; } // EVENT HANDLERS function pressButton(btName) { if (document.images) eval('document.'+btName+'.src='+btName+'_down.src'); } function releaseButton(btName) { if (document.images) eval('document.'+btName+'.src='+btName+'_up.src'); } //--></script> and for each image in the body I have (example is for 2 images): Code: <a href="indexpg.htm" onMouseDown="pressButton('downloadbtn');return true;" onMouseUp="releaseButton('downloadbtn');return true;" onMouseOut="releaseButton('downloadbtn');return true;" onClick="return true;" ><img id=downloadbtn width=422px height=80px border=0 alt="Download" src="images/download.png" ></a> <a href="indexpg.htm" onMouseDown="pressButton('downloadbtn2');return true;" onMouseUp="releaseButton('downloadbtn2');return true;" onMouseOut="releaseButton('downloadbtn2');return true;" onClick="return true;" ><img id=downloadbtn2 width=422px height=80px border=0 alt="Download" src="images/download.png" ></a> I want to be able to just use the same piece of code without having to add a new id for every download button on the page and tons of redundant code, especially since the image is the same it doesn't make sense to have to give each one a specific id and specific javascript for each of those id's. I would think this would be quite simple, but I know nothing about javascript, and I have searched a lot without any luck. PLEASE HELP ME! I have this script which is set to generate random anagrams of my name in rotation which works fine, but I can't work out how to put multiple instances of it on one page. if someone could point me in the right direction i'd be very grateful. thanks the code is var quotations = new Array() quotations[0]= "germaine arnold" quotations[1]= "endearing moral" quotations[2]= "analog reminder" quotations[3]= "regained normal" quotations[4]= "renaming ordeal" quotations[5]= "nominal regrade" quotations[6]= "arraigned lemon" quotations[7]= "ringleader moan" quotations[8]= "mineral groaned" function display() { a=Math.floor(Math.random()*quotations.length) document.getElementById('quotation').innerHTML=quotations[a] setTimeout("display()",5000) } and i'm calling the function using: <div id="quotation"> <SCRIPT type="text/javascript">display()</SCRIPT> </div> First post - spent the whole afternoon trying to figure it out and have hit a wall. I'm trying to check a database of lotto numbers against 3 different values and have gotten it that to work. What I need is to give a feedback message if no match is found once the submit button is clicked. Code: function winCheck() { var grandPrize = $('#grandPrize').val(); var otherPrize = $('#otherPrize').val(); var addPrize = $('#addPrize').val(); var resultrange = $('#resultrange').val(); db.transaction( function(transaction) { transaction.executeSql( 'SELECT * FROM entries WHERE daterange = ? ORDER BY lottonum;', [resultrange], function lottoCompare(transaction, result){ for (var i=0; i < result.rows.length; i++) { var row = result.rows.item(i); rowData = [row.lottonum]; rowStr = rowData.toString(); //the if else statements should go here. if (rowStr == grandPrize){ alert('The lotto number ' + grandPrize + ' is a jackpot winner'); } if (rowStr.slice(-7) == otherPrize.slice(-7)){ alert('The lotto number ' + rowStr + ' is a winner of $40,000'); } if (rowStr.slice(-6) == otherPrize.slice(-6)){ alert('The lotto number ' + rowStr + ' is a winner of $10,000'); } if (rowStr.slice(-5) == otherPrize.slice(-5)){ alert('The lotto number ' + rowStr + ' is a winner of $4,000'); } if (rowStr.slice(-4) == otherPrize.slice(-4)){ alert('The lotto number ' + rowStr + ' is a winner of $1,000'); } if (rowStr.slice(-3) == otherPrize.slice(-3)){ alert('The lotto number ' + rowStr + ' is a winner of $200'); } if (rowStr.slice(-3) == addPrize){ alert('The lotto number ' + rowStr + ' is a winner of $200'); } } }, errorHandler ); } ); return false; } Any help is appreciated Hey, I'm writing a piece of code, using a given code as an example, but few things are confusing to me, if you could just explain me step by step what it does, I would really appreciated. Code: function getGeneticCodeString (type) { if ((type.toLowerCase() == "standard") || (type.toLowerCase() == "transl_table=1")) { return "/gc[acgturyswkmbdhvn]/=A," + // Here I know that the three letter combination HAS to begin with 'gc' // can be followed by a,c,t,g or u. // What do the other letter represent? "/[tu]g[ctuy]/=C," + // Begins with either 't' or 'u', middle symbol is 'g' // third symbol can be c, t, or u ('u' can be used only if it begins with 'u'. // what is the 'y' for in the second square brackets for?? "/ga[agr]/=E " ; // Must start with 'ga' followed by 'a' or 'g'. // What is 'r' for? } } Hope, I didn't confuse anybody. Thank you. I'm pretty beginner at javascript, and I have this script for letter to phonetic: Code: <script language="JavaScript"> function flip() { var result = flipString(document.f.original.value.toLowerCase()); document.f.flipped.value = result; } function flipString(aString) { var last = aString.length - 1; var result = new Array(aString.length) for (var i = last; i >= 0; --i) { var c = aString.charAt(i) var r = flipTable[c] result[i] = r != undefined ? r : c } return result.join('') } var flipTable = { a : 'aye ', b : 'bee ', c : 'sea ', d : 'dee ', e : 'eeh ', f : 'eff ', g : 'gee ', h : 'aych ', i : 'eye ', j : 'jay ', k : 'kay ', l : 'el ', m : 'em ', n : 'en ', o : 'oh ', p : 'pee ', q : 'cue ', r : 'are ', s : 'es ', t : 'tee ', u : 'you ', v : 'vee ', w : 'doubleyou ', x : 'ex ', y : 'why ', z : 'zee ', 1 : 'one ', 2 : 'two ', 3 : 'three ', 4 : 'four ', 5 : 'five ', 6 : 'six ', 7 : 'seven ', 8 : 'eight ', 9 : 'nine ', 0 : 'zero ', '<' : 'left-inequality ', '>' : 'right-inequality', ':' : 'colon ', ';' : 'semicolon ', '(' : 'left-parenthesis ', ')' : 'right-parenthesis ', ' ' : 'space ', '?' : '? ', '!' : '! ', '.' : '. ', ',' : ', ' } for (i in flipTable) { flipTable[flipTable[i]] = i } </script> It's code based on text flipper. Anyways, if you type in A, the output would be aye. How would I go about switching this script so when one puts in 'aye' the output is the letter A? I found this script, and it works great: Code: <script type="text/javascript"> function disable(element) { var input = document.getElementById(element).getElementsByTagName("input"); for(var i = 0; i < input.length; i++) { input[i].setAttribute("disabled","true"); } } </script> I tried to make the inverse by simply reversing the setAttribute() like so: Code: <script type="text/javascript"> function enable(element) { var input = document.getElementById(element).getElementsByTagName("input"); for(var i = 0; i < input.length; i++) { input[i].setAttribute("disabled","false"); } } </script> But that didn't do it. Can someone show me why, and how to fix it? Here's the sample form which I'm trying to test it on: Code: <form> <input type="radio" name="test" onclick="disable('D1')" /> disable<br/> <input type="radio" name="test" onclick="enable('D1')" /> enable<br/> <fieldset id="D1"> <input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" /><br/> <input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" /><br/> <input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" /><br/> </fieldset> </form> Edit: The ultimate goal which I'm working toward now (step by step =) is to have a form more like: Code: <form> <input type="radio" name="test" onclick="disable('D1')" /> <fieldset id="D1"> <input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" /> </fieldset> <input type="radio" name="test" onclick="disable('D2')" /> <fieldset id="D2"> <input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" /> </fieldset> <input type="radio" name="test" onclick="disable('D3')" /> <fieldset id="D3"> <input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" /> </fieldset> </form> And have the fieldsets enable and disable according the selection of the radio buttons. Also, the fieldsets (and their ID's) will be dynamically generated via PHP Thanks-a-bunch, ~ Mo I made a mouseover event of a caption on a picture, when I hover the opacity of the background color of the hover and the text goes down. What I want is that when I hover over the image which the caption is floating on, the onmouseover event gets activite. For an imaginary example: Code: function unhighlight(x) { x.style.backgroundColor="transparent" } Function ActivationFuction() { activate.function="unhighlight" } thanks Hi Guys, Before I get started explaining my problem I would like to make it clear that this is a university web scripting assignment so I will not be asking for answers just advice as im stuck. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <style> body{font-family: Arial,sans-serif; background-color: #86bfc9;} #content{float:right; width: 75%;} </style> <script type = "text/javascript"> function showit(what,where) { var node = document.getElementById(where); while( node.firstChild ) node.removeChild( node.firstChild ); node.appendChild( document.createTextNode(what) ); } function hello() { alert("I'm a Computer Solutions Degree student,\n get me out of here"); } function timestable() { str="you code times table here"; showit(str,"Results"); } function formattedtimestable() { str="you code formatted times table here"; showit(str,"Results"); } function alerttimestable() { str="you code alert times table here"; // you code here alert(str); } </script> </head> <body> <h1>JavaScript Exercises </h1> <div id="content"> <div id = "Results"></div> </div> <a href="#" OnClick = "hello()">Hello Alert</a> <br/><br/> <a href="#" OnClick = "timestable()">Times Tables</a> <br/><br/> <a href="#" OnClick = "alerttimestable()">Times table in an alert box</a> <br/><br/> <a href="#" OnClick = "formattedtimestable()">Times Tables in a Table</a> <br/><br/> </body> </html> I have been given this skeleton code and need to created the relevant times tables so a times table in a alert box, a times table in a table and a standard times table. Now the problem isn't creating the table as that's easy the problem is with the showit function. When I use the function it only prints the string once and nothing else so for example if I did for(x = 0; x< 9; x++) { showit(x, "Result"); } it will only show 8 not 1-2-3-4-5-6-7-8. or if i did showit("Danny", "Result"); showit("Joe", "Result"); it will only output Joe not Danny. The content needs to go in the content div and I cant make it output more than one thing which of course is a problem as I need to output the times tables. Sorry for the poor explanation. Hope someone can shed some light on this Many Thanks Danny I'm trying to create a button where I can click on it and it changes the colour of text. When I click the same button again, it will change the text to another colour. It would be helpful if someone could show me how to do it please.
I am using this script that gets messed up when you resize the window. I figured out that I could use this other script to do stuff just after the window gets resized. Code: (function($,sr){ // debouncing function from John Hann // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ var debounce = function (func, threshold, execAsap) { var timeout; return function debounced () { var obj = this, args = arguments; function delayed () { if (!execAsap) func.apply(obj, args); timeout = null; }; if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; } // smartresize jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })(jQuery,'smartresize'); // usage: $(window).smartresize(function(){ // code that takes it easy... }); So I re-instantiate the misbehaving script in there so it fires whenever the window is resized (I changed it to 500 so it really only fires once after you are done resizing). This fixes it. The new instance doesn't have a problem but the old instance is still there and messed up. so I use. $($.misbehaving-script).remove(); just before instantiating after window resize, which gets rid of broken instance. Problem solved.. Except that messes up a different script! It's driving me crazy. Any advice would of course be very welcome. i need to make a function that will send a string to my perl script then recieve the answer and set a div innerhtml to the answer.. i plan on sending the string from the div onload as i will have about 30 divs that need changing. Code: <body> <div name="example1" onload="javascript:retrieve('getstring1')">my retieved string1</div> <div name="example2" onload="javascript:retrieve('getstring2')">my retieved string2</div> </body> <head> <SCRIPT language="JavaScript"> function retieve('var') { } </SCRIPT> </head> im not quite sure where to go with this but i can easily make the perl script do if statements on the string and return the correct string to put into the div. the reason for this is that the string will be changed every couple weeks. there is probably a better way to do this but this would be more appropriate for me Is it possible to make a variable available to other functions outside a function So to make it global from within a function without using a callback Code: function() { var something = 'hello'; } function(something) { document.write(something); } something like that possible?? I'm trying to find a script that will replace all instances of HTML code within a page. I saw the Javascript replace method. How can I leverage this on my page to replace every instance of a certain piece of code? Pretend this is a <div> in my page: <div style="width:340px;">Try this code out.</div> How could I convert all instances of this code to: <div style="width:340px;">Try this testing stuff.</div> Thanks for any help! Hi, I have a function that I'm trying to modify. It adds an element to the page. The problem is, I require that ClickGeocode() finishes executing before the rest of the code in the function completes. Currently that is not the case... Any ideas? Code: Event.add(window, 'load', function() { Event.add('addressSearch', 'click', function() { ClickGeocode(); var el = document.createElement('p'); el.innerHTML = " " + addressSearchAddress + " : [" + addressSearchRadius + "]"; Dom.add(el, 'AddressesVisited'); Event.add(el, 'click', function(e) { Dom.remove(this); }); }); }); |