javascript - jQuery の hide() と show() に相当する JavaScript は何ですか?

Question

私は単純な非表示と表示の jQuery コードを持っていますが、これと同等の JavaScript があるかどうかを尋ねたいですか? これが私のコードです。

$(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" />

以下のコメントからいくつかのコードに従いましたが、機能していません。

<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" />

私が欲しいのは、最初はボタンが非表示になっていて、<option>「科学」タグをクリックするとボタンが表示され、ボタンをクリックするとボタンがクリックされた後に非表示になります。<option>さらにタグがある場合はどうなりますか？

Answer 1

これは簡単です

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

選択に a を追加onSelect="selectOptionsupdated(this)します

それから

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

Answer 2

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

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

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

選択したタグの更新..これを試してください

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

Answer 3

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