Show output not in an input

Question

I created a slider, which fulfills my needs. But I do not want to show the output value in an input.

Here is my Codepen: https://codepen.io/anon/pen/MOZGVx?editors=1010

$( document ).ready(function() {
function update() {            
     $optiona = $("#optiona").val();
     $optionb = $("#optionb").val();
     $totalsum = ($optiona * 0.75 * $optionb * 9) - ($optiona * $optionb);
     $("#totalsum").val($totalsum);
}
 
debugger;
 
$("#slider-optiona").slider({
    max:30,
    min:1,
    step:1,
    slide: function(event, ui) {  
    $(this).parent().find("#optiona").val(ui.value);
    $("#optiona").val(ui.value);
                update();
    },
    create: function(event, ui){
        $(this).slider('value',$(this).parent().find("#optiona").val());
    }
});
 
  
$("#slider-optionb").slider({
    max:100,
    min:1,
    step:1,
    slide: function(event, ui) {  
     $(this).parent().find("#optionb").val(ui.value);

     $("#optionb").val(ui.value);
                update();
       
    },
    create: function(event, ui){
        $(this).slider('value',$(this).parent().find("#optionb").val());
    }
});

update();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

Option A<div id="slider-optiona"></div>
Choice: <input type="text" id="optiona" value="12" disabled /><br /><br />
 
Option B<div id="slider-optionb"></div>
Choice: <input type="text" id="optionb" value="30" disabled/><br /><br /><br />

Sum
<input id="totalsum" type="text" disabled/><br />

What I want: I want the output to be not displayed in a input, but in a span or something like this.

I already tried it with

<span type="text" id="optionb"></span>

But it didn't worked :(

And the further question to the real experts: how can I show the totalsum in a complete currency value, e.g 145.50 instead of 145.5 at the moment.

Thank you so much guys!

Answer 1

As MenuItem42 stated, you just need to use jQuery's text() function instead of val() when you are working with div, span, etc. Also, do not specify type attribute for span because it does not support it.

$( document ).ready(function() {
function update() {            
     $optiona = $("#optiona").text();
     $optionb = $("#optionb").text();
     $totalsum = ($optiona * 0.75 * $optionb * 9) - ($optiona * $optionb);
     $("#totalsum").text($totalsum);
}
 
debugger;
 
$("#slider-optiona").slider({
    max:30,
    min:1,
    step:1,
    slide: function(event, ui) {  
    $(this).parent().find("#optiona").text(ui.value);
    $("#optiona").val(ui.value);
                update();
    },
    create: function(event, ui){
        $(this).slider('value',$(this).parent().find("#optiona").text());
    }
});
 
  
$("#slider-optionb").slider({
    max:100,
    min:1,
    step:1,
    slide: function(event, ui) {  
     $(this).parent().find("#optionb").text(ui.value);

     $("#optionb").val(ui.value);
                update();
       
    },
    create: function(event, ui){
        $(this).slider('value',$(this).parent().find("#optionb").text());
    }
});

update();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

Option A<div id="slider-optiona"></div>
Choice: <span id="optiona">12</span><br /><br />
 
Option B<div id="slider-optionb"></div>
Choice: <span id="optionb">30</span><br /><br />

Sum
<span id="totalsum"></span>