项目定位不适用于Javascript

Question

我正在尝试制作一个打字游戏（按照教程），但我的代码与他们的代码不一样。当CSS中的位置是绝对时，当我调整窗口大小时，光标停留在正确的位置，但当我键入时，光标消失。当位置固定时，当我调整窗口大小时，它不会与文本正确对齐，但会在输入时按照我想要的方式移动。我尝试了很多组合和解决方案，但我不知道如何解决它。

/* CSS for cursor

#cursor{
    display: none;
    width: 2px;
    height: 1.6rem;
    position: absolute;
    top: 5%;
    left: 1%;
    background: #EE0000;
    animation: blink 1s infinite;
}

//javascript for moving cursor

const nextLetter = document.querySelector(selectors = '.letter.current');
    const cursor = document.getElementById(elementId = 'cursor');
    if (nextLetter) {
        cursor.style.top = nextLetter.getBoundingClientRect().top + 2 + 'px';
        cursor.style.left = nextLetter.getBoundingClientRect().left + 'px';
    }
})

使光标在调整大小时与文本元素保持对齐，并使用 JavaScript 移动光标代码

Answer 1

你在这里做作业

const nextLetter = document.querySelector(selectors = '.letter.current');
const cursor = document.getElementById(elementId = 'cursor');

但是

querySelector

和

getElementById

需要参数