Javascript unable to assign value to variable and causes break --> word5 = (keywords[n].length);_问答_开发者

Doing some javascript self-learning and the program itself is very simple. It searches through the input for keywords and when it finds it, it places the index values into list placeholders. (I'll develop later code to remove repetitions).

However, a snag. I'm trying to do something very simple. All I'm doing is assigning the variable words5 to keywords[n].length. Now I've discovered the keywords[n].length does prin开发者_Go百科t me the correct value when nested into document.write(). I've also discovered that keywords[n] also prints the correct value when nested into document.write(). BUT if either are used in the code outside of a document.write, it causes the code to break.

Been going at it for hours. And I haven't been able to find a solution. Do you guys have any clues? The code that I used to test it out is commented out.

<html>
<body>

<script type="text/javascript">


function separate()
{
    contents = document.myForm.event.value;
    placeholders = [32342423, 253234523];
    keywords = [" in ", " at ", " on ", " for "];

    for(n=0;n<=keywords.length;n++)
    {
        for (i=0;i<=contents.length;i++)
        {
            //document.write(i,"+", i+keywords[n].length, keywords[n])
            //document.write(keywords[n].length)
            word5 = (keywords[n].length);
            //document.write(" " + contents.slice(i,i+word5) + " ")
            //if (contents.slice(i,i+4) == " at ")
            //if (contents.slice(i,i+wordlength) == " at ")
            //if (contents.slice(i,i+4) == keywords[n])
            if (contents.slice(i,i+word5) == keywords[n])
            {
                placeholders.push(i);
            }
        }
    }
    document.getElementById("sliced").innerHTML = placeholders;
    printer();
}


function printer()
{
    contents = document.myForm.event.value;
    document.getElementById("MSG").innerHTML = contents;
}
</script>



<form name="myForm" method="post">
Add Event: <input type="text" name="event" value="Whatever at hello at crazy" /><br />
<input type=button value="Submit" onClick="separate()" />
</form>

<SPAN ID="sliced">&nbsp;</SPAN>
<p></p>
<SPAN ID="MSG">&nbsp;</SPAN>



</body>
</html>

Any help is greatly appreciated. Saviours really =)

The eror I get when I run your code is that:

wordlength is undefined

This is causing the code to fail. Where are you defining wordlength?

Update

Also be aware that when you're looping through arrays that arrays have a zero index. That is, the first item in the array is item 0. The count of the number of items in the array is always going to be greater than the sum of the indexes (index sum + 1).

This basically means that when you use the <= (less than or equel to) operator in your for loop, you're looping from zero to the number of items in your collection, however, since your array index begins are zero, you're eventually going to be requesting an item from your array that doesn't exist.

To ensure that you only loop over the available items use the < operator rather than <=.

that's not what's breaking your code, it seems like you are not defining the variable "wordlength" anywhere on your code, this is what's breaking your code.

word5 = (keywords[n].length) actually works.

Also I would recommend getting "firebug" addon for firefox, it's the best way to debug any javascipt or html code, use the console to output your debug statements using "console.log(myvar)" instead of document.write which is a pretty old fashioned way of doing things.

Let me know if this solution doesn't work for you :)

EDIT: I did another set of tests and found out what the reason was, your first loop is running 1 more than what your current number of arrays are, so instead of making it "less than or equal too" it should just be less than:

for(n=0;n<keywords.length;n++)

Hence why you're getting a keywords[n] is undefined, as there is no keywords[4] in the array