CODEWITHSUNDEEP
javascripthtml
Rico Papillon
Rico Papillon

Reputation: 79

Count results from textarea don't show up on the HTML page

I was figuring some things out for fun. I wanted to create a page to count how many words there exist a textarea. When the user clicks on the button 'Count' it shows below how many words exist. I tried some things but I got no result on my html page.

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>

Upvotes: 2

Views: 82

Answers (3)

Priyam Sengupta
Priyam Sengupta

Reputation: 24

Define button type= button.

Count

and here is the onclick function:

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

Upvotes: 0

John Doe
John Doe

Reputation: 2491

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>

Use window.onload so that the event handler registration is done after the DOM is ready. Use innerHTML to update the text. You don't have to user form element. Use div for grouping.

Upvotes: 0

FZs
FZs

Reputation: 18619

You should...

  • add onSubmit event instead of onCount (which isn't valid), and
  • set the .innerText or .innerHTML of an HTML element instead of .value if it isn't a <input> or <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>

Upvotes: 1

Related Questions