Click to See Complete Forum and Search --> : find the word and color it red


mitchpowell
11-12-2004, 05:22 PM
I'm playing around with javascript to learn it, and can't figure out how to do this little thing I want to see.

Have a look at what I already have (http://tpowell5.powell3d.com/CIM289/isReserved.html).

If the term in the textbox matches one on the page, I want the one on the page to turn red.

I'm studying all about the textRange objext, but all my trials end with 'method not supported' or [object], or unidentified, or ?...

I've searched through many scripts here, and found some useful methods and properties, but still can't put what should be a very simple thing, together.

Any help appreciated. Remember this is all just for my trial-and-error style of learning. I'm taking too much time on it. It's time for a little assist.
Thanks,
Mitch

ziffgone
11-13-2004, 12:29 AM
Hi mitchpowell,

I believe this may be what you're after, it is "a" solution, anyway, it may not be "the" solution you were looking for, but hopefully it's passable. :)

Included in the following attachment are revised files for both your "isReserved.html" file and your "isReserved.js" file.

I simply wrapped the list of words in a DIV tag with an ID to manipulate it and added the necessary function to the JS file.

Hope that helps, it was fun!

Regards...

mitchpowell
11-13-2004, 03:50 AM
thanks ziffgone -

I got it to work. Check it out! (http://tpowell5.powell3d.com/CIM289/isReserved.html)

Now all we need to do is change the previous, red text back to the original color, while coloring the new word red. :D

It was fun. Thanks for your help. I always like to know, when I write code, if there was a smarter, shorter way to do it.

funkwurm
11-13-2004, 05:35 AM
nice, but this way you need to enter a new word (suppose you found one) twice. This is not good for the reason that you might add a word to 1 of the 2, but forget to enter it to the other (I am not suggesting you are that stupid, but your aunt might call you when you've only added the word once and after the conversation you forget to add it a second time). Fur the more I'd say I'm way to lazy to add something twice when I can make it so that I only need to add is once.

anyway, I think you should either fill the div with the values of the array on the page loading (with the script you already have this is the easy one) or have no array and check whether a word is present in the div through innerHTML.match(regex) or innerHTML.indexOf(word)!=-1.

Warren86
11-13-2004, 07:37 AM
Try this. It only changes to RED the currently selected word, the prior selected word returns to normal. I don't know how to have a user selected word copied anywhere, let alone to a text field. I've never seen that done.
It does have me scratching my head though. You want the user to copy a word from a list of reserved words so that he can then check to see if that word is a reserved word. You lost me. I probably am missing something. Anyway, good luck with that part of it.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0051)http://tpowell5.powell3d.com/CIM289/isReserved.html -->
<HTML><HEAD><TITLE>A function called isReserved()</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1"><LINK
href="A function called isReserved()_files/stuff.css" type=text/css
rel=stylesheet>
<META content="MSHTML 6.00.2800.1106" name=GENERATOR>
<Script Language=JavaScript>

var useList = "";

function initList(){

useList = isList.innerText;
Form1.myVar.focus();
Form1.myVar.onclick = function(){Form1.myVar.value = ""}
}

function swapHiLite(isForm){

useList.innerText = useList;
testWord = isForm.myVar.value.toUpperCase();
if (testWord == ""){alert('Input a word');isForm.myVar.focus()}
else {
testWord = '"'+testWord+'"';
isReserved = useList.match(testWord);
if (isReserved != null)
{useList = useList.replace(isReserved,"<font color=red>"+isReserved+"</font>")
isList.innerHTML = useList;
useList = useList.replace("<font color=red>"+isReserved+"</font>",isReserved);
}
if(isReserved == null){alert('That word is NOT reserved')}
}
}

function copyWord(){

}

window.onload=initList;

</Script>
</HEAD>
<BODY bgColor=#6699cc>
<FORM name='Form1'>
<TABLE id=theTable cellSpacing=2 cellPadding=5 width=594 align=left
bgColor=#99cccc border=0>
<TBODY>
<TR>
<TD vAlign=top noWrap align=left width=22 rowSpan=2><A
href="http://tpowell5.powell3d.com/CIM289/CIM289.html" target=_self><IMG
height=96 alt=TPOWELL5/CIM289
src="A function called isReserved()_files/tpowell5_redvertbtn.gif"
width=16 align=left border=0></A></TD>
<TD vAlign=top align=left width=307 bgColor=#ffffff height=45><FONT
face="Verdana, Arial, Helvetica, sans-serif" color=#0033cc size=2>Submit a
variable to see if it is among the reserved words listed below.
<BR></FONT></TD>
<TD vAlign=top noWrap align=left width=227 bgColor=#ffffff><INPUT
name='myVar'> <INPUT type=button value=Submit onclick="swapHiLite(Form1)"> </TD></TR>
<TR>
<TD id=result vAlign=top noWrap align=left width=307><FONT
face="Verdana, Arial, Helvetica, sans-serif" color=#ffffff size=2>(This
test is case-insensitive).</FONT></TD>
<TD vAlign=top align=left width=227><FONT
face="Verdana, Arial, Helvetica, sans-serif" color=#0033cc size=2>Or
highlight words on this page, then click here ------&gt; |</FONT><INPUT type=button value=Copy onclick="copyWord()"> </TD></TR></TBODY></TABLE><BR
clear=left>
<P> </P>
<P><FONT face="Verdana, Arial, Helvetica, sans-serif" color=#ccffff
size=2><Div id='isList'>"ABSOLUTE", "ACTION", "ADD", "ALL", "ALLOCATE", "ALTER", "AND", "ANY",
"ARE", "AS", "ASC", "ASSERTION", "AT", "AUTHORIZATION", "AVG", "BEGIN",
"BETWEEN", "BIT", "BIT_LENGTH", "BOTH", "BY", "CASCADE", "CASCADED", "CASE",
"CAST", "CATALOG", "CHAR", "CHARACTER", "CHARACTER_LENGTH", "CHAR_LENGTH",
"CHECK", "CLOSE", "COALESCE", "COLLATE", "COLLATION", "COLUMN", "COMMIT",
"CONNECT", "CONNECTION", "CONSTRAINT", "CONSTRAINTS", "CONTINUE", "CONVERT",
"CORRESPONDING", "COUNT", "CREATE", "CROSS", "CURRENT", "CURRENT_DATE",
"CURRENT_TIME", "CURRENT_TIMESTAMP", "CURRENT_USER", "CURSOR", "DATE", "DAY",
"DEALLOCATE", "DEC", "DECIMAL", "DECLARE", "DEFAULT", "DEFERRABLE", "DEFERRED",
"DELETE", "DESC", "DESCRIBE", "DESCRIPTOR", "DIAGNOSTICS", "DISCONNECT",
"DISTINCT", "DOMAIN", "DOUBLE", "DROP", "ELSE", "END", "END-EXEC", "ESCAPE",
"EXCEPTION", "EXEC", "EXECUTE", "EXISTS", "EXTERNAL", "EXTRACT", "FALSE",
"FETCH", "FIRST", "FLOAT", "FOR", "FOREIGN", "FOUND", "FROM", "FULL", "GET",
"GLOBAL", "GO", "GOTO", "GRANT", "GROUP", "HAVING", "HOUR", "IDENTITY",
"IMMEDIATE", "IN", "INDICATOR", "INITIALLY", "INNER", "INPUT", "INSENSITIVE",
"INSERT", "INT", "INTEGER", "INTERSECT", "INTERVAL", "INTO", "IS", "ISOLATION",
"JOIN", "KEY", "LANGUAGE", "LAST", "LEADING", "LEFT", "LEVEL", "LIKE", "LOCAL",
"LOWER", "MATCH", "MAX", "MIN", "MINUTE", "MODULE", "MONTH", "NAMES",
"NATIONAL", "NATURAL", "NCHAR", "NEXT", "NO", "NOT", "NULL", "NULLIF",
"NUMERIC", "OCTET_LENGTH", "OF", "ON", "ONLY", "OPEN", "OPTION", "OR", "ORDER",
"OUTER", "OUTPUT", "OVERLAPS", "PAD", "PARTIAL", "POSITION", "PRECISION",
"PREPARE", "PRESERVE", "PRIMARY", "PRIOR", "PRIVILEGES", "PROCEDURE", "PUBLIC",
"READ", "REAL", "REFERENCES", "RELATIVE", "RESTRICT", "REVOKE", "RIGHT",
"ROLLBACK", "ROWS", "SCHEMA", "SCROLL", "SECOND", "SECTION", "SELECT",
"SESSION", "SESSION_USER", "SET", "SIZE", "SMALLINT", "SOME", "SPACE", "SQL",
"SQLCODE", "SQLERROR", "SQLSTATE", "SUBSTRING", "SUM", "SYSTEM_USER", "TABLE",
"TEMPORARY", "THEN", "TIME", "TIMESTAMP", "TIMEZONE_HOUR", "TIMEZONE_MINUTE",
"TO", "TRAILING", "TRANSACTION", "TRANSLATE", "TRANSLATION", "TRIM", "TRUE",
"UNION", "UNIQUE", "UNKNOWN", "UPDATE", "UPPER", "USAGE", "USER", "USING",
"VALUE", "VALUES", "VARCHAR", "VARYING", "VIEW", "WHEN", "WHENEVER", "WHERE",
"WITH", "WORK", "WRITE", "YEAR", "ZONE"</Div></FONT></P></FORM></BODY></HTML>

