Скрытие других элементов одним полем ввода - Javascript

Question

Пожалуйста, вы можете предоставить мне небольшую помощь с моим кодом Javascript. У меня есть одно поле ввода, скрывающий DIV элемент только если он является полностью пустым (без текста):

if (search_value !== "") { 
    document.getElementById("frei").className = "frei1"; 
    } 

Это именно то, что я хочу, главная проблема когда-то поле ввода активируется путем ввода внутрь и, когда я начните стирать текст до тех пор, пока вход не будет пустым, чем появится мой скрытый DIV, даже если вход не содержит текста (потому что я его удалил). Эта функция хороша только при загрузке первой страницы, чем когда я печатаю что-либо на входе и стираю ее, мой код javasript не является функциональным.

Пожалуйста, не могли бы вы дать мне совет, как выглядит код Javasript, который скрывает, что поле ввода DIV everytime не содержит текста? Даже когда текст был удален вручную?

Большое спасибо и извиниться за этот вопрос. Я не сильный в базовом Javascript.

Answer 1

Этот код будет выполняться только при загрузке страницы, но вы хотите, чтобы работать каждый раз, когда кто-то типы в ваш вход, чтобы сделать это, Вы можете использовать onkeyup событие:

document.getElementById("yourInput").onkeyup = function() { 
    if (this.value !== "") { 
     document.getElementById("frei").className = "frei1"; 
    } 
    else { 
     document.getElementById("frei").className = ""; 
    } 
}; 

DEMO

Если Вам также нужно запускать на странице загрузки Aswell однако, извлечь его в функцию, а затем вы можете вызвать функцию при загрузке страницы, а также:

function setDisplay() { 
    if (document.getElementById("yourInput").value !== "") { 
     document.getElementById("frei").className = "frei1"; 
    } 
    else { 
     document.getElementById("frei").className = ""; 
    } 
} 

Затем вызовите его на странице загрузки:

setDisplay();

Тогда и прикрепить его к onkeyup событию, как мы сделали в первую очередь:

document.getElementById("yourInput").onkeyup = setDisplay; 

Answer 2

document.getElementById("id").oninput = function() { 
    if (this.value !== "") { 
     document.getElementById("frei").className = "frei1"; 
    } 
} 

или

document.getElementById("id").addEventListener('input',function() { 
    if (this.value !== "") { 
     document.getElementById("frei").className = "frei1"; 
    } 
}, false);