want to display the jquery function result to the bootstrap model-body

Question

I want to display the jquery function result to the bootstrap model-body.

jquery function

 function randomNumberRange(min, max)
{
    var x= Math.floor(Math.random() * (max - min + 1) + min);
    console.log(x);

    return Math.floor(Math.random() * (max - min + 1) + min);
}

in .html file model body is

<div class="modal-body">

          </div>

I want the value of x should get display in model body in html.

there is one submit button to launch model

<button onclick="location.href = '/poll/result/';" id="myButton" class="float-left submit-button" >submit</button>
</div>

so once i click on the submit it should display the value of x in model body. Please help me out.

Answer 1

HTML:

<button id="myButton">submit</button>
  <div id="modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-body">

      </div>
    </div>
  </div>
</div>

JS:

function randomNumberRange(min, max)
{
    var x= Math.floor(Math.random() * (max - min + 1) + min);
    console.log(x);

    return Math.floor(Math.random() * (max - min + 1) + min);
}

$(document).ready(function() {
  $('#modal').modal({show:false});

  $('#myButton').click(function(e) {
    $('.modal-body').text(randomNumberRange(1,2));
    $('#modal').modal('show'); 
  });

})

EXAMPLE