为何EventListener无法更新按钮？选中字符计数功能异常求助

• 我想实现一个显示选中（高亮）字符数量的功能，但该功能无法正常工作。具体来说，代码行document.getElementById('selectedCountBtn').textContent = "B" + selectedText.length;似乎从未生效。
• 最初存在点击按钮会取消文本选中状态、导致计数始终为0的问题，我本以为已经解决了该问题。
• 我注意到selectedCharCount变量从未被使用，它可能是之前功能实现版本的遗留代码。我不太擅长HTML，不确定问题所在。
• 补充疑问：是不是updateSelectedCharCount函数从未被调用？

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Text Field</title>
<style>
  body, html {
    margin: 0;
    height: 100%;
    font-family: Arial, sans-serif;
  }
  #container {
    display: flex;
    height: 100vh; /* Ensure the container fills the entire height of the viewport */
    padding: 10px;
    box-sizing: border-box;
  }
  textarea {
    flex: 1;
    resize: none; /* Disables resizing to ensure it's always 100% height */
    margin-right: 10px;
    box-sizing: border-box;
  }
  #sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes #bottomContainer to the bottom */
    height: calc(100% - 20px); /* Account for padding */
  }
  #bottomContainer {
    <!--position: fixed; /* Fixed positioning relative to the viewport */
    bottom: 10px;    /* Distance from the bottom of the viewport */
    right: 10px;     /* Distance from the right of the viewport */
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Aligns the children (buttons, input) to the right */-->
  }
  #counters {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #charCounter, #wordCounter, .button {
    width: 60px; /* Width adjusted to make all elements similar */
    padding: 5px;
    margin-bottom: 5px; /* Space between elements */
    cursor: pointer;
    text-align: center;
    border: 1px solid #ddd;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  }
  #filename {
    width: 60px;
    margin-top: 20px; /* Ensures space above the filename input regardless of wordCounter margin */
  }
  .button, #filename {
    margin-bottom: 5px; /* Adds space between input field and buttons */
  }
  #wordCounter {
    margin-bottom: 20px; /* Adds extra space below the wordCounter element and above filename */
  }
}
</style>
<script>
let charCountingEnabled = true;
let wordCountingEnabled = true;
var selectedCharCount = 0; // Variable to keep track of the selected character count

function updateCounters() {
  var textarea = document.getElementById('textArea');
  let text = textarea.value.trim();
  
  if (charCountingEnabled) {
    document.getElementById('charCounter').textContent = text.length;
  }
  
  if (wordCountingEnabled) {
    let words = text.length > 0 ? text.split(/\s+/) : [];
    document.getElementById('wordCounter').textContent = words.length;
  }
}

function toggleCharCounter() {
  charCountingEnabled = !charCountingEnabled;
  updateCounters();
}

function toggleWordCounter() {
  wordCountingEnabled = !wordCountingEnabled;
  updateCounters();
}

// Save text to file
function saveToFile() {
  var text = document.getElementById('textArea').value;
  var filename = document.getElementById('filename').value;
  if (!filename) {
    filename = 'snippet';
  }
  filename += '.txt'; // Append .txt to the filename
  var blob = new Blob([text], {type: 'text/plain'});

  // Create an anchor element and trigger a download
  var downloadLink = document.createElement("a");
  downloadLink.href = URL.createObjectURL(blob);
  downloadLink.download = filename;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}

function updateSelectedCharCount() {
  var selectedText = '';
  if (window.getSelection) {
    selectedText = window.getSelection().toString();
  } else if (document.selection && document.selection.type != "Control") {
    selectedText = document.selection.createRange().text;
  }
  // Update the button directly here
  document.getElementById('selectedCountBtn').textContent = "B" + selectedText.length;
}

document.addEventListener('selectionchange', function() {
  console.log("Selection changed.");
  var selectedText = '';
  if (window.getSelection) {
    selectedText = window.getSelection().toString();
  }
  var selectedCountBtn = document.getElementById('selectedCountBtn');
  selectedCountBtn.textContent = "A" + selectedText.length;
});

</script>
</head>
<body>
<div id="container">
  <textarea id="textArea" oninput="updateCounters();"></textarea>
  <div id="sidebar">
    <div id="counters">
      <div id="charCounter" onclick="toggleCharCounter()">0</div>
      <div id="wordCounter" onclick="toggleWordCounter()">0</div>
      <div class="button" id="selectedCountBtn">Selected</div>
    </div>
    <div id="bottomContainer">
      <input type="text" id="filename" class="button" placeholder="" />
      <div class="button" onclick="saveToFile()">Save</div>
    </div>
  </div>
</div>
</body>
</html>

恳请各位提供思路与建议，哪怕是微小的提示也十分感谢。

内容的提问来源于stack exchange，提问作者JohnBig