How can I make all elements of the <p> tag invisible except for the one with the correct id

Question

I'm making a simple website that shows logarithm rules and examples. I'm trying to make all of the other rules disappear except for the one that corresponds to the clicked button. The buttons currently do nothing. I'm not sure what is wrong with the javascript.

        <script>
            function log() {
                var tag = document.getElementsByTagName("p")
                tag.style.display = "none"
                var ID = document.getElementById("log");
                ID.style.display = "block";
            }
            function product() {
                var tag = document.getElementsByTagName("p")
                tag.style.display = "none"
                var ID = document.getElementById("product");
                ID.style.display = "block";
            }
            function quotient() {
                var tag = document.getElementsByTagName("p")
                tag.style.display = "none"
                var ID = document.getElementById("quotient");
                ID.style.display = "block";
            }
            function power() {
                var tag = document.getElementsByTagName("p")
                tag.style.display = "none"
                var ID = document.getElementById("power");
                ID.style.display = "block";
            }
            function inverse() {
                var tag = document.getElementsByTagName("p")
                tag.style.display = "none"
                var ID = document.getElementById("inverse");
                ID.style.display = "block";
            }
            function changebase() {
                var tag = document.getElementsByTagName("p")
                tag.style.display = "none"
                var ID = document.getElementById("changebase");
                ID.style.display = "block";
            }
        </script>

Answer 1

The issue you're running in to is that you have to iterate over your p tags, setting the desired property on each. The below code shows this and also an optimization that reduces it to one function that takes an id argument.

 function show(id) { const pTags = document.getElementsByTagName('p'); for (let i = 0; i < pTags.length; i++) { pTags[i].style.display = pTags[i].id === id ? "block" : "none"; } } show("quotient");

 <p id="products">Products</p> <p id="quotient">Quotient</p> <button onclick="show('products')">Show Products</button> <button onclick="show('quotient')">Show Quotient</button>

Answer 2

directly made from your menu

 const myMenu = document.querySelector('#menu-select') , myPara = document.querySelectorAll('p') myMenu.oninput=()=> { myPara.forEach(pElm=> pElm.style.display = (pElm.id === myMenu.value) ? 'block': 'none') }

 <select id="menu-select"> <option value="log" selected >log</option> <option value="product" >product</option> <option value="quotient" >quotient</option> <option value="power" >power</option> <option value="inverse" >inverse</option> <option value="changebase">changebase</option> </select> <p id="log" >log </p> <p id="product" >product</p> <p id="quotient" >quotient</p> <p id="power" >power</p> <p id="inverse" >inverse</p> <p id="changebase">changebase</p>

otherwise if you prefer to use a function...

 function showTag( idTagP ) { document.querySelectorAll('p').forEach(pElm=>{ pElm.style.display = (pElm.id === idTagP) ? 'block': 'none' }) } showTag("quotient");

 <p id="products">Products</p> <p id="quotient">Quotient</p>