Javascript эквивалент Jquery hide and show

У меня есть простой код скрыть и показать JQuery, и я хочу спросить, есть ли эквивалент этого javascript? Вот мой код.

Jquery:

$(document).ready(function(){
$("#myButton").hide();
   $("#1").click(function(){
      $("#myButton").show();
         $("#myButton").click(function(){
         $("#myButton").hide();
        });
   });
});

HTML:

<select>
<option id="1">Science</option>
</select>
<input type="button" value="Click" id="myButton"/>

Я следил за некоторыми кодами в комментариях ниже, но он не работает:

JavaScript:

<script>
    document.getElementById('myButton').style.display = 'none';
    function selectOptionsupdated(select){
    document.getElementById('myButton').style.display = 'block'; 
    }
</script>

HTML:

<select onSelect="selectOptionsupdated(this)">
<option id="1">Science</option>
</select>
<input type="button" value="Click" id="myButton"/>

Сначала я хочу, чтобы кнопка была скрыта, и когда я нажимаю <option> "Наука", появляется кнопка, и когда я нажимаю кнопку, кнопка скрывается после ее нажатия. А что, если есть больше тегов <option>? Извините, я все еще новичок. Любая помощь будет оценена.

Ответы

document.getElementById('myElement').style.display = 'block'; // show
document.getElementById('myElement').style.display = 'none'; // hide

function selectOptionsupdated(select){
//do your stuff here  
}

var myButton = document.getElementById('myButton');

//hide
myButton.style.display = 'none';

//show
myButton.style.display = 'block';

<select id="list">
<option id="1">Science</option>
</select>

var list = document.getElementById('select');

list.addEventListener('change', listSelect, false);

function listSelect(){    
    var selected = list.options[list.selectedIndex].value;//Selected option value    //hide
    myButton.style.display = 'none';

    //show
    myButton.style.display = 'block'; 
}

document.getElementById("button").style.visibility="visible|hidden|collapse|inherit";