callstack - innerHTML を使用した後、ドラッグ可能な要素が動かない

Question

ドラッグ可能な円を作成し、javascript を使用して div タグを生成しましたが、その後円はドラッグされず、エラーは次のとおりです。

私のジャバスクリプト：

var player = document.getElementById('player')
var players = document.getElementById('player').style

players.top = "85%"
players.left = "50%"

var playerx = parseInt(document.getElementById('player').style.left)
var playery = parseInt(document.getElementById('player').style.top)
var playerxs = document.getElementById('player').style.left
var playerys = document.getElementById('player').style.top
var body = document.getElementById('body')
var bodyx = body.getBoundingClientRect().width
var bodyy = body.getBoundingClientRect().height

//var cursorx = event.clientX;
//var cursory = event.clientX;

player.onmousedown = whiledrag;

function whiledrag() {
document.onmouseup = stopplayerdrag
document.onmousemove = playerdrag
}

function playerdrag() {
var cursorx = event.clientX
var cursory = event.clientY
players.left = cursorx + "px";
players.top = cursory + "px";
}

function stopplayerdrag() {
document.onmouseup = null
document.onmousemove = null
}

player.addEventListener('touchmove', function(e) {
var touchLocation = e.targetTouches[0]
var touchx = touchLocation.pageX;
var touchy = touchLocation.pageY;
players.left = touchx + "px"
players.top = touchy + "px"
})

document.getElementById('body').innerHTML += '<div class="trash"></div>';
document.getElementsByClassName('trash')[0].style.left = 2 + "px";