recherche

Maison >interface Web >js tutoriel >Comment utiliser Javascript pour modifier le bouton afin d'afficher le texte après avoir cliqué sur les compétences it_javascript

Comment utiliser Javascript pour modifier le bouton afin d'afficher le texte après avoir cliqué sur les compétences it_javascript

WBOY
WBOYoriginal
2016-05-16 15:59:281445parcourir

L'exemple de cet article décrit la méthode d'utilisation de javascript pour modifier le bouton afin d'afficher le texte après avoir cliqué. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante : 

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

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Méthode Javascript pour réaliser un changement de couleur de ligne alterné dans les compétences table_javascriptArticle suivant：Méthode Javascript pour réaliser un changement de couleur de ligne alterné dans les compétences table_javascript

Articles Liés

Voir plus