1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Add symbol to javascript output?

Discussion in 'Styling and Customization Questions' started by Dynamic, Nov 5, 2013.

  1. Dynamic

    Dynamic Well-Known Member

    Hi guys,

    I guess this is not really related to Xenforo but I am using it in my pages.

    I have made a simple calculator to estimate electricity bills. Now, there is a button that says "Calculate" and when it is clicked it displays the cost, eg ( 5.00 ) which is $5. What I am having trouble doing is getting the $ symbol in front of the number. Here is the code.

    <input type="button" name="calculate" id="area" size="4" onclick="calculateArea();" value="Calculate Daily Cost" class="checkout-btn">
    The onclick is what I would like to add the symbol to (in front of the calculateArea();)

  2. Jeremy

    Jeremy XenForo Moderator Staff Member

    Do you have access to the JavaScript?
  3. Dynamic

    Dynamic Well-Known Member

    Yeah :)

    Here it is.

    function calculateArea() {
      var primarylights =+document.getElementById("primarylights").value;
      var primarylightshours =+document.getElementById("primarylightshours").value;
      var secondarylights =+document.getElementById("secondarylights").value;
      var secondarylightshours =+document.getElementById("secondarylightshours").value;
      var powerheads =+document.getElementById("powerheads").value;
      var powerheadshours =+document.getElementById("powerheadshours").value;
      var primarypumps =+document.getElementById("primarypumps").value;
      var primarypumpshours =+document.getElementById("primarypumpshours").value;
      var secondarypumps =+document.getElementById("secondarypumps").value;
      var secondarypumpshours =+document.getElementById("secondarypumpshours").value;
      var returnpump =+document.getElementById("returnpump").value;
      var returnpumphours =+document.getElementById("returnpumphours").value;
      var heater =+document.getElementById("heater").value;
      var heaterhours =+document.getElementById("heaterhours").value;
      var chiller =+document.getElementById("chiller").value;
      var chillerhours =+document.getElementById("chillerhours").value;
      var misc =+document.getElementById("misc").value;
      var mischours =+document.getElementById("mischours").value;
      var cost =+document.getElementById("cost").value;
      var area = ((( primarylights * primarylightshours ) + ( secondarylights * secondarylightshours ) + ( powerheads * powerheadshours ) + ( primarypumps * primarypumpshours ) + ( secondarypumps * secondarypumpshours ) + ( returnpump * returnpumphours ) + ( heater * heaterhours ) + ( chiller * chillerhours ) + ( misc * mischours )) * cost)  / 1000;
      document.getElementById("area").value = area;
  4. Jeremy

    Jeremy XenForo Moderator Staff Member

    Set the element to be '$' + area.
  5. Dynamic

    Dynamic Well-Known Member

    Hey @Jeremy

    Thanks for that. It does not work ( I don't think I did it right ). I have

    document.getElementById("'$' + area").value = area;

    It does not display anything when the calculation is made.
  6. Jeremy

    Jeremy XenForo Moderator Staff Member

    document.getElementById("area").value = '$' + area;
    Dynamic likes this.
  7. Dynamic

    Dynamic Well-Known Member

    Thanks @Jeremy!

    It worked. Thanks very much :)

Share This Page