how to make div act as a input

Question

I set up a check boxes that will display a progress bar and show its current progress by its percentage. how do I make the div tag act as an input to save the value into the database

I tried using it on the div and it display the percentage but when I tried it using an input it fails to show the percentage

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="progressbar-container">
  <div class="progressbar-bar"></div>
  <div class="progressbar-label"></div>
  <input type="" name="" id="percentage">

$(document).ready(function() {
  // get box count
  var count = 0;
  var checked = 0;

  function countBoxes() {
    count = $("input[type='checkbox']").length;
    console.log(count);
  }

  countBoxes();
  $(":checkbox").click(countBoxes);

  // count checks

  function countChecked() {
    checked = $("input:checked").length;

    var percentage = parseInt(((checked / count) * 100), 10);
    $(".progressbar-bar").progressbar({
      value: percentage
    });
    $(".progressbar-label").text(percentage + "%");
    $('#percentage').text(percentage + "%")
  }

  countChecked();
  $(":checkbox").click(countChecked);

Answer 1

您可以使用contenteditable属性，然后通过innerHTML获取值。