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（无效），并且
如果不是.innerText或.innerHTML，请设置HTML元素的.value或<input>而不是<textarea>：

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

定义按钮类型=按钮。

计数

这是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);
}

来自textarea的计数结果未显示在HTML页面上

3 个答案: