如何隐藏和显示 html 输入文本和段落

How to hide and display html input text and paragraph

本文关键字：显示 html 文本 段落 输入 何隐藏 隐藏      更新时间：2023-09-26

我想根据下拉值显示段落和输入文本。我在下面写了代码，但它对我来说并不完美。输入文本永远不会正确显示或隐藏。

<html>
<script type="text/javascript">
    function nameChange(){
        var a = document.getElementById("shape").value;
        if(a=="Circle"){
            document.getElementById("geometry").innerHTML = "Please provide Radius of Circle: ";
            document.getElementById("geometry1").style.display = "none";
            document.getElementById("Input1").style.visibility = "visible";
        }else if(a=="Triangle"){
            document.getElementById("geometry").innerHTML = "Please provide Dimension of Triangle: ";
            document.getElementById("geometry1").style.visibility = "hidden";
            document.getElementById("Input1").style.visibility = "visible";
        }else if(a=="Square"){
            document.getElementById("geometry").innerHTML = "Please provide Dimension of Square: ";
            document.getElementById("geometry1").style.visibility = "hidden";
            document.getElementById("Input1").style.visibility = "visible";
        }else{
            document.getElementById("geometry").innerHTML = "Please provide Length of Rectangle: ";
            document.getElementById("geometry1").innerHTML = "Please provide Breath of Rectangle: ";
            document.getElementById("Input1").style.visibility = "visible";
            document.getElementById("Input2").style.visibility = "visible";
        }
    }
</script>               
<select id="shape" onChange="nameChange()">
  <option value="Triangle">Triangle</option>
  <option value="Rectangle">Rectangle</option>
  <option value="Circle">Circle</option>
  <option value="Square">Square</option>
</select>
<p id="geometry" /p>
    <input id="Input1" type="text" stype="display:none">
 <p id="geometry1" /p> 
    <input id="Input2" type="text" stype="display:none">
</html>

试试这段代码，它应该可以工作。有多个错别字和段落标签未正确关闭。

JS代码： 

<script type="text/javascript">
    function nameChange(){
        var a = document.getElementById("shape").value;
        if(a=="Circle"){
            document.getElementById("geometry").innerHTML = "Please provide Radius of Circle: ";
            document.getElementById("geometry1").style.display = "none";
            document.getElementById("Input1").style.display = "block";
        }else if(a=="Triangle"){
            document.getElementById("geometry").innerHTML = "Please provide Dimension of Triangle: ";
            document.getElementById("geometry1").style.display = "none";
            document.getElementById("Input1").style.display = "block";
        }else if(a=="Square"){
            document.getElementById("geometry").innerHTML = "Please provide Dimension of Square: ";
            document.getElementById("geometry1").style.display = "none";
            document.getElementById("Input1").style.display = "block";
        }else{
            document.getElementById("geometry").innerHTML = "Please provide Length of Rectangle: ";
            document.getElementById("geometry1").innerHTML = "Please provide Breath of Rectangle: ";
            document.getElementById("Input1").style.display = "none";
            document.getElementById("Input2").style.display = "block";
        }
    }
</script>

网页代码

<select id="shape" onChange="nameChange()">
    <option value="Triangle">Triangle</option>
    <option value="Rectangle">Rectangle</option>
    <option value="Circle">Circle</option>
    <option value="Square">Square</option>
</select>
<p id="geometry"></p>
<input id="Input1" type="text" style="display:none">
<p id="geometry1"></p> 
<input id="Input2" type="text" style="display:none">
相关文章：