<!-- mitchpowell -->

mitchpowell
11-15-2004, 01:01 AM
That's funny!

"You lost me. I probably am missing something. Anyway, good luck with that part of it...."


(You have to understand that the person I wrote this program for is really lazy and not the sharpest knife in the drawer.)

Seriously -- it just evolved from my need to understand certain concepts of the DOM; including innerHTML and replace().

Thanks for your code. It's very clean.

I'll try to make more plausible situations the next time I conduct javascripting experiments.

Warren86
11-15-2004, 04:37 AM
You're welcome. Good luck with your project and that client! :)

mitchpowell
11-16-2004, 01:04 AM
Okay so! (:eek: uh-oh, he's back again...:eek: )

Here it is in all its glory (http://tpowell5.powell3d.com/CIM289/isReserved.html)!

(And the part about the previous selection keeping its 'bold' attribute, ought to stay, because we lazy readers might want to know what prior words we selected from the page. If you know what I mean.)

Now the program does just what we/us noodleheads want/s it to do:

We need to know if a word is a reserved word and we don't want to read the list that's in front of us. So we select the word from the list and copy it into the box, and then click on the submit button to ask the machine if it's a reserved word.

Now if it IS a reserved word, it turns red. And if you already tried other words, and they were reserved too -- this is where it gets tricky, bear with me here -- the OLD word is changed back to the color it USED TO BE, and the NEW one turns red. It's so easy to use!

It's just what my clients and I wanted. Thank you everybody!