如何正确使用while循环将文本字段内容大写，直到找到一个空字段？
[英]How do I use a while-loop correctly to capitalize text fields content until an empty field is found?
问题描述
I need to create a function that is triggered by a press of a button that allows me to create every character in multiple text fields capitalized until the code reads a text field without any content in it. 
我需要创建一个通过按下按钮触发的功能，该功能允许我在大写的多个文本字段中创建每个字符，直到代码读取其中没有任何内容的文本字段为止。 I need to use a while-loop in my function in order to perform the task. 我需要在函数中使用while循环才能执行任务。
To be more specific, I need the function to change the text of the fields in order from top to bottom so that the act of changing the text to uppercase can stop when there is nothing in the field. 更具体地说，我需要该函数按从上到下的顺序更改字段的文本，以便在字段中没有内容时停止将文本更改为大写的行为。
I thought my code would work but apparently, it does not. 我以为我的代码可以工作，但显然不能。
I have a button that makes the text fields content turn into uppercase, but I need the second button to perform the job described above. 我有一个使文本字段内容变为大写的按钮，但是我需要第二个按钮来执行上述工作。
var theInputedText; function buttonClicked() { for (var textField = 0; textField <= 9; textField++) { document.textInput.elements[textField].value = document.textInput.elements[textField].value.toUpperCase(); } } function secondButtonClicked() { var textLength = document.textInput.elements[0].value.length; var initialTextField = 0; var textFields = 0; while (document.textInput.elements[textFields].value != null) document.textInput.elements[textFields].value = document.textInput.elements[textFields].value.toUpperCase(); textFields++; }
<body> <form name="textInput"> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br><br> <input type="button" Value="Change First Letter to Uppercase" onclick=buttonClicked()> <input type="button" Value="Change all Letters to Uppercase" onclick=secondButtonClicked()> </form> </body>
When a user types into the text fields, say the first 5 skips 6 and fills the rest, then presses the second button. 当用户在文本字段中键入内容时，假设前5个跳过6，然后填充其余部分，然后按第二个按钮。 The first 5 fields should turn into uppercase letters while the next 5 stay as they were typed. 前5个字段应变成大写字母，而后5个字段应保持原样。
The actual result is that it just does not work and I don't know why. 实际结果是它不起作用，我也不知道为什么。
3 个解决方案
解决方案1
0 2019-01-09 07:48:13
Change the condition inside while from 从更改内部条件
document.textInput.elements[textFields].value != null
to 至
document.textInput.elements[textFields].value
解决方案2
0 2019-01-09 09:37:42
Suppose You use a count as a variable which increments on every iteration and is initialised as 0.
Then the condition for while will be :
function secondButtonClicked() {
var textLength = document.textInput.elements[0].value.length;
var initialTextField = 0;
var textFields = 0;
var count = 0;
while (count < textLength)
document.textInput.elements[textFields].value =
document.textInput.elements[textFields].value.toUpperCase();
count++;
}
解决方案3
0 2019-01-09 14:48:17
Your code is missing something, I got this solution: 您的代码缺少某些内容，我得到了以下解决方案：
function buttonClicked() { // this variable will handle the counter of textfields var textFields = 0; // the next loop will execute forever, unless textField.value is void or there is no more text fields while (true) { if (!document.textInput.elements[textFields] || !document.textInput.elements[textFields].value) { // here we break the loop, it means a void textField or there is no textField to proccess break; } // We need to trim out blank spaces, this way we ensure toUpperCase() method works document.textInput.elements[textFields].value = document.textInput.elements[textFields].value.trim(); // We capitalize the first character of the string and save it on a variable called 'capitalized' var capitalized = document.textInput.elements[textFields].value.substring(0,1).toUpperCase(); var unCapitalized = ''; if (document.textInput.elements[textFields].value.length > 1) { // We save the rest of the string in a variable called 'unCapitalized' only if there is enough characters on it unCapitalized = document.textInput.elements[textFields].value.substring(1); } // Now we set the value of textField with the desired result document.textInput.elements[textFields].value = capitalized.concat(unCapitalized); // Don't forget to increment our counter; textFields++; } // End while loop } // End function buttonClicked() // The next function is basically the same as above // except that we capitalize all the characters on the string function secondButtonClicked() { // start our counter var textFields = 0; // this loop runs until one of 2 conditions listed above are satisfied while (true) { if (!document.textInput.elements[textFields] || !document.textInput.elements[textFields].value) { break; } // Don't forget to trim out the blank spaces document.textInput.elements[textFields].value = document.textInput.elements[textFields].value.trim(); // here we just capitalize the whole string document.textInput.elements[textFields].value = document.textInput.elements[textFields].value.toUpperCase(); // Again, don't forget to increment the counter textFields++; } // End while loop } // End function secondButtonClicked()
<body> <form name="textInput"> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br> <input type="text"><br><br> <button type="button" onclick=buttonClicked()>Change First Letter to Uppercase</button> <button type="button" onclick=secondButtonClicked()>Change all Letters to Uppercase</button> </form> </body>
I've changed the HTML either, in your code you got <input type="button"...> so, when you click on it, the value of that input was proccessed as well. 我也更改了HTML，在您的代码中您得到了<input type="button"...>因此，当您单击它时，也会处理该input的value 。
The solution is to use a button html tag. 解决方案是使用button html标签。
Hope this works for you. 希望这对您有用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.