通过单击按钮更改输入值

Question

I am trying to change the value of input by clicking button. When i click the button the value of input is changed but it hide. My HTML code is -

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

And SCRIPT is-

<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";
}

someone tell me why this happen...

Answer 1

Hope this is what you are expecting

//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() function first line "document.getElementById('tab1').style.display = 'none';" it means hide your tab1 div and your textbox inside the this div so how can display your textbox ? if you are display this textbox then remove your first line in tab() function .

<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

You called the function in two ways. tab('tab1') and tab()

You want to show the tab after calling tab('tab1'), and want to change the input value after calling tab().

In order to use the same function to achieve that, you have to use if to write two cases.

if (!tab) checks if you are calling tab() whereas the else case checks if you are calling 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>