Error: CryptoJs has not been defined

I attempted to hash a text on the client-side. I used the code below to hash it, but unfortunately encountered a Reference Error.

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/md5.js">
  </script>
</head>

<body>
  <script>
    var plaintext = "hiii";
    var encrptedText = CryptoJs.md5(plaintext);
    alert("Encrpted Text : " + encrptedText.toString());
  </script>
</body>

</html>

Answer №1

Utilize the complete package, not just relying on the md5 module. Make sure to modify the src within your script tag.

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.js"></script></head>
<body>
<script>
var plaintext="hello";
var encrptedText = CryptoJS.MD5(plaintext)
alert("Encrypted Text: "+ encrptedText.toString());
</script>
 </body>
</html>

Answer №2

If you prioritize the size of extended libraries, consider using pure-md5 (4.76kb) over crypto-js (187.44kb).

<html>

<head>
<script src="https://unpkg.com/pure-md5@latest/lib/index.js">
  </script>
</head>

<body>
  <script>
    var plaintext = "hiii";
    var encrptedText = md5(plaintext);
    alert("Encrpted Text : " + encrptedText.toString());
  </script>
</body>

</html>

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

Storing two values when an option is selected in a dropdown in Javascript using the map functionIn this tutorial,

The JSON data provided is structured as follows: [ { "course_name": "React", "course_id": 2 }, { "course_name": "Python", "course_id": 1 } ] Displa ...

Issue with disabling the submit button when two textboxes are empty is not functioning as expected

My goal is to have two text-boxes and one button on my web page. The button should be disabled if either of the textboxes is empty. However, with the current code, the button remains enabled as long as at least one of the textboxes has a value. HTML < ...

Utilizing AngularJS to implement checkbox selection within a table

I'm working on a method that will receive an Id from a table when a checkbox is checked and update the $scope.selected array in my Angular controller. If the checkbox is unchecked, it should remove the corresponding item from $scope.selected. Here&ap ...

Guide to displaying a quick message and then redirecting the page upon clicking a button in ASP.NET

Hello, I am encountering an issue with a submit button on my page. I want the user to be prompted with a message saying "Are you sure to submit that page really" when the submit button is clicked, and if they click yes, then it should redirect to another p ...

Using PHP to validate a read-only textbox

I am trying to implement validation on a Datepicker that is set to readonly, but I am facing issues with my current code. Can someone please assist me? Below is the JavaScript code used for error trapping: <script type="text/javascript"> $(func ...

Transforming the typical click search into an instantaneous search experience with the power of Partial

I am working on a form that, when the user clicks a button, will display search results based on the entered searchString. @using (Html.BeginForm("Index", "Search")) { <div id="search" class="input-group"> @Html.TextBox("searchString", n ...

Displaying hidden Divs in React Typescript that are currently not visible

I have an array with various titles ranging from Title1 to Title8. When these titles are not empty, I am able to display their corresponding information successfully. Now, my goal is to include a button that will allow me to show all fields. For example, ...

Breaking down arrays in Typescript

Let's say I have an array like this: public taskListCustom: any=[ {title: 'Task 1', status: 'done'}, {title: 'Task 2', status: 'done'}, {title: 'Task 3', status: 'done'}, {title: 'Task ...

issue related to prototypejs event handlers and event triggering

Currently, I am in the process of learning both the prototype framework and javascript as a whole. My current task involves refactoring some existing code to generate HTML from data within a class by utilizing an event listener. Despite my efforts, I am en ...

The ::before pseudo element is malfunctioning when used in the makeStyles function

I am currently utilizing the makeStyles function in React, but I seem to be facing an issue where the content within the ::before pseudo-element is not displaying. Strangely enough, when the content is an image it works fine, but text does not render. Jus ...

What is the proper jQuery traversal method to display a single templated element?

Utilizing handlebars as the view engine for node.js, the subsequent html content is dynamically produced and repeated: http://jsfiddle.net/4Q5PE/ <div class="btnsContainer"> <div class="btn-group" data-toggle="buttons"> <label cla ...

JavaScript code that triggers when a checkbox is not selected

I'm attempting to dynamically add an input field when a checkbox is clicked, with the intention of having the checkbox already checked by default. However, I am encountering an issue where the checkbox remains unchecked even after the input field is d ...

Is there inconsistency in the behavior of json.parse when given the same input?

This query pertains to the differentiation in outputs resulting from various inputs I am not seeking guidance on achieving a specific output. The reason behind the discrepancy in output between two scenarios, despite using the same argument for the JS ...

Troubleshooting CSS transition issues on ASP.NET Web Forms

Is there a way to make CSS3 transitions work in a .aspx page? I prefer Web Forms for designing forms and any suggestions would be helpful. The following is the code snippet from the .aspx page: <%@ Page Title="" Language="C#" MasterPageFile="~/Sit ...

utilize angular4 to dynamically link images from twitter based on certain conditions

Currently, I am attempting to retrieve the URL of images from tweets only if the tweet contains an image. I have been successful in fetching tweets and some images, but the issue arises when a tweet does not have an image, causing it to break and stop disp ...

The event is not triggered by ng-submit

I'm struggling with submitting this form. I've checked everything, but it just won't work. This is my HTML: <html ng-app = 'myApp'> <div ng-controller="Tabs"> ... <form ng-submit="sendClicked()" &g ...

Using pure JavaScript, implement a transition effect that changes an element's display from

My goal is to create an animation where a hidden menu box slides down and appears when the mouse hovers over a button. The animation works correctly, but I encountered an issue when trying to add the transition from display:inline-block to display:none and ...

Tips for transforming every element of an array into its own array using JavaScript or Loadash

Hello, I have an array that looks like this. I am attempting to convert each element into its own array. I tried using lodash's chunk function but was unsuccessful. [ 'Product 1', 'Product 2', 'Product 3', 'Product ...

Utilizing React componentDidUpdate for merging and appending data

I am working with a functional component that generates data in an object format from a state variable called scanlist: 0: brand: "AATEST" exp: "2022-08-25" gtin: "15735423000247" iname: "Arthur's Test Item" lot ...

The GeoChart zoomOut button is not visible at this time

I am currently exploring the geochart API, which is a relatively new one with limited information available. <!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></scr ...