Getting [object HTMLSpanElement] instead of a string

1k Views Asked by At

I am trying to display text in a popcornJS footnotes plugin on my main page by taking the text that was entered into a form on a bootstrap modal. I am getting [object HTMLSpanElement] where I am expecting the actual string to show up.

This is the script I am running:

        <script type="text/javascript">
        $('#save').on('click', function() {
  var value = $('#value').text( $('#newGoal').val() );
});
    </script>

This is my modal (the text displays correctly using the span in line 2):

    <a class="btn btn-primary" data-toggle="modal" data-target="#moneyModal">
    <p>Your Number: <span id="value"></span></p>
  <span class="glyphicon glyphicon-money glyphicon-white"></span>Change</a>
<div class="modal fade" id="moneyModal" role="dialog">
  <div class="modal-dialog">
    <form method="post" action="change-goal">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Change Goal</h4>
        </div>
        <div class="modal-body">
          <p>Please enter a new number.</p>
        </div>
        <div class="modal-body">
          <input class="form-control" name="newGoal" id="newGoal">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button id="save" type="button" class="btn btn-primary" data-dismiss="modal">Save</button>
        </div>
      </div>
    </form>
  </div>
</div>

This is the popcornJS footnote plugin script (putting any normal strings work like the second footnote):

    <script>
  document.addEventListener('DOMContentLoaded', function () {
  var p = Popcorn( "#video1" )


  .footnote({
    start: 0,
    end: 5,
    text: value,
    target: "footnotediv"
  })
  .footnote({
    start: 1,
    end: 45,
    text: "test",
    target: "footnotediv"
  });
}, false);

It seems like there is some painfully simple thing I messed up, or this popcornJS plugin was not built to take anything except a string literal.

Here's a screenshot of what is happening. Notice the top left 'Your Number: 5', the '5' is text from the form and what should be displayed in the [object HTML...]

0

There are 0 best solutions below