时间戳

首页 > 解决方案 > 来自 textarea 的计数结果未显示在 HTML 页面上

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

问题描述

我在想一些有趣的事情。我想创建一个页面来计算文本区域中存在多少个单词。当用户单击“计数”按钮时，它会在下面显示存在多少个单词。我尝试了一些东西，但在我的 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>

标签： javascripthtml

解决方案

你应该...

  • 添加onSubmit事件而不是onCount（这是无效的），并且
  • 设置HTML 元素的.innerTextor ，而不是如果它不是or ：.innerHTML.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>

推荐阅读