What is the JavaScript equivalent of jQuery's hide() and show()? [duplicate]

Question

I have a simple hide and show jQuery code and I want to ask if there is equivalent of this to JavaScript? Here's my code.

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  <select>    <option id="1">Science</option>  </select>  <input type="button" value="Click" id="myButton" />

I have followed some codes from the comments below but they are not working:

<script>    document.getElementById('myButton').style.display = 'none';      function selectOptionsupdated(select) {      document.getElementById('myButton').style.display = 'block';    }  </script>    <select onSelect="selectOptionsupdated(this)">    <option id="1">Science</option>  </select>  <input type="button" value="Click" id="myButton" />

What I want is at first the button is hidden, and when I click the <option> tag "Science" the button appears and when I click the button, the button is hidden after it is being clicked. And what if there are more <option> tags?

Answer 1

this is simple

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

add a onSelect="selectOptionsupdated(this) in your select

then

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

Answer 2

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

Update for your select tag..try this

html

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

js

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';  }