What are the steps to make a "calculate" button?

My webpage has some variables that take a few seconds to calculate. I want to display the sum of these two variables in a text field, but it needs to have a slight delay (1-2 seconds). I tried using "document.write(var1 + var2)" inside a specific function, but the page disappears once the sum is ready and only shows the result (I want it to appear on the same page). I also attempted to use "setTimeout" with no success.

I could use a button to create the delay, which works fine, but I don't know how to display the result. I want the sum to be shown in a text field on the same page. I've seen buttons that convert into the result when pressed, but I'm not sure how to achieve this. Can anyone offer assistance? Thank you!

javascriptbuttondelay

Answer №1

Imagine your text box appears in this manner:

<div id='textfield'>the outcome will be displayed here</div>

In order to update it after a delay of 2 seconds, utilize the subsequent javascript snippet:

setTimeout(function(){
    document.getElementById('textfield').innerHTML="The new result";
}, 2000);

If jQuery is being utilized, the line inside above can be shortened to:

$('#textfield').html("The new result");

Answer №2

If this happens to be your designated text box.

<input type="text" id ="myinput">

Populate it with a value using the following method:

document.getElementById("myinput").value=11233;

Similarly, to input text into any text field, assign an ID and utilize getElementById.

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

WebDriverError: Issue occurred when trying to establish a new session. The request was not forwarded properly, resulting in

I encountered an error while running my selenium testcase using selenium grid. The test is a modified example from the selenium documentation. The versions are as follows: - ChromeDriver: 123.0.6312.58 - Chrome: 123.0.6312.59 (Not sure if selenium is using ...

javascriptnode.jsselenium-webdriverselenium-chromedriverselenium-grid

Ensuring authenticity of sender in Chrome Extension message passing

Creating a chrome extension involves the content script sending a message to the background script. chrome.runtime.sendMessage({greeting: "hello"}, function(response) { console.log(response.farewell); }); Upon receiving this message, background.js retr ...

javascriptgoogle-chromegoogle-chrome-extension

What is the best way to divide a GraphQL schema to avoid circular dependencies?

I have a question that is similar to the issue of circular dependency in GraphQL code discussed on Stack Overflow, but my problem lies within JavaScript (ES6). The size of my schema definition has become too large, and I am struggling to find a way to bre ...

javascriptgraphql

The Safari extension is launching as a file within Safari browser version 5 on a Mac running the Snow Leopard operating system

I recently ventured into the world of Safari extension development. After creating an extension using Extension Builder, I packaged and uploaded it to a server. On my website, I provided a download link for the extension: <a href="http://example.com/ex ...

javascriptjquerymacossafarisafari-extension

What is the most effective way to dynamically incorporate external input into a SlimerJS script?

Could use some assistance with SlimerJS. My current program requires intermittent input from stdin to proceed with the next task. The code below functions effectively when using PhantomJS+CasperJS for reading external input, but encounters difficulties wi ...

javascriptcasperjsslimerjs

`HTTP Streaming with Axios in a Node JS Environment`

I am currently facing an issue while attempting to stream price data via HTTP (I'm surprised they aren't using websockets..). I usually use axios for making REST API requests, however, I am struggling to handle 'Transfer Encoding': &apo ...

javascriptnode.jshttpaxios

Does this information operate on Vue or Node?

I have recently started learning programming and currently working on an HTML project for school. My professor mentioned that we should only use Node.js for this project. However, I am concerned that the function I used below might be Vue instead of Node ...

javascriptnode.jsvue.js

Experiencing an issue with establishing a secure SSL/TLS connection while utilizing Test Complete CLR Bridge alongside TestRail .Net bindings

I am currently utilizing TestRail API .NET bindings in conjunction with JavaScript and TestComplete CLR bridge functionality. I have developed the Guorok.Testrail library by referencing the Newtonsoft.Json library in Visual Studio. In TestComplete, I can s ...

javascript.nettestingtestcompletetestrail

Handle Ajax requests to prevent multiple submissions upon clicking

Seeking a solution to avoid multiple requests when the user clicks on the login or register button. The code provided below is not functioning as expected; it works fine the first time but then returns false. $('#do-login').click(function(e) { ...

javascriptjqueryajax

Using VueJS to integrate a CSS file into a minified CSS bundle in webpack

I am working on a project with Vue.js and I want to add my personal CSS files to the minified CSS file that is generated from the styles in *.vue files. In my App.vue file, I have: <style lang="scss"> @import '/static/css/AdminLTE.min.css&ap ...

javascriptcssvue.js

What is the best way to remove an item from an array inside another object in JavaScript?

I am currently developing an application using Node, mongoose, and express. My goal is to remove an object from an array that is nested inside another object. Here is the structure of the objects: const oldSection = { _id: '62d3f1d221aa21a03fe3bc21& ...

javascriptnode.jsexpress

When a page with parameters is reloaded, React fails to initiate

I'm encountering an issue with my application in development mode on localhost. When I try to reload the app on a route with parameters, for example: localhost:8080/item/2 React fails to initialize and only a blank page is displayed. However, if I ...

javascriptreactjsreact-router

What is the best way to enable visitors to share the current page on blogger, similar to the functionality of Facebook's

I'm looking to integrate a button on my website similar to Facebook's like button that allows users to share my site on Blogger. However, after checking Blogger's developer site, it appears that there is no equivalent JavaScript code availab ...

javascriptblogger

Could not locate the provider: $stateProvider

It's puzzling to me why this code is not recognizing the $stateProvider. Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: $stateProvider This is a simple example of a module: ( ...

javascripthtmlangularjs

Unable to dynamically highlight a row in a GridView using JavaScript

Performing this task used to be simple, but it was my first time dynamically generating the GridView. Each cell in the GridView is styled with its own CSS when created. In the RowDataBound event, I set up the highlighting as usual: e.Row.Attributes.Add("o ...

javascriptgridviewdynamicmouseover

Implementing lazy loading functionality with jQuery for an image grid within an AngularJS single page application

Recently, I decided to enhance my GUI for boom by incorporating Lazy Loading of images. This GUI is constructed using AngularJS. I have a working version that loads all images, which I have shared through this Gist link: https://gist.github.com/brock/67241 ...

javascriptjqueryangularjslazy-loading

HTML5 File Upload Failure in Google Chrome

Currently, I am utilizing XHR for file uploads which is functioning perfectly in Firefox but encountering issues in Chrome. An error message displays stating Upload failed: 0, indicating that xhr.status returns as 0 - the significance of this remains uncl ...

javascripthtmlfile-uploadxmlhttprequest

What is the best way to have Protractor pause until a specific promise is resolved?

I am having an issue with my website where clicking a button triggers an angular service that returns some data to be displayed on the page. I need to write an angular test that clicks the button, waits for the promise to resolve, and verifies that the dat ...

javascriptangularjsprotractorangular-promise

Guide on incorporating descriptive text for an image by utilizing a data attribute within its parent element

I'm trying to find a way to attach an alt-text attribute to an image by assigning a data attribute to its parent container. Essentially, any text I input in the data-alt attribute will be set as the alt-text for the img element. How should I format ...

javascripthtml

Should I generate an array or pull data directly from the database?

Hey there, I've got this JavaScript app and could really use some input or tips. Here's the idea: Users log in to try and defeat a 'boss', with each player working together in the game. Let's say the 'boss' has 10 millio ...

javascriptphphtml