ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScriptを使用してボタンをクリック後にテキストを表示するように変更する方法_JavaScriptスキル

JavaScriptを使用してボタンをクリック後にテキストを表示するように変更する方法_JavaScriptスキル

WBOY
リリース: 2016-05-16 15:59:28
オリジナル
1465 人が閲覧しました

この記事の例では、JavaScriptを使用してボタンをクリック後にテキストを表示するように変更する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>显示一些按钮,如果点击了,
 当前点击的按钮文本变为“点了”,其他按钮文本变为“没点”</title>
 <script type="text/javascript">
 //为所有按钮动态添加事件
 function IniButtonEvent() {
  var Items = document.getElementsByTagName("input");
  for (var i = 0; i < Items.length; i++) {
  var objTmp = Items[i];
  if (objTmp.type == "button") {
   objTmp.onclick = ButtonClick;
  }
  }
 }
 function ButtonClick() {
  var Items = document.getElementsByTagName("input");
  for (var i = 0; i < Items.length; i++) {
  var objTmp = Items[i];
  if (objTmp.type == "button") {
  //判断是否是按钮
   //window.event.srcElement触发当前事件的元素
   //用来判断是否是当前单击的按钮
   if (objTmp == window.event.srcElement) {
   objTmp.value = "点了";
   }
   else {
   objTmp.value = "没点";
   }
  }
  }
 }
 </script>
</head>
<body onload="IniButtonEvent()">
显示一些按钮,如果点击了,当前点击的按钮文本变为“点了”,
其他按钮文本变为“没点”<br />
 <input type="button" value="没点" />
 <input type="button" value="没点" />
 <input type="button" value="没点" />
 <input type="button" value="没点" />
 <input type="button" value="没点" />
</body>
</html>
ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート