Question

以下代码创建网页表单。它要求用户在输入框中输入字符，然后在另一个框中输入句子。然后，用户应该能够单击按钮来计算角色在第二个输入框中输入的句子中出现的次数。句子应该只包括字母。我遇到的问题是我收到一条错误消息，说我在框中输入了非字母，尽管我只输入了字符！

请知道为什么会这样！

这是我的HTML / javascript代码：

//<![DATA[
'use strict';

function updateForm(id) {

  var letter = "";
  var sentence = "";
  var occurencies = 0;
  var form = document.getElementById(id);

  letter = form.box1.value;
  sentence = form.box2.value;

  for (var i = 0; i < sentence.length; i++)

    if (sentence.charAt(i) == letter)
      occurencies++;

  form.box3.value = occurencies;

}


function isAlphabet(elem, helperMsg) {
    var alphaExp = /^[a-zA-Z]+$/;
    if (elem.value.match(alphaExp)) {
      return true;
    } else {
      alert(helperMsg);
      elem.focus();
      return false;
    }
  } //-->

body {

  background-color: lightblue;

}

form {

  width: 500px;

  margin: 0 auto;

}

h4 {

  font-family: sans-serif;

  font-size: xx-large;

  text-align: center;

}

h1,

h2,

h3 {

  font-family: sans-serif;

  font-style: italic;

  font-size: large;

  text-align: center;

}

input[type="text"] {

  width: 100%;

  padding: 12px 20px;

  margin: 8px 0;

  box-sizing: border-box;

  font-style: italic;

}

input[type="button"] {

  background: #B9DFFF;

  color: #fff;

  border: 10px solid #eee;

  border-radius: 30px;

  box-shadow: 10px 10px 10px #eee;

  position: absolute;

  left: auto;

}

input[type="button"]:hover {

  background: #016ABC;

  color: #fff;

  border: 5px solid #eee;

  border-radius: 30px;

  box-shadow: 10px 10px 10px #eee;

}

<form action="#" id="boxes">

  Box 1:
  <input type="text" name="box1" value="" placeholder="Enter a single 
         letter" maxlength="1" />
  <li class="rq">Only alphabet letters are allowed.</li>
  <br />Box 2:
  <input type="text" name="box2" value="" placeholder="Enter a sentence" />

  <br />Result:
  <input type="text" id="letters" name="box3" readonly />
  <br />
  <input type="button" name="update" value="Update" onclick="isAlphabet(document.getElementById('letters'), 'Only Letters are allowed')" />

</form>

Answer 1

您正在检查错误的表单字段：

onclick="isAlphabet(document.getElementById('letters')...

据我所知，你想检查box1而不是'box3 / letters'......

将id ='box1'添加到该输入元素，然后像这样检查：

onclick="isAlphabet(document.getElementById('box1')...

Answer 2

您的代码似乎没问题，只需在匹配相同的

之前尝试修剪元素值

if (elem.value.trim().match(alphaExp)) {
  return true;
}

确保您将正确的值传递给此isAlphabet函数

<input type="button" name="update" value="Update" onclick="isAlphabet(document.getElementById('box1'), 'Only Letters are allowed')" />

计算出现次数

 letter = form.box1.value;
 sentence = form.box2.value;
 var occurences = sentence.split( letter ).length - 1;

Answer 3

此代码中仅调用isAlphabet函数。它会检查一个空字段。您的onclick属性将发送给该元素。

onclick="isAlphabet(document.getElementById('letters'), 'Only Letters are allowed')"

调用isAlphabet函数时，它持有一个空字符串。空字符串是非字母数字，因此返回false。

正如罗伯特所提到的，你需要在你对isAlphabet的调用中包含对box1或box2的引用，因为这是它的输入。那就是你需要完全调用它。

此外，我无法在任何地方看到您的主updateForm功能。除非这不是完整的代码，否则您需要包含它。例如，你可以做......

<input type="button" name="update" value="Update" onclick="isAlphabet(getElementById('box1, box2'))" />

将这些参数传递给函数。

因为它们被传递给你不需要声明它们的功能，所以它们就在那里供你使用。

您也可以在此功能中包含验证。提醒它是否非字母。

function updateForm(letter, sentence) {

  var occurences = 0;
  var form = document.getElementById(id);

  for (var i = 0; i < sentence.length; i++) {
    if (sentence.charAt(i) == letter) {
      occurences++;
    }
  }
  if(letter.match(alphaExp) && sentence.match(alphaExp)) {
    ..do  the thing..
  } else {
    alert('Only Letters are allowed');
  }
}

如何计算字符串中字符的出现次数

3 个答案: