I am encountering an issue with this code. The objective is to determine the frequency at which a specific word appears in the provided paragraph

function processWords(){  
    text = document.getElementById("inputText").value;
    text = text.replace(/(^\s*)|(\s*$)/gi,"");
    text = text.replace(/[ ]{2,}/gi," ");
    text = text.replace(/\n /,"\n");
    document.getElementById("wordcount").value = text.split(' ').length;
}

  <textarea name="inputText" cols="50" rows="4">
      Enter text here
   </textarea>
   <input type="button" name="Convert" value="Process Words" 
   onClick="processWords();"> 
   <input name="wordcount" type="text" value="" size="6">

I encountered an Uncaught TypeError: Cannot read property 'value' of null.

Can anyone assist me in resolving this issue?

javascript

Answer №1

The reason for the exception is that you have only specified the name, not the id, for your last input element. When using document.getElementById, it requires the id property to be set, not just the name.

To resolve this issue, you need to change 'name' to 'id' (or add 'Id') in the final line of the HTML:

<input id="wordcount" type="text" value="" size="6">

Additionally, make sure to also update the first line in your textarea like so: 

<textarea id="inputString" cols="50" rows="4">Text to count</textarea>

Answer №2

Within your html code, you have included the name attribute in both the textarea and input tags, however, you have omitted to include the id attribute for these elements.

This oversight will result in an error within the script when attempting to access the element by its id.

To rectify this issue and ensure the proper functioning of your script, it is essential to assign ids to the <textarea> and <input> tags as illustrated below:

function countWords() {
  let s = document.getElementById("inputString").value;
  s = s.replace(/(^\s*)|(\s*$)/gi, "");
  s = s.replace(/[ ]{2,}/gi, " ");
  s = s.replace(/\n /, "\n");
  document.getElementById("wordcount").value = s.split(' ').length;
}
<textarea id="inputString" cols="50" rows="4">Text to count</textarea>
<input type="button" name="Convert" value="Count Words" onClick="countWords();">
<input id="wordcount" type="text" value="" size="6">

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Conceal a div once the content in a separate div has finished loading

After loading an image in slices inside a div, I want to ensure that the entire content is loaded before displaying the div. To achieve this, I am using another div as a mask while the content loads: <div id="prepage" style="position:absolute; left:0px ...

javascriptjquery

Error encountered while attempting to save process using ajax - 500 Internal Server Error

I am facing an issue with my CodeIgniter code where I encounter a 500 internal server error when trying to save data. I am not sure why this problem is happening and would appreciate any help. Below is the AJAX code in the view: function save() { $(& ...

javascriptphpjqueryajaxcodeigniter

Leveraging jQuery to extract numerous concealed data from a webpage based on their names

Here is the scenario: <input type="hidden" name="uID" id="uID" value="251|0"> <input type="hidden" name="uID" id="uID" value="252|0"> <input type="hidden" name="uID" id="uID" value="253|0"> <input type="hidden" name="uID" id="uID" val ...

javascriptjquery

Unable to send email through Ajax/PHP contact form

It's quite amusing that it worked perfectly for one evening. After reaching out to my host, they assured me that there should be no issues with it not working. I even tried testing it in Firebug, but it appeared to be sending successfully. Additionall ...

phpjavascripthtmlajaxforms

Looking for help combining HTML5 Canvas and JavaScript to showcase images. Can anyone lend a hand?

I am currently in the process of developing an Android game using HTML5 and Javascript. I have managed to make some progress, but I have encountered a problem that has left me puzzled. Initially, my JS file and Html file were functioning well together for ...

javascriptandroidhtmlhtml5-canvas

Node: Sending JSON Values in a POST Request

I am currently working with the index.js file below: var Lob = require('lob')('test_6afa806011ecd05b39535093f7e57757695'); var residence = require('./addresses.json'); console.log(residence.residence.length); for (i = 0; i ...

javascriptjsonnode.jsapi

Material-UI rating component outputs a string instead of a numerical value

I'm encountering an issue with the Material UI rating component. Despite providing it with a number as the initial value (this.props.data.feelings_rating), it returns a string whenever I change it within my app. Below is the relevant code: Rating co ...

javascriptreactjstypesmaterial-uionchange

Received the error message "Material-UI: capitalize(string) expects a string argument" while implementing the snackbar feature in a React Material-UI project

While working with Material-UI, I came across an issue with the snackbar where I received an error message saying: Error: Material-UI: capitalize(string) expects a string argument. Here's a snippet of my code: this.state = { snackBarOpenVer ...

javascriptreactjsmaterial-ui

Only one of the two scripts is functioning as intended

I'm facing an issue with two different scripts - the first one doesn't seem to work while the second one does. Oddly enough, when I remove the second script, the first one starts working. Can you help me find a solution? <script> // Ta ...

javascriptjquery

JavaScript function for submitting form data using AJAX and performing validation

This is the code I have been working on: $(function () { $('.contact-form').submit(function (event) { $(this).find("input , textarea").each(function () { var input = $(this); if (input.val() == "") { ...

javascriptjqueryhtmlajax

Tips for dynamically modifying style mode in Vue.js

I am looking to implement a feature where the style can be changed upon clicking a button. In my scenario, I am using Sass/SCSS for styling. For example, I have three different styles: default.scss, dark.scss, and system.scss. The code for dark.scss look ...

javascriptcsstypescriptvue.jssass

**Finding the Index of a Table Row in Vue-Tables-2**

Recently, I came across some vue code that utilizes vue-tables-2. The table in question is quite simple and looks like this... <v-client-table :data="myRows" :columns="columns" :options="options"> <div slot=" ...

javascriptvue.jsvue-tables-2

Discovering the Windows Identifier of the Opener Window in Chrome via JavaScript

I recently opened a link in a new window and realized that the current window's ID is now the ID of the newer window. I'm curious if there is any method to determine the window ID of the original window (the opener) from the perspective of the ne ...

javascriptgoogle-chrome-extension

Is your YQL JSON script failing to provide the expected output?

Here is a script that I have copied almost directly from this. Why is it that the code below does not seem to return anything? ajax.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html dir="lt ...

javascriptjqueryajaxjsonyql

What was Douglas Crockford trying to convey with the term 'created in an alternate window or frame'?

What did Douglas Crockford mean when he mentioned that the is_array() test might not correctly identify arrays created in a different window or frame? var is_array = function (value) { return value && typeof value === 'object&apos ...

javascriptarrays

Puppeteer is unable to detect the node.js handlebars helpers

I'm utilizing puppeteer in NodeJs to generate a PDF file. I use handlebars to render the template and pass variables during compilation for handlebars to access them. Here is the current code snippet: const browser = await puppeteer.launch({ he ...

javascriptnode.jspuppeteerhandlebars.jsexpress-handlebars

What are the reasons for the dynamic exclusion of an element in Angular?

Can someone help me figure out why my data is not being added dynamically using ng-repeat? I have entered the "name" which should be added to the data, but it is not displaying in the UI. You can see the issue in this demo app.controller("studentcntr", ...

javascriptjquerynode.jsangularjsangularjs-directive

Issue: Entering data in the input field for each row results in the same value being copied to the qty field

Currently, I have a field where users can enter the quantity for each row. Everything was functioning properly until I decided to add another input field for the pick option. Unfortunately, now it seems that whatever is entered in one field gets duplicated ...

javascriptreactjsmaterial-ui

Utilize the inverse mapping method along with conditional statements inside a mapping function

When looping through the categories using categories.map(), I am trying to reverse the elements of the categories and also check for category.isFeatured before creating a link. However, I am unable to use an if statement in this scenario. const Header = ...

javascriptreactjsnext.js

Removing the Yellow Highlight on Input Field Following Email Autocomplete in Chrome

My username-password form is styled and working perfectly, but there's an issue that arises when I log in multiple times. Chrome automatically fills in my email, turning the username textbox yellow. It doesn't seem to happen with Firefox or Safar ...

javascripthtmlcssgoogle-chromecross-browser