How to create go to line and find text activity on textarea

I am trying to add go to line and find text functionalities on an editor that employs textarea and a numbering div.

I have tried the following code but it is not scrolling the editor to focus on the line or text entered by the user in the prompt;

Please help me on how to implement the go to line and find text functions on the editor.

const ta = document.querySelector('textarea')

function updateRowNumbering() {
  const num = ta.value.split("n").length;
  const numbers = ta.parentNode.querySelector(".numbers");
  numbers.innerHTML = Array(num).fill("<span></span>").join("");

ta.value = `One
Kumi na Mbili

//Trying to implement go to line and find text;
const numbers = ta.parentNode.querySelector('.numbers');
const gotoLinePrompt = document.querySelector('.goto-line-prompt');
const findPrompt = document.querySelector('.find-prompt');

// Hide the prompts by default. = 'none'; = 'none';

// Add event listeners to the "Go to Line" and "Find" buttons.
document.querySelector('.goto-line-button').addEventListener('click', function() { = 'block';

document.querySelector('.find-button').addEventListener('click', function() { = 'block';

// Add event listeners to the "OK" buttons in the prompts.
gotoLinePrompt.querySelector('.ok-button').addEventListener('click', function() {
  const lineNumber = gotoLinePrompt.querySelector('input').value;
  if (lineNumber !== null) {
    const lineHeight = ta.scrollHeight / ta.clientHeight;
    ta.scrollTop = (lineNumber - 1) * lineHeight;
    numbers.scrollTop = ta.scrollTop;
  } = 'none';

findPrompt.querySelector('.ok-button').addEventListener('click', function() {
  const searchTerm = findPrompt.querySelector('input').value;
  if (searchTerm !== null) {
    const text = ta.textContent;
    const index = text.indexOf(searchTerm);
    if (index !== -1) {
      const lineNumber = Math.floor(index / ta.value.split('n')[0].length) + 1;
      ta.scrollTop = (lineNumber - 1) * lineHeight;
      numbers.scrollTop = ta.scrollTop;
  } = 'none';
body, textarea {
  font-family: Consolas, "Courier New", Courier, monospace;

.editor {
  display: inline-grid;
  grid-template-columns: 3em auto;
  gap: 10px;
  line-height: 21px;
  background: rgb(40 42 58);
  border-radius: 2px;
  overflow-y: auto;
  max-height: 250px;

.editor>* {
  padding-top: 10px;
  padding-bottom: 10px;

.numbers {
  text-align: right;
  background: #333;
  padding-right: 5px;

.numbers span {
  counter-increment: linenumber;

.numbers span::before {
  content: counter(linenumber);
  display: block;
  color: #888;

textarea {
  line-height: 21px;
  border: 0;
  background: transparent;
  color: #fff;
  min-width: 500px;
  outline: none;
  resize: none;
  padding-right: 10px;
<div class="actions">
<div class="goto-line-prompt" style="display: none;">
  <h1>Go to Line</h1>
  <input type="number" placeholder="Enter the line number to go to:" />
  <button type="button" class="ok-button">OK</button>
<div class="find-prompt" style="display: none;">
  <input type="text" placeholder="Enter the text to find:" />
  <button type="button" class="ok-button">OK</button>
<button class="goto-line-button">Go to Line</button>
<button class="find-button">Find</button>
<div class="editor">
 <div class="numbers">
 <textarea wrap="off" onkeyup="updateRowNumbering()"></textarea>