通過單擊按鈕更改輸入值

Question

我試圖通過單擊按鈕來更改輸入的值。 當我單擊按鈕時，輸入的值發生了變化，但它隱藏了。 我的 HTML 代碼是 -

<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>

而腳本是——

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

有人告訴我為什么會發生這種情況...

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小提琴試試吧

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()

您想在調用 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>