Javascript関数の値を別の場所に表示する

Question

私は、ユーザーが（ドロップダウンリストから）選択したチケットの数を計算し、チケットの価格で乗算する関数を持っています（このチケットの価格はmy SQLデータベース）。

機能自体は正常に動作します：

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; 
} 

ユーザーは、この関数から計算された合計を見て、その後、彼らは非表示になります「続ける」ボタンを押すと、この関数は、「チケット」と呼ばれるのdivで呼び出されますこのdivと 'delivery'という新しいdivが表示され、結果は破棄されません。 私は、関数 'quantityChange（selElem）'の結果を 'summary'というまったく新しいdivに入れたいと思っています。これを行う方法はありますか？

ご協力いただきありがとうございます。

Answer 1

代わりに値を返す汎用関数にします。あなたが呼び出す

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); 
} 

：バーのinnerHTMLのは

Your returned amount is 1 

Answer 2

一つのオプションを読んでいました

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

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

は、テキストは、関数のパラメータとして表示されたい要素のIDを渡すことです次のとおりです。

quantityChange('summary'); 

hieveより柔軟、あなたはすべての計算値を返すことができます（あなたがデータを提示する方法、この方法で実際の出力を

var data = quantityChange(); 

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

：

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 
    }; 
} 

と呼び出し機能で出力を作成します）、値を計算する関数にハードコードされていません。

Answer 3

これらの行が役立ちます。

最初の行はdivを作成します。

2行目は、関数の結果をそのdivに挿入します。

3行目は、id "xxx"を与えた要素のdivをハングアップします。

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