javascript - 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 (这是无效的)，和
• 设置.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>