Почему не работает ни onkeyup, ни keyup?

Question

Я хочу отобразить, что пользователь печатает на тексте <a> из поля ввода. Я уже пробовал .onkeyup и addEventListener в javascript, но они оба не работают, хотя он может обнаружить целевой объект ввода, но когда он входит в .onkeyup и addEventListener, он ничего не делает.

Вот что я пытаюсь сделать:

Пока пользователь печатает в поле ввода Имя он должен отображаться в <a> тексте гиперссылки (даже должен быть применен ход нажатия клавиши «Backspace»)

Вот мой код фрагмента в моем шаблоне вида / блейда:

<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>

I не знаю, почему это не работает Но я подозреваю, что предупреждение [DOM] в журнале консоли (здесь выложен скриншот вместо копирования и вставки, потому что в google chrome console нет параметров для копирования предупреждающего сообщения):

Имеет три входа, потому что каждая вкладка имеет форму и вход с одинаковыми именами и идентификаторами (зависит от для l oop ' s условие о том, сколько форм будет создано).

PS Я использую:

• Google Chrome Версия 79.0.3945.130 (Официальная сборка) (64-разрядная версия)
• JQuery 3.4.1 & Bootstrap 3.4.1
• Laravel 6.0

Answer 1

Вам нужны уникальные идентификаторы

Вот как это сделать, если есть ОДНО поле ввода и 3 гостя

$("#passenger_f_name").on("input",function() {
  $("li.active .linkText").text(this.value)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li><a data-toggle="tab" href="#guestInfo0">User Information</a></li>
  <li>
    <a data-toggle="tab" href="#guestInfo{{$guest_no}}" class="linkText">Guest #1</a>
  </li>
  <li><a data-toggle="tab" href="#guestInfo0">User Information</a></li>
  <li>
    <a data-toggle="tab" href="#guestInfo{{$guest_no}}" class="linkText">Guest #2</a>
  </li>
  <li><a data-toggle="tab" href="#guestInfo0">User Information</a></li>
  <li class="active">
    <a data-toggle="tab" href="#guestInfo{{$guest_no}}" class="linkText">Guest #3</a>
  </li>
</ul>
<input id="passenger_f_name" type="text" class="form-control" placeholder="First Name for Passenger #{{$tab}}" name="passenger_f_name" value="" required autocomplete="passenger_f_name" autofocus>