Jump to content
Larry Ullman's Book Forums

Question Regarding .search


Recommended Posts

Hello,

 

I've tried to create a very simple input form to search for a specific word in a string.  That said, I'm not having much luck.  Firebug is alerting me of an exception error, and I can't figure out why.  The code is below.  The error msg says it's not a function.  

function calculate() {
       'use strict';
	   
	   var output;
	   var sentence = document.getElementById('sentence');
	   var keyword = document.getElementById('keyword');
	   
	   if(sentence && (sentence.value.length > 0)){
	      if(sentence.search(keyword) != -1){  //error msg here
		     output = keyword + " is in the sentence";
			 }else{
			 output = "sorry, no word exists";
		   }
		  document.getElementById('output').value = output; 	  
	  }  
	  return false;
}

function init(){
       'use strict';
	   document.getElementById('stringTest').onsubmit = calculate;
}

window.onload = init;

I'm basing this on a smaller example I got to work, but it didn't involve form input.  The following is that example.

var str = "this is a big dog";
var regExp = "cat";
if(str.search(regExp) != -1){
   document.write(regExp + " was found");
}else{
   document.write(regExp + " was not found");
}

Comments appreciated.

 

K

Link to comment
Share on other sites

Hi Hartley,

 

Sure...below is my html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "utf-8">
    <title></title>
	<!--[if lt IE 9]>
	   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js."></script>
	<![endif]-->
</head>
<link rel="stylesheet" href="css/calc.css">
<body>
<form action="#" method="post" id="stringTest">
<fieldset><legend>String Test</legend>
     </div><label for="sentence">Sentence</label>
         <input type="text" name="sentence" id="sentence"></div>
	<div><label for="keyword">Key Word</label>
        <input type="text" name="keyword" id="keyword"></div>	 		 
    <div><label for="output">Output</label>
         <input type="text" name="output" id="output"></div>    
    <input type="submit" value="Submit" id="submit"> 
</fieldset>
</form>
<script type="text/javascript" src="js/stringTest.js"></script>
</body>
</html>
Link to comment
Share on other sites

Basically, document.getElementById is a DOM object, not a string. The best way to verify this is to put the following lines of code after your three var declarations in calculate:

console.log(sentence);
console.log(keyword);

You'll see that the console will show you DOM elements, not the strings entered for those inputs.

Now, if you either loop through the DOM object properties (or more simply, check an online resource), you'll see that all DOM objects that represent input elements have a property called value. Thus, by typing DOM-object.value, you can access the value actually entered for that DOM element.

 

That make sense?

  • Upvote 1
Link to comment
Share on other sites

Thanks.  This is on the top of my study list.  I thought .value pertained more to things like length or text input,  not search.  That's why it never occurred to me. 

 

Where would you suggest I find more information on how to manipulate the DOM elements?  For instance, the point that you pointed out such as --- object.value.search.

 

Thanks,

K

Link to comment
Share on other sites

Any decent JS/DOM reference should have all of that info.

The following site, while a bit old, is decent:

http://www.javascriptkit.com/

 

Also, just to clarify, the search method works on the value property because the value property is a string. That's the key. The search method can only be called on strings, and DOM objects are not strings (because they're objects... duh!).

Link to comment
Share on other sites

 Share

×
×
  • Create New...