The issue of an endless loop being caused by utilizing HTML input as a function parameter

I created a JavaScript prime factor calculator that I'm trying to integrate into my website. I want users to be able to input their own number, but whenever the input is submitted, it leads to an infinite loop. After investigation, I found that the issue lies in the code being used as the function's parameter.

Below is the HTML section:

      <div class="pf-calculator-instructions-wrapper"><p class="pf-calculator-instructions">
        <em>Enter a number in the field below. Output will be displayed above. Maximum 15 digits.</em></p>
      </div>
      <input id="pf-input" type="number" maxlength="15" class="pf-calculator-input"/>
      <button class="submit-button" onclick="findPrimeFactors(document.getElementById('pf-input').value)">Submit</button>

I tested the function with a hardcoded number (10) and it worked without any issues. However, when I changed it to use the user input value (still set to 10), the page froze, creating what seems like an infinite loop. Am I overlooking something here?

Any help would be appreciated!

javascripthtmlcss

Answer №1

Upon further inspection, I realized that my oversight was failing to properly convert the input from a string to an integer. It appears that I mistakenly assumed the input type would automatically be in numerical format.

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

Cannot display data in template

After successfully retrieving JSON data, I am facing trouble displaying the value in my template. It seems that something went wrong with the way I am trying to output it compared to others. My function looks like this, getUserInfo() { var service ...

javascriptangulartypescriptionic-frameworkionic4

Safari Mobile not rendering absolute positioning correctly

Our website www.anahatainternational.org has a functioning search section that is displaying correctly on Firefox, Chrome, and Safari browsers. However, we have encountered an issue with the mobile version of Safari where the search section appears in the ...

cssmobile-safari

JavaScript is not being loaded onto the client by Express

I am looking to incorporate requireJS into my client code. Here is my file structure: ProjectRoot |-server.js |-public/ |-index.html |-js/ |-app.js |-lib/ |-require.min.js |-underscore.js |-backbone.js ...

javascriptnode.jsexpressrequirejs

Looking for advice on how to design a custom JavaScript widget?

I am currently working on a web application and I am in the process of developing a feedback form widget that users can easily embed on their websites. The data submitted through this widget will be securely stored within my web application. One important ...

javascriptajaxwidgetcross-domain

Adapting page content according to user selection

I am facing a situation wherein I need to redirect to a different page when clicking on a submit button based on the item selected from a list of options. The list is displayed as an unordered list, and upon clicking an option, a class of "active" is dynam ...

javascriptphphtmljquerycss

Encountering errors when importing a JS file into a Vue project

I recently attempted to utilize the plugin https://www.npmjs.com/package/mobius1-selectr After running npm install mobius1-selectr I proceeded to import it into my main.js import 'mobius1-selectr/dist/selectr.min.css'; import 'mobius1-sel ...

javascriptnode.jswebpackvue.js

Exploring the possibilities of Javascript with Lego Mindstorms

My current project involves programming Lego Mindstorms with JavaScript, but I'm struggling to find helpful resources on the topic. Can anyone recommend some good sources? Moreover, I'm unsure of how to make specific actions like turning the whe ...

javascriptnode.jslego-mindstorms

Issue arising from failure to check the checkbox

My ajax request is sending form data to an external PHP script and returning a result, but I'm encountering an error: Uncaught SyntaxError: Unexpected token < index.php hr.onreadystatechange This error occurs when trying to send the form without ...

phpjqueryhtmlajaxjson

Angular's $http method is sending a GET request instead of a POST request

$http.post(main+'/api/getcard/', $.param({number: $scope.searchcard}), {headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'} }) .then(function (response) { if(response.data != 0) ...

javascriptangularjslaravelhttpmethods

Call getElementById upon the successful completion of an AJAX request

In the process of constructing a mini quiz, I am utilizing a variable quizScore to store the score. Each question in the quiz is displayed using AJAX. An individual AJAX call captures the ID of the button pressed (for example, on question 2, the button ID ...

javascriptajax

How can I navigate to column 3 of an HTML table using XPATH with Selenium Webdriver in Python?

I have extracted the text from the Name column of an HTML table using XPATH, which corresponds to column index [1]. Now, I need to navigate to the 3rd column with index [3] using XPATH, but I'm not sure how to proceed. Here is my current XPATH: //ta ...

csspython-2.7seleniumxpathselenium-webdriver

Unable to retrieve an array in SAPUI5 and assign it to a JSONModel

I encountered an issue with accessing an array where I stored data from a model read operation. The array, named aData, contains row data for a table and everything seems to be working correctly as all the data is present. This code snippet is executed af ...

javascriptdata-bindingsapui5sap-fiori

Tips for positioning D3 circles along a half-circle arc

I'm trying to align a series of radios in a semi-circle formation, created from circles. The number of radios will vary and I need to ensure they stay centered. Here is my current setup: UPDATE: I just noticed that the order of the radios in the scre ...

javascripthtmlreactjssvgd3.js

When working with Angular, encountering circular dependencies can occur when utilizing providedIn alongside forRoot

Currently, I am in the process of developing an angular library that includes an internal service. The service is defined as follows: I have utilized providedIn to ensure it is tree-shakable and did not opt for providedIn:'root' as it is solely u ...

javascriptangulartypescriptlazy-loadingtree-shaking

The color input click event does not work properly when triggered within a context menu event

This may sound a bit complicated, but let me try to explain it clearly. I'm working on a web app where I want users to be able to change the background color of certain divs. I plan to use a color picker interface for this purpose and utilize the con ...

javascriptjqueryevent-handlingjquery-eventscolor-picker

function to choose in antd datepicker component

Is there a way to obtain the currently selected date within the onSelect function after updating the selected date in the state? onSelect = (cal) => { this.setState({ selectedValue: cal }); alert(this.state.selectedValue); After making ...

javascriptreactjsantd

Website not showing correct format in Opencart

I am completely new to using Stack Overflow, so please forgive any mistakes I may make. I recently implemented an SSL certificate from Comodo on my custom-built ecommerce store that runs on the OpenCart platform. Previously, the website was functioning pe ...

htmlcsssslcompressionopencart

What is the best way to bring in a JavaScript file from a specific directory within my Vue JS application?

I've been grappling with the challenge of integrating additional JS files into my Vue Application through my App.vue file for quite some time now. Specifically, I'm interested in including scripts that are stored in a separate file within my scri ...

javascriptvue.jsvuejs2

What is the best way to create a filter function that continues past the first false value?

Looking for a solution to successfully filter an array of objects by comparing it to another array through looping over its values. The issue arises when the filter function stops at the first false, preventing the full comparison. Any suggestions on how ...

javascriptarrays

Display the current date in a formatted way using Angular 2

I am struggling with displaying the current date in the format I desire. The code snippet I currently have is: this.whatTime = Observable.interval(1000).map(x => new Date()).share(); When I use this code in my template like so: {{whatTime | async}} ...

javascriptangular