Как правильно использовать цикл while для заглавных букв содержимого текстовых полей, пока не будет найдено пустое поле? - PullRequest
Новая
       0

Как правильно использовать цикл while для заглавных букв содержимого текстовых полей, пока не будет найдено пустое поле?

0 голосов
/ 09 января 2019

Мне нужно создать функцию, которая вызывается нажатием кнопки, которая позволяет мне создавать каждый символ в нескольких текстовых полях с заглавной буквы, пока код не прочитает текстовое поле без какого-либо содержимого в нем. Мне нужно использовать цикл while в моей функции, чтобы выполнить задачу.

Чтобы быть более точным, мне нужна функция для изменения текста полей по порядку сверху вниз, чтобы процесс изменения текста в верхний регистр мог остановиться, когда в поле ничего нет.

Я думал, что мой код будет работать, но, видимо, это не так.

У меня есть кнопка, которая превращает содержимое текстовых полей в верхний регистр, но мне нужна вторая кнопка, чтобы выполнить работу, описанную выше. 

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>

Когда пользователь вводит текстовые поля, скажем, первые 5 пропускают 6 и заполняют остальные, затем нажимают вторую кнопку. Первые 5 полей должны превратиться в заглавные буквы, а следующие 5 остаются в том виде, в котором они были напечатаны.

Фактический результат в том, что он просто не работает, и я не знаю почему.

Ответы [ 3 ]

0 голосов
/ 09 января 2019 
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++;
}
0 голосов
/ 09 января 2019

В вашем коде чего-то не хватает, я получил это решение: 

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>

Я также изменил HTML, в вашем коде вы получили <input type="button"...>, поэтому, когда вы нажимаете на него, value этого input также обрабатывается.

Решение - использовать тег button html.

Надеюсь, это работает для вас.

0 голосов
/ 09 января 2019

Измените условие внутри, в то время как с 

document.textInput.elements[textFields].value != null

до 

document.textInput.elements[textFields].value
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...