为什么onkeyup和keyup都不起作用？

Question

我想在输入字段的<a>文本上显示用户正在输入的内容。我已经在javascript中尝试过.onkeyup和addEventListener，但它们都不能工作，尽管它可以检测到目标输入对象，但是当它出现在.onkeyup和addEventListener中时，它什么也不做。

这是我想要做的：

[当用户在输入字段名字中输入内容时，它应显示在<a>超链接文本中（即使应使用退格键）]

这是我的视图/刀片模板中的代码段：

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#guestInfo0">User Information</a></li>
    @for($guest_no = 1; $guest_no<=$guest_quantity; $guest_no++)
        <li>
            <a data-toggle="tab" 
                href="#guestInfo{{$guest_no}}" 
                id = "linkText">Guest #{{$guest_no}} //Target ID = linkText (this is where the changes will be applied)
            </a>
        </li>
    @endfor
</ul>
.......
<input id="passenger_f_name" type="text" 
class="form-control @error('passenger_f_name') is-invalid @enderror" 
placeholder = "First Name for Passenger #{{$tab}}" name="passenger_f_name"
value="{{ old('passenger_f_name') }}" required autocomplete="passenger_f_name" 
autofocus>
.......
<script type="application/javascript">

    var linkBox = document.getElementById('passenger_f_name');

    linkBox.onkeyup = function(){
        //alert("LOL"); //Used for checking if onkeyup is working properly = result: false
        document.getElementById('linkText').innerHTML = linkBox.value;
    }

</script>

[我不知道为什么它不起作用，但是我怀疑[DOM]在控制台日志中的警告（已在此处张贴截图而不是复制和粘贴在这里，因为它在Google Chrome控制台中没有复制警告消息的选项）：

它具有三个输入，因为每个选项卡上都有一个表单，并且每个表单上的输入具有相同的名称和ID（取决于for循环生成多少个表单的条件）。

P.S。我正在使用：

• Google Chrome版本79.0.3945.130（正式版本）（64位）
• JQuery 3.4.1＆Bootstrap 3.4.1
• Laravel 6.0

Answer 1

您需要唯一的ID