用js获取input的值，并用提示框显示出来
<div><div>
<h4>一、需求如下：</h4>
<p>建立input输入框，设置其id为”study”，设置其值为”666″， 用js获取input的值，创建一个按钮叫”弹出”，点击”弹出”按钮，弹出input中的value的值。</p>
<h4>二、思路：</h4>
<p>（1）获取input输入框的value值<br>
为input输入框设置id，name属性后，可以通过id或name来获取input的value值，这里使用id来获取input的value值</p>
<p>（2）创建”弹出”按钮<br>
按钮的创建有多种，可以使用input，button标签等来创建，这里使用button标签</p>
<p>（3）使用js展示input中的value的值<br>
可以为按钮设置onclick属性，并设定onclick对应的方法（这里创建了show这个方法），然后在show方法中使用alert方法来做提示信息，从而展示出input的value值</p>
<h4>三、效果图：</h4>
</div>
<p></p></div>
<div>
<h4>四、代码如下：</h4>
<p>方案一、使用表单结合show方法</p>
</div>
<div class="codecolorer-container html4strict vibrant" style="overflow:auto;white-space:nowrap;width:700px;height:400px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>21<br>22<br></div></td><td><div class="html4strict codecolorer"><span class="sc2"><<span class="kw2">html</span>></span><br>
<span class="sc2"><<span class="kw2">head</span>></span><br>
<br>
<span class="sc2"><<span class="kw2">title</span>></span>弹出输入框的值<span class="sc2"><<span class="sy0">/</span><span class="kw2">title</span>></span><br>
<span class="sc2"><<span class="kw2">script</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text/javascript"</span>></span><br>
function show(){<br>
var a = myform.study.value; //使用id来获取input输入框的值<br>
alert(a);<br>
};<br>
<br>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">script</span>></span><br>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">head</span>></span><br>
<br>
<span class="sc2"><<span class="kw2">body</span>></span><br>
<span class="sc2"><<span class="kw2">form</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"myform"</span>></span><br>
<span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"text"</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"study"</span> <span class="kw3">name</span><span class="sy0">=</span><span class="st0">"box"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"666"</span> <span class="sy0">/</span>></span><br>
<span class="sc2"><<span class="kw2">button</span> <span class="kw3">onclick</span><span class="sy0">=</span><span class="st0">"show()"</span>></span>弹出<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span><br>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">form</span>></span><br>
<br>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">body</span>></span><br>
<br>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">html</span>></span></div></td></tr></tbody></table></div>
<p>除了使用id来获取input输入框的值，你也可以用name来获取input输入框的值，修改如下:</p>
<div class="codecolorer-container javascript vibrant" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br></div></td><td><div class="javascript codecolorer"><span class="sy0">-</span> <span class="kw1">var</span> a <span class="sy0">=</span> myform.<span class="me1">study</span>.<span class="me1">value</span><span class="sy0">;</span> <br>
<span class="sy0">+</span> <span class="kw1">var</span> a <span class="sy0">=</span> myform.<span class="me1">box</span>.<span class="me1">value</span><span class="sy0">;</span></div></td></tr></tbody></table></div>
<p>此外，你也可以使用input标签来创建按钮进行，例如将上面的按钮修改为:</p>
<div class="codecolorer-container html4strict vibrant" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br></div></td><td><div class="html4strict codecolorer">- <span class="sc2"><<span class="kw2">button</span> <span class="kw3">onclick</span><span class="sy0">=</span><span class="st0">"show()"</span>></span>弹出<span class="sc2"><<span class="sy0">/</span><span class="kw2">button</span>></span><br>
+ <span class="sc2"><<span class="kw2">input</span> <span class="kw3">type</span><span class="sy0">=</span><span class="st0">"button"</span> <span class="kw3">onclick</span><span class="sy0">=</span><span class="st0">"show()"</span> <span class="kw3">value</span><span class="sy0">=</span><span class="st0">"弹出"</span> <span class="sy0">/</span>></span></div></td></tr></tbody></table></div>
<p>方案二、使用getElementId</p>
<div class="codecolorer-container javascript vibrant" style="overflow:auto;white-space:nowrap;width:700px;"><table cellspacing="0" cellpadding="0"><tbody><tr><td class="line-numbers"><div>1<br>2<br>3<br>4<br>5<br>6<br>7<br></div></td><td><div class="javascript codecolorer"><span class="sy0"><</span>input id<span class="sy0">=</span><span class="st0">"study"</span> <span class="kw5">class</span><span class="sy0">=</span><span class="st0">"ob1"</span> value<span class="sy0">=</span><span class="st0">"666"</span> type<span class="sy0">=</span><span class="st0">"text"</span><span class="sy0">></span><br>
<span class="sy0"><</span>input type<span class="sy0">=</span><span class="st0">"button"</span> <span class="kw5">class</span><span class="sy0">=</span><span class="st0">"intro"</span> id<span class="sy0">=</span><span class="st0">"btn"</span> value<span class="sy0">=</span><span class="st0">"弹出"</span><span class="sy0">></span><br>
<span class="sy0"><</span>script<span class="sy0">></span><br>
document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">"btn"</span><span class="br0">)</span>.<span class="me1">onclick</span> <span class="sy0">=</span> <span class="kw1">function</span><span class="br0">(</span><span class="br0">)</span><span class="br0">{</span><br>
<span class="kw1">var</span> v<span class="sy0">=</span>document.<span class="me1">getElementById</span><span class="br0">(</span><span class="st0">"study"</span><span class="br0">)</span>.<span class="me1">value</span><span class="sy0">;</span><br>
alert<span class="br0">(</span>v<span class="br0">)</span><span class="sy0">;</span><br>
<span class="br0">}</span></div></td></tr></tbody></table></div>
<div>
<p>除了使用getElementById获取指定的内容（这里是获取”弹出”按钮，然后为按钮绑定o’clock事件），还可以使用以下方法：</p>
<ul>
<li>getElementsByTagName 通过标签来获取内容</li>
<li>getElementsByClassName 通过类名来获取内容</li>
</ul>
<p>注意：getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。</p>
</div>
<p><span style="color: #999999;">作者：稻草人_b788</span><br>
<span style="color: #999999;">链接：https://www.jianshu.com/p/ce9db183159d</span><br>
<span style="color: #999999;">来源：简书</span><br>
<span style="color: #999999;">著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</span></p>
页:
[1]