Looking to run a JavaScript command without the need for any triggering events?

Question

Looking to run a JavaScript command without the need for any triggering events?

Is there a way to execute the following JavaScript code without using any event and have it run at the start, onLoad of the page?

function calculateDiscount() {
  var totalPrice = document.getElementsByClassName("Total")[0].innerHTML;
  var discountedPrice = document.getElementsByClassName("DiscPrice")[0].innerHTML;
  var discountPercentage = ((totalPrice - discountedPrice) / totalPrice) * 100
  document.getElementById("demo").innerHTML = discountPercentage + "% off";
}

<div class="Total">5000</div>
<div class="DiscPrice">3000</div>
<div id="demo"></div>
<button onclick="calculateDiscount()">Click</button>

javascript html css

Answer 1

Answer №1

function calculateDiscount(){
var totalAmount = document.getElementsByClassName("Total")[0].innerHTML;
var discountedPrice = document.getElementsByClassName("DiscPrice")[0].innerHTML;
var discountPercentage =((totalAmount - discountedPrice)/totalAmount) *100
document.getElementById("discountMessage").innerHTML = discountPercentage +"% off";
}

calculateDiscount();

Answer 2

function calculateDiscount(){
var totalAmount = document.getElementsByClassName("Total")[0].innerHTML;
var discountedPrice = document.getElementsByClassName("DiscPrice")[0].innerHTML;
var discountPercentage =((totalAmount - discountedPrice)/totalAmount) *100
document.getElementById("discountMessage").innerHTML = discountPercentage +"% off";
}

calculateDiscount();

Answer 3

Answer №2

function calculateDiscount(){
var originalPrice = document.getElementsByClassName("Total")[0].innerHTML;
var discountedPrice = document.getElementsByClassName("DiscPrice")[0].innerHTML;
var discountPercentage = ((originalPrice - discountedPrice)/originalPrice) * 100;
document.getElementById("demo").innerHTML = discountPercentage + "% off";
}
calculateDiscount(); // Execute this line to compute the discount as soon as the JS is loaded

<p class="Total">15</p>
<p class="DiscPrice">10</p>
<p id="demo"></p>

Next, ensure your script is included in the HTML. No need to manually trigger any event

Answer 4

function calculateDiscount(){
var originalPrice = document.getElementsByClassName("Total")[0].innerHTML;
var discountedPrice = document.getElementsByClassName("DiscPrice")[0].innerHTML;
var discountPercentage = ((originalPrice - discountedPrice)/originalPrice) * 100;
document.getElementById("demo").innerHTML = discountPercentage + "% off";
}
calculateDiscount(); // Execute this line to compute the discount as soon as the JS is loaded

<p class="Total">15</p>
<p class="DiscPrice">10</p>
<p id="demo"></p>

Next, ensure your script is included in the HTML. No need to manually trigger any event

Looking to run a JavaScript command without the need for any triggering events?

Answer №1

Answer №2

Similar questions

Configuration file stored within the node_modules directory

What is the correlation between $container-max-width and $grid-breakpoint in Bootstrap version 4?

Ways to modify color while user moves the screen

Struggling with updating state using splice method within an onClick event in React Hooks

Activate a button on-the-fly

Is it possible to test a Node CLI tool that is able to read from standard input with

What is the best way to perform this task in Angular2?

What is the process for viewing the collections of all databases while logged in as an administrator?

What Causes the "Not a String or Buffer Type" Unhandled Exception?

Adding an array to an object within an array using AngularJS

Stop processing the current websocket connection once a new websocket request is received

php - Can you identify the issue?

Creating multiple objects using a single object in JavaScript can be achieved by using the concept of object

The form within the while loop is only functioning with the initial result

CoffeeScript equivalent of when the document is loaded

Using AngularJS to show content based on a callback function

The POST method functions properly in the local environment, however, it encounters a 405 (Method Not Allowed) error in the

The PageMethods function is successful when using a single parameter, but encounters an error when attempting to use two parameters, resulting in the

Navigate quickly to different sections using jump links and adjust the positioning with the style attribute, such as "padding-top

Designating a class for the main block