我怎样才能使所有的元素<p>除了具有正确 id 的标签外，标签不可见

Question

我正在制作一个显示对数规则和示例的简单网站。 我试图让所有其他规则消失，除了与点击按钮对应的规则。 这些按钮目前什么都不做。 我不确定 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

您遇到的问题是您必须迭代p标签，在每个标签上设置所需的属性。 下面的代码显示了这一点，以及将其简化为一个接受id参数的函数的优化。

 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

直接从您的菜单中制作

 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>

否则，如果您更喜欢使用函数...

 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>