Javascript 如何通过更改面板名称来更新div内容

当我编辑面板名称时，我想更新div内容，它将具有选项卡窗格名称。 我试图获取值并将其更改为“onchange”，但是 我想我做错了什么。

var$foo=$（“.tab窗格”）；
var$newPanelDefault=$foo.clone（）；
var散列=1；
$（“.add”）。在（“单击”，函数（）{
var$newPanel=$newPanelDefault.clone（）；
var hashClass='zone panel-'+generateHash（）；
$newPanel.find（“.panel”）.data（'hash'，hashClass）.attr（'href'，“#”+（++hash））.text（“Zone”+hash）；
$newPanel.attr（“id”，“tab”+hashClass）；
var nextTab=$（'.tabs li'）.size（）+1；
$（“
）.appendTo（“.tabs”）；
$（$newPanel）.appendTo（'.tab内容'）；
$（“.pencil”）。单击（函数（）{
$（“.nav tabs li.active”）.attr（'contenteditab'，$（.nav tabs li.active”）.attr（'contenteditabs'）==='true'？'false'：'true'）；
});
});
var panelDefault=document.querySelectorAll（'.panel default'）；
var exTabFirst=document.querySelectorAll（'.exTabFirst'）；
var extabsond=document.queryselectoral（'.extabsond'）；
var addZoneButton=document.getElementById（'add'）；
函数generateHash（）{
返回Math.random（）.toString（16.substr（-5）；
}
addZoneButton.addEventListener（'click'，函数（）{
var randomNumber=generateHash（）；
panelDefault.innerHTML='panel-panel-default-foo-template'+randomNumber；
exTabFirst.innerHTML='exTabFirst'+随机数；
exTabSecond.innerHTML='exTabSecond'+随机数；
});
$（“.pencil”）。单击（函数（）{
$（“.nav tabs li.active”）.attr（'contenteditab'，$（.nav tabs li.active”）.attr（'contenteditabs'）==='true'？'false'：'true'）；
});

---

你能帮我吗

我在代码中看不到任何事件处理程序，只有大量的点击处理程序。还可以考虑用“@ BalbsAn”替换“<代码> Att/<代码>调用，但我仍然不能解决这个问题。

var $foo = $(".tab-pane");
var $newPanelDefault = $foo.clone();
var hash = 1;
$(".add").on("click", function() {
    var $newPanel = $newPanelDefault.clone();
    var hashClass = 'zone-panel-' + generateHash();
    $newPanel.find(".panel").data('hash', hashClass).attr("href",  "#" + (++hash)).text("Zone " + hash);
    $newPanel.attr("id", "tab" + hashClass);

    var nextTab = $('.tabs li').size()+1;
    $('<li class="' + hashClass + '"><a href="#tab' + hashClass + '" data-toggle="tab">Zone  ' + hash + ' <i class="fas fa-pencil-alt pencil"></i></a></li>').appendTo('.tabs');
    $($newPanel).appendTo('.tab-content');



   $(".pencil").click(function() {
        $(".nav-tabs li.active").attr('contenteditable',$(".nav-tabs li.active").attr('contenteditable')==='true'?'false':'true' );
     });

});


var panelDefault = document.querySelectorAll('.panel-default');
var exTabFirst = document.querySelectorAll('.exTabFirst');
var exTabSecond = document.querySelectorAll('.exTabSecond');
var addZoneButton = document.getElementById('add');


function generateHash() {
    return Math.random().toString(16).substr(-5);
}

addZoneButton.addEventListener('click', function () {
    var randomNumber = generateHash();
    panelDefault.innerHTML = 'panel panel-default foo template ' + randomNumber;
    exTabFirst.innerHTML = 'exTabFirst ' + randomNumber;
    exTabSecond.innerHTML = 'exTabSecond ' + randomNumber;
});

 $(".pencil").click(function() {
         $(".nav-tabs li.active").attr('contenteditable',$(".nav-tabs li.active").attr('contenteditable')==='true'?'false':'true' );
     });