For Loop Only Running Through Once

Question

In the following program, for some reason, the for loop runs through once, and then does not repeat. I believe the error is with the bold code. Help is very much appreciated. This is a program used to change a text box to caps, title case, etc. Title case being the first letter of each word capitalized. Thank you.

    <html>
    <head>
    <script type="text/javascript">

    function titlize(){
        tLength=tBox.box.value.length
        character=new Array()
        for(i=1; i<tLength+1; i++){
            **character[i]=tBox.box.value.slice(i-1,i)**
            document.write(character[i])
                if(i==1){
                character[i]=character[i].toUpperCase()
                }else if(character[i-1]==" "){
            character[i]=character[i].toUpperCase()
                }else{
            character[i]=character[i].toLowerCase()
            }
            document.write(i)
            document.write(character[i])
        }
    }

    function upperC (){
        toUpperCase(tBox.box.value)
    }

    function verify (){
        if(tBox.uppercase.checked){
        tBox.box.value=tBox.box.value.toUpperCase()
        }
        if(tBox.lowercase.checked){
        tBox.box.value=tBox.box.value.toLowerCase()
        }
        if(tBox.titlecase.checked){
        titlize()
        }
        if(tBox.uppercase.checked){
        tBox.box.value=tBox.box.value.toUpperCase()
        }

    }

    </script>
    </head>
    <body>
    <form name="tBox">
    <input type="text" name="box" value=""><br>
    <input type="checkbox" name="uppercase" onClick=verify(this.form)>Uppercase<br>
    <input type="checkbox" name="lowercase" onClick=verify(this.form)>Lowercase<br>
    <input type="checkbox" name="titlecase" onClick=verify(this.form)>Titlecase<br>
    </form>
    </body>
    </html>

See: http://stackoverflow.com/questions/196972/convert-string-to-title-case-with-javascript function toTitleCase(str) { return str.replace(/\w\S*/g, function(txt) { return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); }); } — Chris Rouffer, May 09 '17 at 19:12

Scott Marcus · Accepted Answer · 2017-05-09T19:14:56.643

tBox is your form not your textbox, so trying to get it's value and then the length of that value is not valid. The code needs to access your textbox, so it should be:

   // Scan for the first textbox. Give that textbox a unique id to be 
   // able to write a more specific query.
   tLength= document.querySelector("input[type='text']").value.length;

   character=new Array()

   // Not sure why you were writing: i < tLength +1 as that will
   // cause your loop to go one character too far. Remember, 
   // arrays start from 0 and length starts from 1.
   for(i=1; i < tLength; i++){

Lastly, avoid document.write() because if you use it on a document that has finished being parsed, it will cause the entire existing document to be thrown out.

kemiller2002 · Answer 2 · 2017-05-09T19:18:27.797

Based on the code above. You have document.write statements in your function, which is causing issues in overwriting your DOM. I've removed those, and that will allow it to function normally. Also, I added tBox.box.value = character.join("") to put the text back into the text box.

https://plnkr.co/edit/qOPIxwH16hJUlj0RFBhv?p=preview

function titlize() {
    tLength=tBox.box.value.length;
    character=new Array();

    for(i=1; i < tLength + 1; i++){
        console.log('print')
        character[i]= tBox.box.value.slice(i - 1,i)
        //document.write(character[i])
            if(i==1) {
                character[i]=character[i].toUpperCase()
            } else if(character[i-1]==" ") {
                 character[i] = character[i].toUpperCase()
            } else {
                 character[i]=character[i].toLowerCase()
            }
        console.log(i)
        console.log(character[i])
    }

    tBox.box.value = character.join("")
}

For Loop Only Running Through Once

2 Answers2