Если входное значение равно ID Div, тогда покажите его

Question

Я пытаюсь создать простую веб-страницу словаря, и мне нужно показать определенный DIV с переводом и описанием слова, которое вводится в INPUT.

Я создал для этого простой JavaScript, но я хочу использовать около 50 слов и не планирую создавать для этого 50 скриптов: D.

var match = 'cat', 
    input = document.getElementById('searchbox'), 
    div = document.getElementById('cat'); 
    input.onkeyup = function(e){ 
    if (this.value == match){ 
     div.style.display = 'block'; 
    } 
    else { 
     div.style.display = 'none'; 
    } 
}; 

Вместо этого я хочу использовать что-то другое. Моя цель - добиться чего-то подобного - если текст, введенный в INPUT, равен одному ID моего DIV, чем показывать его.

Например, если посетитель набрал «CAT» в INPUT, чем показывает DIV с идентификатором «CAT» и так далее. Один сценарий вместо 50.

Answer 1

Вы можете написать функцию JavaScript, как это и называют эту функцию нажатием кнопки.

<script type="text/javascript"> 
     function fSDiv(var txt,var EId) 
     { 
      if(document.getElementById(EId).value === txt) 
      { 
       document.getElementById(EId).style.display = "block"; 
      } 
     } 
</script> 

Answer 2

Вы можете проверить, существует ли элемент, используя ключевое слово typeof как это:

var input = document.getElementById('searchbox'); 
var div = document.getElementById(input.value); 
if(typeof(div) !=== 'undefined') { 
    div.style.display = 'block'; 
}