Использование Javascript для изменения видимости html

Я просмотрел много разных вопросов и ответов, пытаясь найти ответ, который я мог бы изменить, чтобы работать над тем, что я пытаюсь сделать. У меня есть форма, которая будет использоваться для разных «единиц» внутри компании, которые имеют разные требования к одной и той же форме. Я пытаюсь использовать JS (без использования jQuery), чтобы изменить видимость нескольких строк таблицы, в зависимости от того, какой номер «единицы» выбран.

Раздел windows выбора:

 *Store Number:   Select Store Number 010576 011169 008181 010324 008615 009150 014640 010684 011168 014215 008179 008339 008668 031574    

Строки таблицы, которые должны быть скрыты для некоторых «единиц»:

  *Refrigeration Unit #1:     *Refrigeration Unit #2:     *Refrigeration Unit #3:    

Функция JavaScript Я пробовал:

 function salad() { var storenumber = document.getElementById("storenumber"); switch(storenumber.value) { case "010576": document.getElementById("frig1").style.value = "visible"; break; case "011169": break; case "008181": document.getElementById("frig1").style.value = "visible"; break; case "010324": case "008615": case "009150": break; } } 

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

Вы вызываете неправильный метод.

Просто попробуй…

 document.getElementById("frig1").style.visibility = 'visible' 

Это синтаксис свойства visibility :

 visibility: visible|hidden|collapse|initial|inherit; 

эти работы?

document.getElementById("frig1").style.display = 'none'

а также

document.getElementById("frig1").style.display = 'block'

Вам нужно указать document.getElementById(...).style.visibility и переключить hidden и visible значения. Вы можете использовать display: block и display: none поскольку они полностью удалят строку из представления, в то время как видимость скроет ее, сохраняя при этом пространство на странице.

Можете ли вы попробовать использовать document.getElementById (“frig1”). Style.visibility = “hidden”; – скрыть элемент

и document.getElementById (“frig1”). style.visibility = “visible”; – сделать элемент видимым

Надеюсь, это будет полезно

 document.getElementById('domElementId').style.visibility = "visible" ; document.getElementById('domElementId').style.visibility = "hidden" ; 

Стиль Inline имеет наивысший приоритет, который может создать проблему в каком-либо другом случае. Возможно, мы можем иметь class и добавить его с помощью js

CSS

 .showMenu{ visibility:visible; } .hideMenu{ visibility:hidden; } 

Изменения в JS

 document.getElementById('domElementId').classList.add("showMenu"); document.getElementById('domElementId').classList.remove("hideMenu"); 

См. http://jsfiddle.net/hLyvhd91/1/

 var element_to_hide = document.getElementById("row2"); element_to_hide.style.visibility = 'hidden'; //element_to_hide.style.display = 'none'; console.log(element_to_hide.style.visibility);