как найти элемент по id, используя input.value?

Question

Я пробовал этот код но он не работает:

jQuery(document).ready(function(){
var term = document.getElementById('input').value;
document.getElementById(term).style.display ='flex';
}

Error: cannot read property 'style' of null.

Я ввожу правильный id.

Answer 1

Логика строится в том, чтобы добавить класс .active к элементу, который мы нашли

const input = document.getElementById('input');
const elems = [...document.getElementsByClassName('elem')];
input.addEventListener('input', (e) => {
  const value = e.target.value; // value из input'a
  const newBlock = document.getElementById(value); // пытаемся получить элемент по value, который в input
  if (newBlock !== null) { // если мы получили элемент, то даём ему класс .active
    newBlock.classList.add('active');
  } else { // иначе проходимся циклом по elems и убираем у них класс .active
    elems.forEach((elem, i) => {
      elem.classList.remove('active');
    });
  }
});

#input {
  display: block;
}

.elem {
  background-color: red;
  width: 100px;
  height: 100px;
  margin-top: 10px;
  display: inline-block;
  color: white;
  font-size: 30px;
  opacity: 0.2;
  transition: opacity 0.2s linear;
}

.elem.active {
  opacity: 1;
}

<input id="input" type="text">
<div class="elem" id="elem1">elem1</div>
<div class="elem" id="elem2">elem2</div>
<div class="elem" id="elem3">elem3</div>

Answer 2

Раз в метках jquery, то вот моё решение задачи

$('#search').on('input', function(){ // При вводе текста..
  $('.block.-active').removeClass('-active'); // убираем класс .-active у .block.-active
  
  if($('.block[id="'+$(this).val()+'"]').length > 0) { // проверяем если такой блок с таким id, если есть..
    $('.block[id="'+$(this).val()+'"]') // берём блок у которого есть совпадение по id
      .addClass('-active'); // выдаём ему класс .-active
  }
});

.block {
  height: 30px;
  line-height: 30px;
  background: gray;
  opacity: .5;
  padding: 0 10px;
  box-sizing: border-box;
}

.block::before {
  content: attr(id);
  display: inline;
}

.block.-active {
  opacity: 1;
  background: green;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="search" type="text" value="">
<div class="block" id="one"></div>
<div class="block" id="good"></div>
<div class="block" id="sad"></div>
<div class="block" id="hover"></div>
<div class="block" id="click"></div>
<div class="block" id="lol"></div>

Answer 3

Твой код читает инпут.value только один раз когда dom загружен полностью и jquery подключился(+0.1 сек от загрузки дома, не заморачивайся)

Определись, jQuery ты используешь или нативный js (document.getElementById)

Вот твой код без ожидания загрузки dom

const term = $('input').val();
$(`#${term}`).css('display', 'flex');

Самый универсальный ожидатель загрузки дома, для меня:

window.onload=()=>{
    // code
};

А вообще рекомендую два экстета: этот(realtime) и вотэтот(page refresh)

БЛОГ НА HUSL

как найти элемент по id, используя input.value?

Ответы (3 шт):