Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
kamaboko

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

Share this post


Link to post
Share on other sites

Likely the search method is not a valid method because sentence is not a valid string (I'm guessing).

Could you please provide your HTML markup as well?

Thanks.

Share this post


Link to post
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>

Share this post


Link to post
Share on other sites

Thanks for your input.  I still can't get this thing to work to save my life.  It seems like such a painfully obvious task, but I simply don't get it apparently.

Share this post


Link to post
Share on other sites

On line 9 of stringTest.js, change sentence.search(keyword) to sentence.value.search(keyword.value), and then on line 10, change keyword to keyword.value.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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!).

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...