Question

我正在尝试通过单击按钮来更改输入值。当我单击按钮时，输入的值会更改，但它会隐藏。我的HTML代码是 -

SELECT DISTINCT (EmployeeID, date1) as totaldate

SCRIPT是 -

<div id="Tabs">
<ul>
<li id="li_tab1" onclick="tab('tab1')" ><a>Lounge/Family Room</a></li>
</ul>
<div id="tab1">
<p>This is the text for tab 1</p>
<input type="button" value="-" />
<input type="number"id="inputtag" style="width:5%;" value="0"/>
<input type="button" value="+" onclick="tab()"/>
</div>

有人告诉我为什么会这样......

Answer 1

希望这是你所期待的

//HTML
<div id="Tabs">
<ul>
    <li id="li_tab1" onclick="tab('tab1')" ><a>Lounge/Family Room</a></li>
</ul>

<div id="tab1" style="display:none">
    <p>This is the text for tab 1</p>
    <input type="button" value="-" />
    <input type="number"id="inputtag" style="width:5%;" value="0"/>
    <input type="button" value="+" onclick="tab()"/>
</div>
</div>


//Script
function tab(tab) {
if(tab)
    document.getElementById(tab).style.display = 'block';
else
  {
    document.getElementById('li_tab1').setAttribute("class", "");
    document.getElementById("inputtag").value = (+document.getElementById("inputtag").value) + 1;
  }
}

Js fiddle Try it

Answer 2

tab（）函数第一行“document.getElementById（'tab1'）。style.display ='none';”这意味着隐藏你的tab1 div和你的文本框在这个div中，那么如何显示你的文本框？如果您显示此文本框，则删除tab（）函数中的第一行。

<script type="text/javascript">
function tab(tab) {
document.getElementById('li_tab1').setAttribute("class", "");
document.getElementById(tab).style.display = 'block';
document.getElementById("inputtag").value = "1";
}
</script>

Answer 3

您以两种方式调用该函数。 tab（'tab1'）和tab（）

您想在调用标签（'tab1'）后显示标签，并且想要在调用tab（）之后更改输入值。

为了使用相同的功能来实现这一点，你必须使用if写两种情况。

if（！tab）检查你是否正在调用tab（）而else case检查你是否正在调用tab（'tab1'）。

function tab(tab) {
    if (!tab)
    {
		document.getElementById("inputtag").value++;
    }
    else
    {
        document.getElementById(tab).style.display = 'none';
        document.getElementById('li_tab1').setAttribute("class", "");
        document.getElementById(tab).style.display = 'block';
    }
}

#tab1 {
    display: none;
}

<div id="Tabs">
    <ul>
        <li id="li_tab1" onclick="tab('tab1')" ><a>Lounge/Family Room</a></li>
    </ul>

    <div id="tab1">
        <p>This is the text for tab 1</p>
        <input type="button" value="-" />
        <input type="number"id="inputtag" style="width:5%;" value='0'/>
        <input type="button" value="+" onclick="tab()"/>
    </div>
</div>

单击按钮更改输入值

3 个答案: