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

Update the state within a forEach iteration

Is there a way to update state when clicking on buttons? I keep getting an error. Error: Uncaught TypeError: this.setState is not a function I understand that this.setState cannot be used here, but I'm unsure of where to bind it. class Popup extend ...

javascriptloopsreactjsaddeventlistenersetstate

Utilizing React Material-Table to Trigger a React Component through Table Actions

I have set up a datatable using the code below. <MaterialTable icons={tableIcons} title={title} columns={columns} data={data} actions={[ { icon: () => <Edit />, t ...

javascriptreactjsmaterial-uimaterial-table

Challenge with uploading Minio presigned URLs

I am encountering a problem with the Minio presigned URL. While I have successfully obtained the URL and used the PUT method to insert my file into my Minio bucket, I am unable to open certain file types such as jpg, png, or pdf. This is due to Minio autom ...

javascriptnode.jsexpressstorageminio

Is it possible to retrieve browser history from Google Chrome using Node.js on a Windows operating system?

I'm currently developing a personal electron app for managing my lifestyle. One of the key features is controlling my daily internet browsing through the app. I am aiming to integrate my Chrome history into the electron app. Could someone recommend a ...

javascriptc#node.jswindowsgoogle-chrome

showing the values stored in local storage

My goal is to show only the values stored in local storage, excluding the key value that displays all data after submitting the login form. welcome <span id="demo"></span>; <script> document.getElementById('demo').innerHTML = ...

javascriptvue.jslocal-storage

Detecting changes in URL hash using JavaScript - the ultimate guide

What is the most effective method for determining if a URL has changed in JavaScript? Some websites, such as GitHub, utilize AJAX to add page information after a # symbol in order to generate a distinct URL without having to refresh the page. How can one ...

javascriptajaxfragment-identifier

What steps should I take to generate a stylized date input in javascript?

Looking to dynamically create a date string in JavaScript with the following format: dd-MMM-yyyy Need the dd part to change between 1 and 29 each time I generate the variable within a loop Month (MMM) should be set as Jan ...

javascriptdate

Guide on implementing asyncWithLDProvider from Launch Darkly in your Next.js application

Launch Darkly provides an example (https://github.com/launchdarkly/react-client-sdk/blob/main/examples/async-provider/src/client/index.js) showcasing how to use asyncWithLDProvider in a React project (as shown below). However, I'm struggling to integr ...

javascriptreactjsasynchronousnext.jslaunchdarkly

Concealing Vimeo's controls and substituting them with a play/pause toggle button

I'm currently working on implementing the techniques demonstrated in this tutorial (), but unfortunately the code in the fiddle I put together doesn't appear to be functioning correctly. I'm at a loss as to what might be causing this issue. ...

javascriptjquerycss

Ensure that every HTML link consistently triggers the Complete Action With prompt on Android devices

After extensive searching, I have yet to find a solution to my issue. I have been developing a web application that allows users to play video files, primarily in the mp4 format. Depending on the mobile browser being used, when clicking the link, the vide ...

javascriptphpandroidhtmlonchange

Prevent secret select fields from being submitted within a form

In my interface, there are a couple of dropdowns where a user can select the first option and based on that selection, a new dropdown will appear. Currently, when posting the form, all the select dropdown values are included in the post data, even the hid ...

javascriptjqueryhtml

Steps for resetting the Redux Reducer to its initial state

Is there a way to reset a specific Redux Reducer back to its initial state? I'd like the register reducer's state to revert back to its initial state when leaving the register page, such as navigating to the Home or other pages in a React Nativ ...

javascriptandroidreactjsreact-nativeredux

Tribal Code Typescript Compiler

Typescript is a great alternative to Javascript in my opinion, but it bothers me that it requires node.js as a dependency. Additionally, I find it frustrating that there seems to be only one compiler available for this language, and it's self-hosted. ...

javascriptc++cnode.jstypescript

Tips for making sure AngularJS runs a function and its subfunction sequentially

How do I run the code below to display the details of each flavor and its corresponding ITEM ID in a specific order. Execution Format: Flavor1, Flavor2 -- Getflavors() Flavor1 ITEM1, ITEM2... -- GetItemIDs_ofeachFlavor(MapFlvID) GET ITEM1 DETAILS and ad ...

javascriptangularjsangular-promiseangular-http

Preview and crop your image before uploading

Currently, I am working on developing a form that will enable administrators to upload an image. The aim is to allow them to preview the image before uploading it, displaying it at a specific size and providing the option to click on the image to open an i ...

javascriptjquery

JQuery .click Event doesn't center elements even with transform-origin adjustment

In the JSfiddle provided below, you can see that after a click event occurs, two span (block) elements rotate 45deg to form an "X". However, both elements are slightly shifted left, creating an off-center "X" relative to the parent's true center-origi ...

javascriptjquerycsscenter

Tips for successfully executing child_process.exec within an ajax request

On a server that I have access to but not ownership of, there is a node js / express application running on port 3000. Various scripts are typically executed manually from the terminal or via cron job. My goal is to have a button on the client-side that tr ...

javascriptnode.jsajaxexpresschild-process

Is there a way to reduce the excessive bottom margin on Twitter embeds?

Is there a way to adjust the Twitter embed code for tweets so they don't have a large margin at the bottom? Here is an example of the standard Twitter embed code: <blockquote class="twitter-tweet"><p>@<a href="https://twitter.com/gami ...

phpjavascripthtml

Filtering out Objection/Knex query results based on withGraphFetched results

I am working with two models in Objection - "brands" and "offers". Brand: const { Model } = require('objection') class Brand extends Model { static get tableName() { return 'brands' } ...

javascriptnode.jsdatabaseknex.jsobjection.js

The height of divs spontaneously changes after resizing without any instructions

I am developing a jQuery function to vertically center an element. The function is triggered on load and here is the code: JQuery var $window_height; function Centerize(content) { content.css('margin-top', (($window_height - content.height( ...

javascriptjqueryhtmlcss