Question

在以下程序中，由于某种原因，for循环运行一次，然后不重复。我相信错误是使用粗体代码。非常感谢帮助。这是一个程序，用于将文本框更改为大写，标题大小写等。标题大小写是每个单词大写的首字母。谢谢。

    <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>

Answer 1

tBox是您的form而不是您的文本框，因此尝试获取它的值，然后该值的长度无效。代码需要访问您的文本框，因此它应该是：

   // 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++){

最后，请避免使用document.write()，因为如果您在已完成解析的文档上使用它，则会导致整个现有文档被抛出。

Answer 2

基于上面的代码。您的函数中有document.write个语句，这会导致覆盖DOM时出现问题。我删除了那些，这将使它正常运行。另外，我添加了tBox.box.value = character.join("")将文本放回文本框中。

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("")
}

仅用于循环运行一次

2 个答案: