如何統計字符串中字符的出現

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

您的代碼似乎很好，只是嘗試和你匹配相同

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')" /> 

算OCCURENCES

的

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

Answer 2

要檢查錯誤的表單字段數量：

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

據我瞭解，你要檢查BOX1不是 'BOX3 /字母' .. 。

添加ID = 'BOX1' 到該輸入元件，然後檢查這樣的：

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

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'); 
    } 
}