document.getElementById - проблема с изменением информации внутри div

Question

Я застрял на вопрос начинающего HTML. Я работаю с этим HTML с таблицами данных:

<div id="wb-tables-id-0_filter" class="dataTables_filter">
<label>
Filter items
<input class="" type="search" placeholder="" aria-controls="wb-tables-id-0">
</label>
</div>

Это создает текстовое поле, в которое пользователь может вводить данные, что фильтрует таблицу данных ниже. Однако мне нужны данные, введенные в поле в другой области страницы, чтобы перезаписать любые данные, которые могут быть в этом поле.

Я застрял, пытаясь заставить этот код работать:

<script>
    function overwriteText(text){
    document.getElementById(wb-tables-id-0_filter).value = text;
    }
</script>
<div id="overwrite">
Write to change:<input id="slide" type="text" value=""
onchange="overwriteText(this.value);" />
</div>

Я понимаю, что, если бы я мог добавить идентификатор к первому набору кода для поля ввода, это сделало бы процесс простым, но, к сожалению, я не могу редактировать эту часть кода. Все ответы, которые я исследовал, казались вариантами этого.

Есть ли способ изменить строку document.getElementById так, чтобы она перезаписывала только то, что находится внутри текстового поля, созданного первым набором HTML, и заменяла его тем, что введено в поле, созданное вторым набором?

Answer 1

document.getElementById() Функция принимает строковое значение, поэтому вам нужно заключать в кавычки идентификатор.

  document.getElementById("wb-tables-id-0_filter")

Редактировать:

Я не смотрел на тип элемента, который вы использовали. В вашем примере id настроен против DIV а не INPUT, Это вход, который имеет свойство.value. Как вы утверждаете в комментарии, это DIV это имеет .innerHTML,

Совет: я бы также переименовал идентификатор, чтобы он не включал тире. Они не делают допустимые переменные скрипта.