如何使用javascript隐藏或显示html标记_Javascript_Html

如何使用javascript隐藏或显示html标记

javascript html

如何使用javascript隐藏或显示html标记,javascript,html,Javascript,Html,在我的HTML代码中有两个div标记，我定义了一个类，通过它我可以扩展或隐藏它们。我遇到的问题是，当我单击其中一个时，其他更改的值会发生变化 <HTML> <BODY> <FORM> <script language="JavaScript"> function setVisibility(id) { if (document.

在我的HTML代码中有两个div标记，我定义了一个类，通过它我可以扩展或隐藏它们。我遇到的问题是，当我单击其中一个时，其他更改的值会发生变化

<HTML>

    <BODY>
        <FORM>
            <script language="JavaScript">
                function setVisibility(id) {
                    if (document.getElementById('btnshowhide').value == '-') {
                        document.getElementById('btnshowhide').value = '+';
                        document.getElementById(id).style.display = 'none';
                    } else {
                        document.getElementById('btnshowhide').value = '-';
                        document.getElementById(id).style.display = 'inline';
                    }
                }
            </script>
            <FIELDSET style="width: 600px;">
                <LEGEND>
                    <input type=button name=type id='btnshowhide' value='+' onclick="setVisibility('div1');" ;/>Insert Data:</LEGEND>
                <DIV id="div1" style="display: none;">
                    <LABEL for="351fef76-b826-426f-88c4-dbaaa60f886b">Name:</LABEL>
                    <TEXTAREA id="351fef76-b826   -426f-88c4-dbaaa60f886b" name="txtname" value="Name" type="text" title="Name:">Name</TEXTAREA>
                    <BR>
                    <LABEL for="02973dcc-5677-417c-a9bf-1578f58923ef">Family:</LABEL>
                    <TEXTAREA id="02973dcc-5677-417c-a9bf-1578f58923ef" name="txtFamiy" value="Family" type="text" title="Family:">Family</TEXTAREA>
                    <BR>
                </DIV>
            </FIELDSET>
            <BR>
            <FIELDSET style="width: 600px;">
                <LEGEND>
                    <input type=button name=type id='btnshowhide' value='+' onclick="setVisibility('div2');" ;/>Insert Data:</LEGEND>
                <DIV id="div2" style="display: none;">
                    <LABEL for="d8876943-5861-4d62-9249-c5fef88219fa">Type of property</LABEL>
                    <SELECT id="d8876943-5861-4d62-9249-c5fef88219fa" name="PropertyType" value="" type="select" title="Type of property"></SELECT>
                    <BR>
                </DIV>
            </FIELDSET>
            <BR>
        </FORM>
    </BODY>

</HTML>


函数设置可见性（id）{
if（document.getElementById（'btnshowhide'）。值='-'）{
document.getElementById（'btnshowhide'）。值='+'；
document.getElementById（id）.style.display='none'；
}否则{
document.getElementById（'btnshowhide'）。值='-'；
document.getElementById（id）.style.display='inline'；
}
}
插入数据：
姓名：
名称


家庭：
家庭




插入数据：
财产类型

我尝试更改按钮的ID，但没有更改。

将按钮更改为--

首先，您不应该有两个ID相同的元素。您应该使用类

这是因为两个按钮都带有

id=“btnshowhide”

所以当您尝试执行

document.getElementById（'btnshowhide'）。value

时，它会匹配两个按钮

你可以这样做

<script language="JavaScript">
function setVisibility(id,input) 
{
    if(input.value=='-')
    {
        input.value = '+';
        document.getElementById(id).style.display = 'none';
    }
    else
    {
        input.value = '-';
        document.getElementById(id).style.display = 'inline';
    }
}
</script>

如果类具有相同的名称，则应使用类而不是id。元素的

id

必须是唯一的。如果分配给两个按钮，则您将使用相同的按钮。@SachinG:我已经尝试更改ID，但无效。我的问题值得向下投票吗？？？请查看我的答案。这个问题被否决了，可能是因为这种问题以前已经被问过了，并且已经有了答案。

function setVisibility(id,buttonid) {
  if(document.getElementById(buttonid).value=='-'){
        document.getElementById(buttonid).value = '+';
        document.getElementById(id).style.display = 'none';
  }
else{
        document.getElementById(buttonid).value = '-';
        document.getElementById(id).style.display = 'inline';
  }
}

<script language="JavaScript">
function setVisibility(id,input) 
{
    if(input.value=='-')
    {
        input.value = '+';
        document.getElementById(id).style.display = 'none';
    }
    else
    {
        input.value = '-';
        document.getElementById(id).style.display = 'inline';
    }
}
</script>

onclick="setVisibility('div1', this);"
onclick="setVisibility('div2', this);"