Transferring the output of a Javascript function to display in a different location

Question

Transferring the output of a Javascript function to display in a different location

One of the challenges I'm facing involves a function that calculates the total cost of tickets based on user selection from a dropdown list. The price per ticket is stored in my database and retrieved when needed.

The function itself is functional:

function quantityChange(selElem) {
//Get the selected value from the dropdown list       
var quantity = $('#showQuantity option:selected').val();
//Retrieve ticket price from 'ticket' table
var ticket = parseInt(document.getElementById('ticketPriceHidden').value);
//Obtain venue information
var venue = document.getElementById('venuePlaceHidden').value;
//Multiply quantities to get total cost
var total = quantity * ticket;

document.getElementById('summary').innerHTML= 'You have chosen'+ ' ' + quantity + ' ' + 'tickets @' + ' ' + venue + ' = ' + ' ' + ' &pound;' + total;
}

This function is triggered within a div labeled 'ticket'. Once the user views the calculated total and proceeds by clicking a 'continue' button, the 'ticket' div is hidden and replaced with a 'delivery' div to retain the result.

Now, I am faced with another challenge: I need to display the result of the quantityChange(selElem) function within a new div called 'summary'. Is there a way to achieve this?

Your assistance would be highly appreciated. Thank you.

javascript

Answer 1

Answer №1

One way to add flexibility is by passing the ID of the element where you want the text displayed as a parameter in the function:

function updateQuantity(elementId) {
    // Get the selected quantity from the dropdown
    var quantity = $('#showQuantity option:selected').val();
    // Obtain the ticket price from the hidden field
    var ticket = +$('#ticketPriceHidden').val();
    // Retrieve the venue information
    var venue = $('#venuePlaceHidden').val();
    // Calculate the total cost
    var total = quantity * ticket;

    $('#' + elementId).html('You have selected' + ' ' + quantity + ' ' + 'tickets at' + ' ' + venue + ' for a total of' + ' ' + '£' + total);
}

You can then call this function like:

updateQuantity('summary');

To make it even more versatile, you can have the function return all the calculated values:

function updateQuantity() {
    // Obtain the selected quantity
    var quantity = $('#showQuantity option:selected').val();
    // Get the ticket price from the hidden field
    var ticket = +$('#ticketPriceHidden').val();
    // Retrieve the venue info
    var venue = $('#venuePlaceHidden').val();
    // Calculate the total cost
    var total = quantity * ticket;

    return {
        venue: venue,
        quantity: quantity,
        ticket: ticket,
        total: total
    };
}

Then, handle the output in the calling function:

var data = updateQuantity();

$('#summary').text('Total payment due: £' + data.total);

This approach allows for customization in displaying the data without hardcoding it into the value computation function.

Answer 2

One way to add flexibility is by passing the ID of the element where you want the text displayed as a parameter in the function:

function updateQuantity(elementId) {
    // Get the selected quantity from the dropdown
    var quantity = $('#showQuantity option:selected').val();
    // Obtain the ticket price from the hidden field
    var ticket = +$('#ticketPriceHidden').val();
    // Retrieve the venue information
    var venue = $('#venuePlaceHidden').val();
    // Calculate the total cost
    var total = quantity * ticket;

    $('#' + elementId).html('You have selected' + ' ' + quantity + ' ' + 'tickets at' + ' ' + venue + ' for a total of' + ' ' + '£' + total);
}

You can then call this function like:

updateQuantity('summary');

To make it even more versatile, you can have the function return all the calculated values:

function updateQuantity() {
    // Obtain the selected quantity
    var quantity = $('#showQuantity option:selected').val();
    // Get the ticket price from the hidden field
    var ticket = +$('#ticketPriceHidden').val();
    // Retrieve the venue info
    var venue = $('#venuePlaceHidden').val();
    // Calculate the total cost
    var total = quantity * ticket;

    return {
        venue: venue,
        quantity: quantity,
        ticket: ticket,
        total: total
    };
}

Then, handle the output in the calling function:

var data = updateQuantity();

$('#summary').text('Total payment due: £' + data.total);

This approach allows for customization in displaying the data without hardcoding it into the value computation function.

Answer 3

Answer №2

Transform this into a versatile function that outputs a result.

function calculateSum()
{
var firstNumber = 0;
var secondNumber = 1;
return firstNumber + secondNumber;
}

document.getElementById("result").innerHTML = "The calculated sum is: " + calculateSum();

The content of the element with an id of "result" would display:

The calculated sum is: 1

Answer 4

Transform this into a versatile function that outputs a result.

function calculateSum()
{
var firstNumber = 0;
var secondNumber = 1;
return firstNumber + secondNumber;
}

document.getElementById("result").innerHTML = "The calculated sum is: " + calculateSum();

The content of the element with an id of "result" would display:

The calculated sum is: 1

Answer 5

Answer №3

Here are some useful instructions for you.

To start, a div is generated in the first line of code.

Next, your function's outcome is placed within that newly created div.

Lastly, the div is attached to an element with the designated id "xxx".

var newDiv = document.createElement("div");
newDiv.innerHTML = resultOfFunction;
document.getElementById("xxx").appendChild(newDiv);

Answer 6

Here are some useful instructions for you.

To start, a div is generated in the first line of code.

Next, your function's outcome is placed within that newly created div.

Lastly, the div is attached to an element with the designated id "xxx".

var newDiv = document.createElement("div");
newDiv.innerHTML = resultOfFunction;
document.getElementById("xxx").appendChild(newDiv);

Transferring the output of a Javascript function to display in a different location

Answer №1

Answer №2

Answer №3

Similar questions

Angular JS: Implementing a click event binding once Angular has completed rendering the HTML DOM

Obtaining worth from an entity

What is the method to retrieve the local filepath from a file input using Javascript in Internet Explorer 9?

Executing both JavaScript Promise .then() and .catch concurrently

Element could not be located following successful login process

A configuration for ".node" files is missing: specifically, the loader for node_modules/fsevents/fsevents.node in a project using Vite

Interactive HTML5 Web Application File Selector

Tips for deleting multiple objects from an array in angular version 13

Is there a way to simulate a KeyboardEvent (DOM_VK_UP) that the browser will process as if it were actually pressed by the user?

"Enhance your web development skills by mastering jQuery alongside the

Can you explain the significance of the error message stating "XMLHttpRequest.timeout cannot be set for synchronous http(s) requests made from the window context"?

Angular 14 debug error: Incorrect base path setting

Vue select is causing the selected choice of another selector to be influenced

How can I create a notification popup triggered by a button click with Ajax and Javascript?

Could a class method be accessed from outside a nested handler method in JavaScript?

Using PHP to pass values from a MySQL database to JavaScript

Using Javascript to make a nested JSON api request that includes several query parameters

Monitor the $scope within a factory by utilizing the $http service in AngularJS

"RecognitionAudio variable missing" and "InactiveRpcError occurred" [Utilizing the Google text-to-speech API]

The HTML div captured with html2canvas is incomplete