TextArea的计数结果未显示在HTML页面上

Question

我正在弄清楚一些事情。我想创建一个页面来计算有几个单词存在文本方面。当用户单击按钮"计数"时，它在下面显示存在多少个单词。我尝试了一些事情，但我在HTML页面上没有结果。

var form = document.querySelector("form");
var counted = document.querySelector(".counted");
form.addEventListener("count", function(ev) {
  ev.preventDefault();
  countWords();
}, false);
// var countWords = string => string.split(' ').length;
// countWords(textarea.value);
// document.querySelector('#counted').value = countWords(string);
// function countWords(){
//     var textarea = document.querySelector("textarea").value;
//
//     document.querySelector("#textarea").value = textarea.split(' ').length;
//     document.querySelector(".counted").innerHTML += "There are " + textarea + " words in this text.";
// }
function countWords() {;
  string = document.querySelector("#textarea").value;
  string = string.replace(/(^s*)|(s*$)/gi, "");
  string = string.replace(/[ ]{2,}/gi, " ");
  string = string.replace(/n /, "n");
  document.querySelector("#counted").value = string.split(' ').length;
}

<form action="#">
  <textarea id="textarea" name="textarea" cols="30" rows="10"></textarea><br><br>
  Count how many words<br><br>
  <button id="count" name="count">Count</button><br><br>
  <p id="counted" class="counted"></p>
</form>

Answer 1

您应该...

• 添加onSubmit事件而不是onCount（无效），
• 如果不是<input>或<textarea>，则设置HTML元素的.innerText或.innerHTML，而不是.value：

var form = document.querySelector("form");
var counted = document.querySelector(".counted");
form.addEventListener("submit", function(ev) {
  ev.preventDefault();
  countWords();
}, false);
// var countWords = string => string.split(' ').length;
// countWords(textarea.value);
// document.querySelector('#counted').value = countWords(string);
// function countWords(){
//     var textarea = document.querySelector("textarea").value;
//
//     document.querySelector("#textarea").value = textarea.split(' ').length;
//     document.querySelector(".counted").innerHTML += "There are " + textarea + " words in this text.";
// }
function countWords() {;
  string = document.querySelector("#textarea").value;
  string = string.replace(/(^s*)|(s*$)/gi, "");
  string = string.replace(/[ ]{2,}/gi, " ");
  string = string.replace(/n /, "n");
  document.querySelector("#counted").innerText = string.split(' ').length;
}

<form action="#">
  <textarea id="textarea" name="textarea" cols="30" rows="10"></textarea><br><br>
  Count how many words<br><br>
  <button id="count" name="count">Count</button><br><br>
  <p id="counted" class="counted"></p>
</form>

Answer 2

window.onload = (function () {
    var count = document.querySelector("#count");
    var counted = document.querySelector(".counted");
    form.addEventListener("click", function(ev) {
        ev.preventDefault();
        countWords();
    }, false);
    function countWords() {
        var string = document.querySelector("#textarea").value;
        string = string.replace(/(^s*)|(s*$)/gi, "");
        string = string.replace(/[ ]{2,}/gi, " ");
        string = string.replace(/n /, "n");
        console.log(string);
        document.querySelector("#counted").innerHTML = string.split(' ').length;
    }
})();

<div id="form">
    <textarea id="textarea" name="textarea" cols="30" rows="10"></textarea><br><br>
    Count how many words<br><br>
    <button id="count" name="count">Count</button><br><br>
    <p id="counted" class="counted"></p>
</div>

使用window.onload，以便在DOM准备就绪后完成事件处理程序注册。使用innerHTML更新文本。您不必用户form元素。使用div进行分组。

Answer 3

定义按钮类型=按钮。

count

这是onclick函数：

function countWords(){;
string = document.querySelector("#textarea").value;
string = string.replace(/(^s*)|(s*$)/gi,"");
string = string.replace(/[ ]{2,}/gi," ");
string = string.replace(/n /,"n");
var count=document.querySelector("#counted").value;
count= string.split(' ').length;
alert(count);
}