InnerHTML solution needed - Should be easy to answer - 【StackMirror】|javascript|variables|innerhtml

I am new to JavaScript so please be understanding of my situation.

I have created a simple HTML form which includes a drop down menu (to select quantity of item) and a submit button (to add to a cart).

Once submitted the results of the form are displayed in a table on the webpage.

So far with my code I can display the results of the form options.

However, I need to replace the quantity with the variable result for "qtytoy1".

Here is my code.

function addToy1New()
{
var i = document.getElementById("qty_toy1");
var qtytoy1 = i.options[i.selectedIndex].text;
var htmlTagString="<table width=\"100%\" border=\"0\">"
                    +"  <tr>"
                    +"    <td>Optimus Prime</td>"
                    +"    <td> x 1</td>"
                    +"    <td>$26.99</td>"
                    +"  </tr>"

                    +"  <tr>"
                    +"    <td></td>"
                    +"    <td>Total:</td>"
                    +"    <td>$26.99</td>"
                    +"  </tr>"
                    +"</table>";

document.getElementById("toy1_add").innerHTML=htmlTagString;
document.getElementById("toy1_test").innerHTML=qtytoy1;
}

How can I replace "$26.99" with my variable "qtytoy1"?

I am pretty sure there are better ways around this method. Please share if you think so but make sure it is understandable for a novice such as myself. :)

2012-04-04 23:35
by Sean Zulu

I recommend using jQuery. It makes life a lot easier. http://jquery.com - d_inevitable 2012-04-04 23:38

Please post your html, otherwise its impossible to answer without making assumptions - d_inevitable 2012-04-04 23:40

document.createElement & document.appendChild - Jeffrey Sweeney 2012-04-04 23:43

Are you really asking how to insert a variable where it currently says "$25.99"? @d_inevitable jQuery won't help with the OP's question, will it - Juan Mendes 2012-04-04 23:46

@JuanMendes the op has asked for "better ways round it". So I've added a recommendation. In a comment, not an answer. Also when does jQuery ever solve a problem that can't be solved without it? Quite impossible, isn't it - d_inevitable 2012-04-05 00:01

@d_inevitable: What I mean is, how would you use jQuery to solve the OP's problem with string concatenation? Maybe if you mentioned jQuery.template, http://api.jquery.com/jQuery.template - Juan Mendes 2012-04-05 00:25

@JuanMendes it was quite clear to me that he wanted to edit the variable htmlTagString, there was also the possibility that #toy1_add already had that kind of html and need only that one td replaced, in that case jQuery would be quite handy. But, yes jQuery template is also a good point - d_inevitable 2012-04-05 00:29

var htmlTagString="<table width=\"100%\" border=\"0\">"
                    +"  <tr>"
                    +"    <td>Optimus Prime</td>"
                    +"    <td> x 1</td>"
                    +"    <td>" + qtytoy1 + "</td>"
                    +"  </tr>"

                    +"  <tr>"
                    +"    <td></td>"
                    +"    <td>Total:</td>"
                    +"    <td>" + qtytoy1 + "</td>"
                    +"  </tr>"
                    +"</table>";

2012-04-04 23:42
by Marat Tanalin

Thanks buddy. Worked this out before you posted but appreciate the help - Sean Zulu 2012-04-05 00:20

You should be able to use the replace method on your string:

htmlTagString = htmlTagString.replace("$26.99", qtytoy1);

Then go on from there.

2012-04-04 23:41
by uotonyh

I dont think this answer deserves a downvote. The question is vague so people can only assume on what is meant by it. +1up to counter the downvote - d_inevitable 2012-04-05 00:03

Agree, from the OP's perceived level of JS expertise, this answer does what was asked. It is just really inelegant - Juan Mendes 2012-04-05 00:23