我想将修补匠的更新值绑定到html元素上。我正在使用 PUSHER 在laravel中执行此操作。但是我不能这样做。

这是我的代码

$(document).ready(function(){
 $.ajaxSetup({
     headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

   $.get('/api/progress',function(response,status){
       console.log(response);
       var data = response.data;
       var progress = [];
       //knob code
        $(function($) {

            $(".knob").knob({
                 draw : function () {

                    // "tron" case
                    if(this.$.data('skin') == 'tron') {

                        this.cursorExt = 0.3;

                        var a = this.arc(this.cv)  // Arc,pa                   // Previous arc,r = 1;

                        this.g.lineWidth = this.lineWidth;

                        if (this.o.displayPrevious) {
                            pa = this.arc(this.v);
                            this.g.beginPath();
                            this.g.strokeStyle = this.pColor;
                            this.g.arc(this.xy,this.xy,this.radius - this.lineWidth,pa.s,pa.e,pa.d);
                            this.g.stroke();
                        }

                        this.g.beginPath();
                        this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
                        this.g.arc(this.xy,a.s,a.e,a.d);
                        this.g.stroke();

                        this.g.lineWidth = 2;
                        this.g.beginPath();
                        this.g.strokeStyle = this.o.fgColor;
                        this.g.arc( this.xy,this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3,2 * Math.PI,false);
                        this.g.stroke();

                        return false;
                    }
                }
            });
            });

       var target = document.getElementById("appContent");
            data.forEach((element) => {
              var container = document.createElement('div');
                  container.setattribute("class","row");
              var column = document.createElement('div');
                  column.setattribute("class","col-md-4");
              var myName = document.createElement('div');
                  myName.innerHTML = 'Progress_ID: ' + element.id;
              /*var myValue = document.createElement('div');
                  myValue.innerHTML = 'Progress_Value:' +element.value;
                  myValue.dataset.goal = element.goal;
                  myValue.id = element.id;*/
                var myValue = document.createElement('input');
                    myValue.setattribute("class","knob");
                    myValue.setattribute("data-readOnly","true");
                    myValue.setattribute("data-max",element.goal);
                    myValue.setattribute("data-angleoffset","-125");
                    myValue.setattribute("data-anglearc","250");
                    myValue.setattribute("data-fgcolor","#0099ff");
                    myValue.setattribute("value",element.value);
                    myValue.dataset.goal = element.goal;
                    myValue.id = element.id;

              container.appendChild(column);
              container.appendChild(myName);
              container.appendChild(myValue);
              target.appendChild(container);

     });
})

   // Pusher
    var pusher = new Pusher('API_KEY',{
        cluster: 'ap3',encrypted: true
      });
   // Subscribe to the channel we specified in our Laravel Event
      var channel = pusher.subscribe('progress');
   // Binding a function to a Event
     channel.bind('App\\Events\\UpdatedValue',function(data){
     console.log(data);
     setTimeout(() =>{
       var someUpdate = document.getElementById(data.id);
       someUpdate.innerHTML ='Progress_Value:'+ data.value ; '/' + someUpdate.dataset.goal;  // get goal from div
},5000);
 });
});

html ：

<div id ="appContent"></div>

当我通过 tinker 触发事件时。

$record = Progress::find(4);
$record->value = $record->value + 20
$record->save();

该值应附加到具有 ID：4 的输入中。但是我不能这样做。有人可以帮我解决这个问题吗。 非常感谢。