CODEWITHSUNDEEP
javascript
Tim Johnstone
Tim Johnstone

Reputation: 363

Getting the value from a Javascript function to appear somewhere else

I have a function that calculates the number of tickets a user chooses (from a dropdown list) and multiplies it by the price of the ticket (this ticket price is stored on my sql database).

The function itself works fine:

function quantityChange(selElem) {
//Select the value of the drop down list       
var quantity = $('#showQuantity option:selected').val();
//get the value of the number from the tPrice column in 'ticket' table
var ticket = parseInt(document.getElementById('ticketPriceHidden').value);
//get the venue value
var venue = document.getElementById('venuePlaceHidden').value;
//multiply them together
var total = quantity * ticket;

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

This function is called in a div called 'ticket', once the user sees the calculated total from this function and then they press a 'continue' button that hides this div and shows a new div called 'delivery' so the result is not being discarded.

What I'm trying to do is this: I want to get the result of the function quantityChange(selElem) again but in a completely new div called 'summary'. Is there any way of doing this?

Any help is much appreciated, thanks.

Upvotes: 0

Views: 300

Answers (3)

Tom
Tom

Reputation: 4180

These lines should help you.

The first line creates a div.

The second line inserts your function result in that div.

The third line hangs the div on an element you've given the id "xxx".

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

Upvotes: 0

Felix Kling
Felix Kling

Reputation: 816364

One option is to pass the ID of the element you want the text appear in as parameter to the function:

function quantityChange(elementId) {
    //Select the value of the drop down list       
    var quantity = $('#showQuantity option:selected').val();
    //get the value of the number from the tPrice column in 'ticket' table
    var ticket = +$('#ticketPriceHidden').val();
    //get the venue value
    var venue = $('#venuePlaceHidden').val();
    //multiply them together
    var total = quantity * ticket;

    $('#' + elementId').html('You have chosen'+ ' ' + quantity + ' ' + 'tickets @' + ' ' + venue + ' = ' + ' ' + ' £' + total);
}

which you call as:

quantityChange('summary');

To achieve even more flexibility, you can return all the computed values:

function quantityChange() {
    //Select the value of the drop down list       
    var quantity = $('#showQuantity option:selected').val();
    //get the value of the number from the tPrice column in 'ticket' table
    var ticket = +$('#ticketPriceHidden').val();
    //get the venue value
    var venue = $('#venuePlaceHidden').val();
    //multiply them together
    var total = quantity * ticket;

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

and create the output in the calling function:

var data = quantityChange();

$('#summary').text('You have to pay ' + data.total + ' something');

This way, the actual output (how you want to present the data), is not hardcoded in the function which computes the values.

Upvotes: 1

Snuffleupagus
Snuffleupagus

Reputation: 6715

Make it a generic function that returns a value, instead.

function foo()
{
var a = 0;
var b = 1;
return a+b;
}

document.getElementById("bar").innerHTML = "Your returned amount is " + foo();

bar's innerHTML would read

Your returned amount is 1

Upvotes: 0

Related Questions